Theming

Teryx uses CSS custom properties for its entire design system. Switch themes at runtime or create your own.

Built-in Themes

• light (default) -- White backgrounds, dark text
• dark -- Dark backgrounds, light text
• highContrast -- Maximum contrast for accessibility

Color Palette

setTheme API

import { setTheme, getTheme, getThemeNames } from 'teryx';
setTheme('dark');
console.log(getTheme()); // 'dark'
console.log(getThemeNames()); // ['light', 'dark', 'highContrast']

registerTheme API

import { registerTheme, setTheme } from 'teryx';
registerTheme({
  name: 'ocean',
  vars: {
    '--tx-primary': '#0ea5e9',
    '--tx-primary-hover': '#0284c7',
    '--tx-primary-light': '#e0f2fe',
    '--tx-bg': '#f0f9ff',
    '--tx-bg-secondary': '#e0f2fe',
    '--tx-text': '#0c4a6e',
    '--tx-border': '#7dd3fc',
  },
});
setTheme('ocean');

CSS Variables Reference

Colors

Surfaces

Text

Borders, Shadows, Typography

Layout

CSS-Only Theming

:root {
  --tx-primary: #8b5cf6;
  --tx-primary-hover: #7c3aed;
  --tx-radius: 0.75rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --tx-bg: #111827;
    --tx-text: #f9fafb;
    --tx-border: #374151;
  }
}

Dark Mode Toggle

<button id="theme-toggle">Toggle Dark Mode</button>
<script>
  document.getElementById('theme-toggle').addEventListener('click', () => {
    const cur = Teryx.getTheme();
    Teryx.setTheme(cur === 'light' ? 'dark' : 'light');
  });
</script>