createTheme (Vanilla Extract)

CSS-in-JS 🔴 Senior

Définition

API de Vanilla Extract pour définir des themes type-safe via des CSS custom properties. Génère un contrat de theme et des classes de theme interchangeables.

Analogie

Un contrat de location : le theme définit les règles (variables), chaque variante les remplit différemment.

Exemple de code

import { createTheme } from '@vanilla-extract/css'

const [themeClass, vars] = createTheme({
  color: { primary: 'blue', bg: 'white' },
  space: { sm: '0.5rem', md: '1rem' },
})
// vars.color.primary => var(--xxx)

Cas d'usage

Créer un système de theming type-safe et zéro-runtime avec des variantes (light/dark).

#styling#css-in-js

← → au clavier pour passer d'une fiche à l'autre