Colour modes

Every Luke UI identity provides light and dark values. Omit data-color-mode and the browser's prefers-color-scheme setting selects the mode. Add data-color-mode="light" or data-color-mode="dark" when an application or preview needs a fixed mode.

Basic usage

Set the mode on a themed root to force it.

<div className={cx(themeRootClassName, tactileThemeClassName)} data-color-mode="dark">
	<App />
</div>

An explicit mode also sets the native color-scheme property. Browser controls and scrollbars then match the Luke UI content.

Nested modes

Colour modes can nest within one theme identity. Use a nested mode for a preview, a dark page with a light embedded document, or another intentional visual boundary.

<main data-color-mode="dark">
	<App />
	<aside data-color-mode="light">
		<Preview />
	</aside>
</main>

Do not add a second identity class to the nested element. Theme identity does not nest.

System preference and server rendering

System preference works without JavaScript because CSS selects the mode. If the server knows a person's saved preference, render the data-color-mode attribute in the first HTML response. If a client-only setting can differ from the server, set it before the themed UI paints to avoid a flash or hydration mismatch.

Portals

Application-owned portals sit outside their trigger's DOM ancestry. Apply the active identity class and any explicit data-color-mode value to the portal root. Leave the attribute off when the source follows the system setting. Luke UI's Combobox does this for its own popover.

Continue learning