createTheme (Vanilla Extract)

CSS-in-JS 🔴 Senior

Definition

API de Vanilla Extract pour definir des themes type-safe via des CSS custom properties. Genere un contrat de theme et des classes de theme interchangeables.

Analogie

Un contrat de location : le theme definit les regles (variables), chaque variante les remplit differemment.

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

Creer un systeme de theming type-safe et zero-runtime avec des variantes (light/dark).

#styling#css-in-js