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.
Added validation for TrueShade availability
Implemented a safeguard to verify that window.TrueShade and window.TrueShade.Theme are defined before invoking public APIs.
Prevents runtime errors when the TrueShade library is not properly loaded.
Improves stability and ensures API calls are only made when the underlying objects are available.