Skip to content
reke-ui

Theming

reke-ui ships with dark (default) and light themes, plus an auto mode that follows OS preference.

Setting the theme

Section titled “Setting the theme”

Add the data-reke-theme attribute to your <html> tag:

<html>                          <!-- Dark (default) -->
<html data-reke-theme="dark">   <!-- Dark (explicit) -->
<html data-reke-theme="light">  <!-- Light -->
<html data-reke-theme="auto">   <!-- Follows OS preference -->

Switching themes at runtime

Section titled “Switching themes at runtime”
// Toggle between dark and light
document.documentElement.setAttribute('data-reke-theme', 'light');


// Follow OS preference
document.documentElement.setAttribute('data-reke-theme', 'auto');

Customizing tokens

Section titled “Customizing tokens”

Override any CSS custom property to match your brand:

:root {
  --reke-color-primary: #8B5CF6;
  --reke-color-secondary: #EC4899;
  --reke-radius: 8px;
  --reke-font-mono: 'Fira Code', monospace;
}

Every component uses tokens with fallback values, so partial overrides work fine.

See the full list of available tokens in the Token Reference.