Skip to main content
VelinStyle v0.8.0
⌂ Home
  1. Docs
  2. Customize
  3. Color Modes

Color Modes

VelinStyle supports automatic and manual dark mode via data-velin-theme and prefers-color-scheme. Switch between light, dark, or let the OS decide.

How It Works

Color modes are controlled by the data-velin-theme attribute on the <html> element. VelinStyle ships with two built-in themes and supports automatic OS detection:

Manual Toggle

Toggle dark mode with a button that sets data-velin-theme via JavaScript: 

const toggle = document.getElementById('themeToggle');

toggle.addEventListener('click', () => {
  const html = document.documentElement;
  const current = html.getAttribute('data-velin-theme');
  const next = current === 'dark' ? 'light' : 'dark';

  html.setAttribute('data-velin-theme', next);
  localStorage.setItem('velin-theme', next);
});

Automatic (OS Preference)

Use prefers-color-scheme to automatically match the user's OS setting. VelinStyle's CSS already includes a media query fallback: 

@media (prefers-color-scheme: dark) {
  :root:not([data-velin-theme="light"]) {
    --velin-body-bg: oklch(0.15 0.01 260);
    --velin-body-color: oklch(0.92 0.01 260);
    --velin-surface: oklch(0.20 0.01 260);
    --velin-border-color: oklch(0.30 0.02 260);
  }
}

For a three-way toggle (light / dark / auto), use JavaScript to watch OS changes: 

function setTheme(mode) {
  if (mode === 'auto') {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    document.documentElement.setAttribute('data-velin-theme', prefersDark ? 'dark' : 'light');
  } else {
    document.documentElement.setAttribute('data-velin-theme', mode);
  }
  localStorage.setItem('velin-theme-mode', mode);
}

// Listen for OS changes when in "auto" mode
window.matchMedia('(prefers-color-scheme: dark)')
  .addEventListener('change', () => {
    if (localStorage.getItem('velin-theme-mode') === 'auto') {
      setTheme('auto');
    }
  });

// Restore saved preference on load
const savedMode = localStorage.getItem('velin-theme-mode') || 'auto';
setTheme(savedMode);

Dark Mode Tokens

When data-velin-theme="dark" is active, VelinStyle overrides these tokens: 

[data-velin-theme="dark"] {
  --velin-body-bg:       oklch(0.13 0.01 260);
  --velin-body-color:    oklch(0.90 0.01 260);
  --velin-surface:       oklch(0.18 0.01 260);
  --velin-surface-alt:   oklch(0.22 0.01 260);
  --velin-border-color:  oklch(0.30 0.02 260);
  --velin-heading-color: oklch(0.95 0.005 260);
  --velin-muted:         oklch(0.55 0.01 260);
  --velin-link-color:    oklch(0.70 0.18 264);
  --velin-code-bg:       oklch(0.20 0.01 260);
}

Custom Themes

Create entirely new themes by defining a data-velin-theme value with your own token overrides: 

[data-velin-theme="midnight"] {
  --velin-body-bg:      oklch(0.10 0.04 270);
  --velin-body-color:   oklch(0.88 0.02 270);
  --velin-primary:      oklch(0.65 0.22 280);
  --velin-surface:      oklch(0.16 0.04 270);
  --velin-border-color: oklch(0.28 0.05 270);
}

Then activate it on the <html> element:

<html data-velin-theme="midnight">

Theme wählen