trueshade
Reactive icon

TrueShade

Stable version 1.2.0 (Compatible with OutSystems 11)
Uploaded
 on 6 Oct (22 hours ago)
 by 
5.0
 (5 ratings)
trueshade

TrueShade

Details
TrueShade is a lightweight, dependency-free theme controller for OutSystems applications. It enables seamless management of dark, light, and system default color schemes while ensuring consistency across modules, sessions, and browser tabs. This component automatically applies the correct theme based on the user’s preference or the operating system’s dark mode setting. It stores the chosen option in localStorage under a per-module key and keeps the attribute synchronized at all times.
Read more

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.


Key Features


  • 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


Notes


  • 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.


Release notes (1.2.0)

New Features:

  • Optional AppName parameter in Initialize(appName)
    • 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.

License (1.2.0)
Reviews (1)
by 
25 Aug
in version 1.1.0
Powerful engine for effortless theme management.
Team
Other assets in this category