Stable version 1.0.0 (Compatible with OutSystems 11)

Uploaded

on 22 Sep (19 hours ago)

2.0

(1 rating)

Details

Dark Mode Toggle is a lightweight, fully client-side Reactive Web Block for OutSystems that provides an instant dark/light mode switcher for any Reactive Web application.

It applies theme colors globally across the entire app using CSS variables, remembers the user's preference in localStorage, and supports automatic detection of the system's dark/light preference.

No external libraries required built entirely with vanilla JavaScript and OutSystems Reactive Web.

Key Features

Instant dark/light mode switching with smooth transition
3 display styles — Toggle Switch, Sun/Moon Icon, or Both
4 built-in preset themes — Default, Sunset, Ocean, Forest
Auto mode — follows OS/system dark/light preference
Remembers user preference via localStorage
Applies globally to entire app via CSS variables
Smooth color transition animation
Fires OutSystems event to parent on mode change
Force set mode via SetDarkMode action
Get current mode via GetCurrentMode action
Best placed in Layout Block — works across all screens
No external libraries or CDN required
Mobile compatible

Release notes (1.0.0)

License (1.0.0)

BSD-3 license (https://opensource.org/licenses/BSD-3-Clause)

Reviews (1)

15:10 (4 hours ago)

in version 1.0.0

The toggle works, but the implementation is hard to live with in a real app:

• State lives in window globals instead of a Client Variable, so GetCurrentMode is wrong until the block has rendered.
• The block CSS forces !important rules on body, inputs and any class containing "card"/"panel", overriding the app theme and OutSystems UI.
• Colour palettes are hard-coded in JavaScript and duplicated across three actions; the theme should own colours, the component should only switch a data-theme attribute.
• Runs in OnReady, so every page load flashes light before going dark; a global transition style is injected and never removed.
• No accessibility (Link with no label, no role="switch"), console.log everywhere, errors silently swallowed, mandatory event, no descriptions.

Team