Components

Themes

Learn how to control themes and create custom color schemes.

Fluxon UI supports automatic light/dark mode detection, manual theme control, and custom theme creation. All themes use the same semantic color tokens for consistency.

Automatic Theme Detection

By default, Fluxon UI automatically detects and follows the user's system theme preference. This works through CSS color-scheme and light-dark() functions.

{} theme.css 
:root {
  color-scheme: light dark;

  /* Automatically switches based on system preference */
  --primary: light-dark(var(--color-zinc-900), var(--color-white));
  --background-base: light-dark(var(--color-white), var(--color-zinc-900));
}

This automatic behavior requires no JavaScript and works out of the box.

Manual Theme Control

For applications that need explicit theme control, you can use the data-theme attribute to override automatic detection.

{} app.css 
[data-theme='light'] {
  color-scheme: light;
}

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

Control the theme by setting the attribute on the HTML element:

{} root.html.heex 
<!-- Force light theme -->
<html data-theme="light">

<!-- Force dark theme -->
<html data-theme="dark">

Forcing Specific Themes

To completely disable automatic theme switching and always use a specific theme, set the color-scheme property on :root:

{} app.css 
/* Always use light theme, ignore system preference */
:root {
  color-scheme: light;
}

/* Always use dark theme, ignore system preference */
:root {
  color-scheme: dark;
}

Creating Custom Themes

Create entirely new themes by defining all semantic tokens with the data-theme selector. Custom themes override the default light/dark behavior.

{} app.css 
[data-theme='pastel'] {
  color-scheme: light;

  /* Primary */
  --primary: oklch(0.68 0.12 285); /* Soft lavender */

  /* Foreground */
  --foreground: oklch(0.45 0.06 285); /* Dusty purple */
  --foreground-soft: oklch(0.55 0.05 285); /* Muted purple */
  --foreground-softer: oklch(0.65 0.04 285); /* Soft purple */
  --foreground-softest: oklch(0.75 0.03 285); /* Pale purple */
  --foreground-primary: oklch(0.98 0.01 285); /* Cloud white */

  /* Backgrounds */
  --background-base: oklch(0.98 0.005 300); /* Dreamy white */
  --background-accent: oklch(0.96 0.01 300); /* Soft mist */

  /* Surfaces */
  --surface: oklch(0.97 0.008 300); /* Silk surface */
  --overlay: oklch(0.99 0.003 300); /* Feather overlay */

  /* Component Backgrounds */
  --background-input: oklch(0.96 0.01 300); /* Soft input */

  /* Borders */
  --border-base: oklch(0.85 0.03 300); /* Gentle border */
  --border-input: oklch(0.82 0.04 300); /* Soft outline */

  /* Semantic Colors */
  --danger: oklch(0.65 0.15 15); /* Soft rose */
  --success: oklch(0.72 0.12 150); /* Mint green */
  --warning: oklch(0.78 0.12 75); /* Butter yellow */
  --info: oklch(0.7 0.12 220); /* Sky blue */

  /* Focus States */
  --focus: oklch(0.7 0.14 285); /* Gentle focus */
  --focus-danger: oklch(0.65 0.15 15 / 0.8); /* Rose focus */

  /* Layout */
  --radius-base: var(--radius-sm);
  --shadow-base: 0 2px 8px -1px oklch(0.68 0.12 285 / 0.08); /* Soft lavender shadow */
}

Applying Custom Themes

Use custom themes by setting the data-theme attribute:

{} root.html.heex 
<!-- Apply pastel theme -->
<html data-theme="pastel">

<!-- Apply cappuccino theme -->
<html data-theme="cappuccino">

Example Custom Themes

Apply some custom themes that will effectively demonstrate the theme system.

light
A
A
A
A
A
A
A
dark
A
A
A
A
A
A
A
pastel
A
A
A
A
A
A
A
cappuccino
A
A
A
A
A
A
A

For detailed information about the semantic color system and token reference, see the Colors guide.