The Dynamic Theme Forge asset provides a flexible and scalable approach to UI theming in OutSystems applications by allowing developers to dynamically update CSS variables at runtime. Instead of maintaining multiple static themes or performing complex UI refresh logic, this asset enables real-time style updates using JavaScript and CSS custom properties.
The asset works by programmatically setting CSS variables (for example, --primary-color, --secondary-color, --font-size, --border-radius) on the root element or selected containers. These variables can then be referenced throughout the application’s styles, ensuring centralized and consistent control over the visual design.
--primary-color
--secondary-color
--font-size
--border-radius
Key capabilities include:
Dynamic setting of CSS variables at runtime
Support for multiple theme values (colors, fonts, spacing, shadows, etc.)
Instant UI updates without page reload
Easy implementation of dark mode and light mode
Brand-based and user-specific theming
Centralized theme management using key–value pairs
No dependency on server-side logic or redeployment