Dark mode

Select a theme

The default theme supports .light, .dark, data-theme="light" and data-theme="dark" scopes:

1<html class="dark">2  <!-- Your application -->3</html>

Select one scope at a time. The theme updates background, foreground, surface and field variables, as well as the browser's color-scheme.

System preference and persistence

Your application owns theme selection. Read prefers-color-scheme when there is no saved preference, persist an explicit user choice, and apply it before the first paint to avoid a flash of the wrong theme. Lenso does not install a theme provider or storage policy.

For a server-rendered application, coordinate the initial document class with the client theme controller. Do not read browser storage during a server render.

Test the whole interface

Check controls, code blocks, overlays and custom surfaces in both themes. A portalled component should inherit the intended scope, and a custom image may need an explicit dark alternative. Keep an accessible label on an icon-only theme switch.