Lightweight JavaScript utility to manage Dark / Light / System-default theme in OutSystems apps.
It works by toggling the <html data-theme> attribute and persisting the user’s choice (per module) in localStorage.
Modes: system-default | dark | light
Auto-follows OS dark mode when set to system-default
Per-module key: $OS_<ModuleName>$layout-theme
Minimal DOM writes & zero external dependencies
Safe no-op if localStorage is unavailable
Public API exposed under TrueShade.Theme.*
Consistent Dark / Light theme switching across screens
Respect user’s OS preference unless explicitly overridden
Cross-tab synchronization via storage event
Install the asset from the Forge.
Call the Initialize client action in your Layout’s OnReady event.
html[data-theme="dark"] {
color-scheme: dark;
background: #111;
color: #eee;
}
html[data-theme="light"] {
color-scheme: light;
background: #fff;
color: #111;
TrueShade.Theme.Initialize()
TrueShade.Theme.GetLayoutColorScheme()
TrueShade.Theme.GetStoredLayoutColorScheme()
TrueShade.Theme.SetLayoutColorScheme(mode)
TrueShade.Theme.Dispose()
Initialize()
Idempotent. Seeds localStorage with system-default if absent, applies theme, attaches listeners for OS changes and storage events.
GetLayoutColorScheme()
Returns the effective mode. If stored value is system-default, it resolves to the current OS mode (dark or light).
GetStoredLayoutColorScheme()
Returns the literal stored string or null (before initialization).
SetLayoutColorScheme(mode)
Accepts only system-default | dark | light. Logs console.error on invalid input.
Dispose()
Removes listeners; does not delete stored preference.
Computed key: $OS_<ModuleName>$layout-theme
Where ModuleName is derived as follows:
First non-empty path segment (e.g. /Sales/Home → Sales)
Else first hostname label (e.g. admin.example.com → admin)
If empty, fallback ⇒ layout-theme
<html data-theme="dark|light"> is always kept in sync.
When user selects system-default, the attribute automatically tracks OS changes.
TrueShade Theme Controller
Lightweight JavaScript utility to manage Dark / Light / OS‑default theme in OutSystems apps by toggling the <html data-theme> attribute and persisting the user choice (per module) in localStorage.
Highlights • Modes: os-default | dark | light • Auto-follows OS dark mode when set to os-default • Per‑module key: $OS_<ModuleName>$layout-theme • Minimal DOM writes & zero external dependencies • Safe no-op if localStorage unavailable • Public API exposed under TrueShade.Theme.*
Use Cases • Consistent dark / light theme switching across screens • Respect user’s OS preference unless explicitly overridden • Cross‑tab synchronization (storage event)
Installation
Minimal CSS (place in Theme)
Public APIs
TrueShade.Theme.SetLayoutColorScheme(ThemeId)
Behavior Details
Initialize(): Idempotent. Seeds localStorage with os-default if absent, applies theme, attaches listeners for OS changes + storage.
GetLayoutColorScheme(): Returns the effective mode; if stored is os-default it resolves to current OS (dark or light).
GetStoredLayoutColorScheme(): Returns literal stored string or null (before initialization seed).
SetLayoutColorScheme(mode): Accepts only os-default | dark | light; invalid logs console.error.
Dispose(): Removes listeners; does not delete stored preference.
Storage Key Format
ModuleName is derived:
DOM Contract
<html data-theme="dark|light"> is maintained. When user selects os-default the attribute auto tracks OS changes.