Assets and Runtime

Theme Runtime

Curvea includes a built-in theme preference runtime.

The runtime is injected into the document head.

Supported modes

light
dark
system

Configure theme behavior in curvea.config.json:

{
  "site": {
    "theme": {
      "defaultMode": "system",
      "storageKey": "curvea-theme"
    }
  }
}

The runtime updates attributes on <html>:

<html data-theme-mode="system" data-theme="light">

data-theme-mode stores the selected mode.

data-theme stores the resolved active theme.

The selected mode is stored in localStorage using the configured storage key.

Default:

curvea-theme

The runtime exposes:

window.CurveaTheme.getMode()
window.CurveaTheme.setMode("dark")
window.CurveaTheme.getResolvedTheme()

When mode is system, Curvea follows:

prefers-color-scheme: dark

If the system preference changes, the runtime updates the theme when the current mode is system.

The theme runtime provides logic only.

It does not provide theme styles or a complete UI toggle.

You design theme CSS yourself using attributes such as:

html[data-theme="dark"] {
  color-scheme: dark;
}

1 min read