Heads up: TrueShade handles the logic and sync for themes — you’ll still need to provide your own dark/light CSS.Lightweight JavaScript utility to manage Dark / Light / System-default themes in OutSystems applications.
TrueShade provides the full logic to handle user theme preferences without adding CSS. It takes care of storing the preference per module, applying the correct theme to the <html data-theme> attribute, and keeping everything in sync across tabs and devices.
Theme Modes: system-default, dark, light
System integration: auto-follows the OS dark/light mode when set to system-default
Per-module storage: preference is stored under $OS_<ModuleName>$layout-theme in localStorage
Cross-tab sync: leverages BroadcastChannel to keep themes aligned across multiple browser tabs
Event subscription: Theme.OnChange(cb) lets you react to theme changes in real time
Lifecycle control: Initialize() and Dispose() manage event wiring cleanly
This component does not include CSS for dark/light styling — it provides only the logic and synchronization layer.
Simple to integrate: just include the block, and the logic runs automatically.
Breaking changes:
Removed the static entity; TrueShade now creates 0 AOs instead of 1.
Renamed input/output ThemeId to Theme (Text) for simpler configuration.