With TrueShade, you can easily support three modes out of the box:
system-default – automatically follows the system’s dark/light preference.
dark – forces dark mode.
light – forces light mode.
The component stores the preference in localStorage under a per-module key and automatically keeps the <html data-theme> attribute updated. This ensures a consistent look and feel across your entire app, even when users switch devices, tabs, or operating system preferences.
Automatic initialization – defaults to system-default on first load.
OS scheme integration – responds in real time to system dark/light changes.
Cross-tab synchronization – applies updates instantly across multiple browser windows.
Minimal setup – just include it in your OnReady layout block event and start using.
Enhance user experience with native dark mode support.
Keep your application modern and aligned with user expectations.
Save development time with a ready-to-use, OutSystems-friendly solution.
Stay dependency-free and lightweight, with no external libraries.
TrueShade is the simplest way to add a polished and reliable dark mode experience to your OutSystems applications.
Changed
Storage key prefix updated from $NS_ to $OS_ to align with the naming convention of OutSystems Client Variables in localStorage.
Default mode token renamed from os-default to system-default to avoid ambiguity where OS could be interpreted as OutSystems instead of Operating System, and to improve clarity in Forge documentation.