Color modes

Selaras automatically installs Nuxt Color Mode and ships light and dark token recipes. The system preference follows the operating system; the resolved appearance is either light or dark.

Built-in controls

<SColorModeToggle />
<SColorModeSwitch />

ColorModeToggle switches appearance through a button. ColorModeSwitch offers a switch. Both use the shared color-mode state.

Preference and resolved appearance

<script setup lang="ts">
const colorMode = useColorMode()
</script>

<template>
  <SButton @click="colorMode.preference = 'system'">
    Use system appearance
  </SButton>
</template>

Read colorMode.preference for the user's choice and colorMode.value for the resolved mode. Nuxt Color Mode manages the root .light and .dark classes and persistence. Configure its colorMode options in nuxt.config.ts when you need a different initial preference or storage policy.

Scoped appearance

<STheme as="section" mode="dark">
  <SCard>Dark content inside a light page</SCard>
</STheme>

STheme accepts inherit, light, and dark. An explicit scoped mode needs a DOM owner through as. See Scoped themes for component configuration and token overrides.

Color modes choose light or dark recipes. Semantic roles such as primary and danger select a color purpose; documentation theme presets choose a visual design. These are separate settings.