Theming
DDS uses CSS custom properties as the single source of truth for all visual decisions. Override any token in your project CSS to instantly retheme every component.
Change the primary color
Override --ds-primary and its variants in a CSS file to apply your brand color across all components at once.
app/assets/theme.css
/* app/assets/theme.css */
:root {
/* Example: blue brand color */
--ds-primary: #0070f3;
--ds-primary-hover: #0060df;
--ds-primary-active: #0050bb;
--ds-primary-subtle: #e8f1ff;
--ds-primary-muted: #cce0ff;
--ds-primary-fg: #ffffff;
--ds-ring: #0070f3;
}
/* Dark mode variant */
.dark {
--ds-primary: #60a5fa;
--ds-primary-hover: #93c5fd;
--ds-primary-subtle: #0c1d3e;
--ds-primary-muted: #1a3366;
--ds-ring: #60a5fa;
}Then import it in your Nuxt config:
nuxt.config.ts
// nuxt.config.ts
export default defineNuxtConfig({
css: ['~/assets/theme.css'],
})Dark mode
Dark mode is activated by toggling the .dark class on the <html> element. All tokens have dark-mode values built in — no extra CSS required.
vue
<script setup lang="ts">
const isDark = ref(false)
function toggleDark() {
isDark.value = !isDark.value
document.documentElement.classList.toggle('dark', isDark.value)
}
</script>
<template>
<DsButton variant="ghost" @click="toggleDark">
{{ isDark ? 'Light mode' : 'Dark mode' }}
</DsButton>
</template>Override border radius
The radius scale can be made sharper or rounder by overriding the radius tokens.
css
/* Sharper corners */
:root {
--ds-radius-xs: 2px;
--ds-radius-sm: 3px;
--ds-radius-md: 4px;
--ds-radius-lg: 6px;
--ds-radius-xl: 8px;
--ds-radius-2xl: 10px;
}
/* Rounder corners */
:root {
--ds-radius-xs: 6px;
--ds-radius-sm: 10px;
--ds-radius-md: 14px;
--ds-radius-lg: 20px;
--ds-radius-xl: 28px;
--ds-radius-2xl: 36px;
}Token reference
| Token | Default (light) | Description |
|---|---|---|
--ds-primary | #7f00ff | Primary brand color |
--ds-primary-hover | #7000e0 | Primary hover state |
--ds-primary-active | #6000c2 | Primary active/pressed state |
--ds-primary-fg | #ffffff | Text on primary background |
--ds-primary-subtle | #f5f0ff | Subtle primary background |
--ds-primary-muted | #ede0ff | Muted primary background |
--ds-bg | #ffffff | Page background |
--ds-bg-subtle | #fafafa | Subtle background (sidebar, etc.) |
--ds-bg-muted | #f4f4f5 | Muted background (inputs, etc.) |
--ds-bg-elevated | #ffffff | Elevated surface (cards, popovers) |
--ds-fg | #09090b | Primary text |
--ds-fg-muted | #71717a | Secondary/muted text |
--ds-fg-subtle | #a1a1aa | Subtle/placeholder text |
--ds-border | #e4e4e7 | Default border color |
--ds-border-muted | #f4f4f5 | Subtle border |
--ds-border-strong | #a1a1aa | Strong border |
--ds-ring | #7f00ff | Focus ring color |
--ds-danger | #ef4444 | Error/danger |
--ds-success | #22c55e | Success |
--ds-warning | #f59e0b | Warning |
--ds-info | #3b82f6 | Informational |
--ds-radius-sm | 6px | Small radius |
--ds-radius-md | 8px | Medium radius |
--ds-radius-lg | 12px | Large radius |
--ds-radius-xl | 16px | Extra large radius |
--ds-radius-full | 9999px | Full/pill radius |
Full reference: node_modules/design-system-antoinegourgue/dist/runtime/assets/base.css