> ## Documentation Index > Fetch the complete documentation index at: https://docs.humic.dev/llms.txt > Use this file to discover all available pages before exploring further. # CSS > Export design tokens as CSS custom properties with light and dark mode. The CSS export generates custom properties (CSS variables) with automatic dark mode support. ## Output format ```css theme={null} :root { --color-brand-primary: #36AA08; --color-brand-secondary: #1E5B0F; --color-neutral-50: #FAFAFA; --spacing-page-gutter: 16px; --spacing-card-padding: 24px; --radius-card: 8px; --font-size-body: 16px; --font-weight-bold: 700; --font-family-sans: "Inter"; --shadow-card: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); --opacity-disabled: 0.4; --duration-fast: 100ms; --easing-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --z-index-modal: 50; } [data-theme="dark"] { --color-brand-primary: #5DC731; --color-brand-secondary: #BAF59B; --color-neutral-50: #0A0A0A; } ``` Only tokens with different dark values get a `[data-theme="dark"]` override. Non-color tokens are the same in both modes. ## Configuration ### Prefix The default prefix is `--`. You can customize it per design system: | Prefix | Output | | -------------- | ----------------------------- | | `--` (default) | `--color-brand-primary` | | `--ds` | `--ds-color-brand-primary` | | `--humic` | `--humic-color-brand-primary` | ### Naming convention | Convention | Output | | ---------------------- | ----------------------- | | `kebab-case` (default) | `--color-brand-primary` | | `camelCase` | `--colorBrandPrimary` | | `snake_case` | `--color_brand_primary` | Configure these in your design system settings or pass them as query parameters to the [export API](/api-reference/export). ## Usage in code ```css theme={null} .card { background: var(--color-neutral-50); padding: var(--spacing-card-padding); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } ``` ## Dark mode The CSS export uses `[data-theme="dark"]` for dark mode. Add this attribute to your root element to switch themes: ```html theme={null} ``` Or toggle it with JavaScript: ```javascript theme={null} document.documentElement.setAttribute("data-theme", "dark") ```