Theming

Customize the appearance of Synthax UI components with CSS variables and dark mode support.

Theme Modes

Synthax UI supports light and dark themes out of the box. Themes are controlled via the data-theme attribute on the HTML element.

Light

data-theme="light"

Dark

data-theme="dark"

System

prefers-color-scheme

Automatic Theme Detection

When no data-theme is set, the library automatically respects the user's system preference via prefers-color-scheme.

<!-- System preference (automatic) -->
<html lang="en">

<!-- Force light theme -->
<html lang="en" data-theme="light">

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

JavaScript Theme Control

// Toggle theme
function toggleTheme() {
  const current = document.documentElement.dataset.theme;
  const next = current === 'dark' ? 'light' : 'dark';
  document.documentElement.dataset.theme = next;
  localStorage.setItem('theme', next);
}

// Initialize from localStorage or system preference
function initTheme() {
  const stored = localStorage.getItem('theme');
  const system = window.matchMedia('(prefers-color-scheme: dark)').matches 
    ? 'dark' 
    : 'light';
  document.documentElement.dataset.theme = stored || system;
}

Design Tokens

All components use CSS custom properties (variables) for theming. Override these to customize the look:

Colors

--ui-color-primary

--ui-color-success

--ui-color-error

--ui-color-warning

--ui-color-info

Spacing

--ui-space-1 = 4px

--ui-space-2 = 8px

--ui-space-3 = 12px

--ui-space-4 = 16px

--ui-space-6 = 24px

Border Radius

--ui-radius-sm = 4px

--ui-radius-md = 6px

--ui-radius-lg = 8px (buttons)

--ui-radius-xl = 12px (cards)

Typography

--ui-text-primary

--ui-text-secondary

--ui-text-tertiary

--ui-font-body

Custom Theme Example

:root {
  /* Custom brand colors */
  --ui-color-primary: 97 179 46;  /* RGB values */
  --ui-color-success: 34 197 94;
  --ui-color-error: 239 68 68;
  
  /* Custom backgrounds */
  --ui-bg-primary: #ffffff;
  --ui-bg-secondary: #f9fafb;
  --ui-bg-tertiary: #f3f4f6;
}

[data-theme="dark"] {
  --ui-bg-primary: #0a0a0a;
  --ui-bg-secondary: #121212;
  --ui-bg-tertiary: #1a1a1a;
}

Healthcare Considerations

• Ensure sufficient color contrast for WCAG 2.1 AA compliance (4.5:1 for text)
• Use semantic colors consistently (red for errors, green for success)
• Test themes with various forms of color blindness
• Clinical alerts should maintain high visibility in both themes