Theming

Design system 1 uses CSS custom properties for theming, allowing you to customize colors and styles without modifying component code.

Quick Customization

Section titled “Quick Customization”

Change Accent Color

Section titled “Change Accent Color”
<style>
  :root {
    --accent-color: #6366f1;
  }
</style>

Dark Mode Support

Section titled “Dark Mode Support”

Design system 1 automatically adapts to system dark mode preferences:

@media (prefers-color-scheme: dark) {
  :root {
    --accent-color: #818cf8;
  }
}

Component Theming

Section titled “Component Theming”

Per-Component Colors

Section titled “Per-Component Colors”
<div style="--accent-color: #ef4444;">
  <ds-button variant="primary">Red Button</ds-button>
</div>


<div style="--accent-color: #10b981;">
  <ds-button variant="primary">Green Button</ds-button>
</div>

CSS Variables

Section titled “CSS Variables”

Common theme variables:

:root {
  --accent-color: #0066cc;
  --background-color: #ffffff;
  --text-color: #000000;
  --border-color: #e0e0e0;
}

Learn More

Section titled “Learn More”

For detailed theming documentation, see the Advanced Theming Guide.