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.
New Features:
TrueShade can now be initialized with an explicit AppName by calling TrueShade.Theme.Initialize(appName). When set, this name is used to generate both the localStorage key and the BroadcastChannel ID, allowing multiple front-ends under the same portal to share a common dark/light theme preference. If no parameter is provided, the previous behavior using the derived $OS_<module>$ key remains unchanged.
Compability:
The update is fully backward-compatible. Existing implementations using Initialize() without arguments will behave exactly as before, while new integrations can optionally specify an AppName to enable shared preferences.