Dark Mode

Live Elements handles light and dark modes. You can:

• Configure the page to dark or light mode.
• Automatically match the user's system preference.
• Add a toggle button to switch between modes.

Configuring light and dark modes

By default, Live Elements loads all components in light mode.

To enable dark mode, simply add the dark class to the page Body:

component MyPage < PageView {
    Body { classes: ['dark'] }
}

Matching System Preferences

To automatically adjust to the user's system color scheme, add ColorSchemeLoader to the page head:

import live-web-view.color

component Index < PageView {
    head: PageProperties { ColorSchemeLoader {} }
}

Toggle Button

The ColorSchemeToggleButton lets users switch between dark and light modes.

import live-web.dom
import live-web-view.color

static any[] use = [ColorSchemeToggleButton]

ColorSchemeToggleButton{}