/** * THÈME DARK - L'Élégance Nocturne * * Ce thème inverse la hiérarchie lumineuse du thème Default pour créer * une expérience optimisée pour les environnements à faible luminosité. * Les couleurs sont calibrées pour réduire la fatigue oculaire tout en * maintenant une excellente lisibilité. * * Philosophie typographique: * Identique au Default, nous utilisons System UI pour cohérence entre thèmes. * * Philosophie colorimétrique: * Les thèmes sombres présentent des défis uniques. Le contraste doit être * suffisant pour la lisibilité sans être brutal. Les couleurs vives doivent * être légèrement désaturées pour éviter de "vibrer" sur le fond sombre. * Les ombres traditionnelles ne fonctionnent pas, nous utilisons donc des * lueurs subtiles pour créer de la profondeur. */ :root { /* ======================================== * POLICES - SYSTEM UI NATIVE * ======================================== */ --font-body: system-ui, sans-serif; --font-heading: system-ui, sans-serif; --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; /* ======================================== * COULEURS PRIMAIRES - BLEU LUMINEUX * ======================================== */ /** * Couleur primaire: Bleu lumineux pour thème sombre * * OKLCH: 65% luminosité, 0.17 chroma, 250° teinte * * Différences clés avec le thème clair: * - Luminosité plus élevée (65% vs 55%): Sur fond sombre, les couleurs * doivent être plus lumineuses pour maintenir le même impact visuel. * * - Chroma légèrement réduit (0.17 vs 0.19): Les couleurs très saturées * "vibrent" de façon inconfortable sur des fonds sombres en raison du * contraste élevé. Une désaturation subtile élimine cet effet tout en * maintenant la vivacité. * * - Même teinte (250°): Maintenir la même teinte entre thèmes crée une * continuité d'identité de marque. */ --color-primary: oklch(65% 0.17 250); --color-primary-light: oklch(75% 0.17 250); --color-primary-dark: oklch(55% 0.17 250); --color-primary-subtle: oklch(20% 0.06 250); /* ======================================== * COULEURS SECONDAIRES * ======================================== */ --color-secondary: oklch(45% 0.10 260); --color-secondary-light: oklch(55% 0.10 260); --color-secondary-dark: oklch(35% 0.10 260); /* ======================================== * COULEURS DE FOND - NOIRS DOUX * ======================================== */ /** * Fond principal: Noir doux * * OKLCH: 15% luminosité, 0.01 chroma, 250° teinte * * Pourquoi pas noir pur: * Un noir absolu (0% luminosité) crée plusieurs problèmes dans les * interfaces sombres. Il offre un contraste trop brutal avec les * éléments colorés, il peut causer des effets de "smearing" sur les * écrans OLED, et il ne permet aucune profondeur visuelle car rien * ne peut être plus sombre. * * Un noir à 15% de luminosité résout tous ces problèmes. Il est * suffisamment sombre pour être perçu comme noir, mais laisse de la * place pour des éléments encore plus sombres si nécessaire. Le chroma * minimal (0.01) avec la teinte bleue crée une richesse subtile. */ --color-background: oklch(15% 0.01 250); /** * Surface: Plus claire que le fond * * Dans les thèmes sombres, les surfaces "flottent" au-dessus du fond * en étant plus claires plutôt que plus sombres. Cette inversion crée * une hiérarchie de profondeur intuitive. */ --color-surface: oklch(18% 0.012 250); /** * Surface élevée: Encore plus claire * * Les éléments les plus élevés sont les plus clairs, créant une * métaphore visuelle cohérente de "proximité de la source lumineuse". */ --color-surface-elevated: oklch(22% 0.015 250); /** * État hover: Entre surface et surface élevée */ --color-surface-hover: oklch(20% 0.013 250); /* ======================================== * COULEURS DE TEXTE * ======================================== */ /** * Texte principal: Blanc doux * * OKLCH: 92% luminosité, 0.005 chroma, 250° teinte * * Pourquoi pas blanc pur: * Le blanc pur (100% luminosité) sur fond noir crée un éblouissement * qui fatigue les yeux rapidement. Cette "halation" est causée par la * diffusion de la lumière dans l'œil. Un blanc légèrement réduit (92%) * élimine ce problème tout en maintenant une excellente lisibilité. * * Le ratio de contraste avec le fond à 15% est d'environ douze sur un * par un, bien au-delà des exigences WCAG AAA. */ --color-text: oklch(92% 0.005 250); --color-text-muted: oklch(70% 0.008 250); --color-text-subtle: oklch(50% 0.010 250); --color-text-inverse: oklch(20% 0.01 250); /* ======================================== * COULEURS SÉMANTIQUES * ======================================== */ /** * Succès: Vert désaturé * * Toutes les couleurs sémantiques sont légèrement plus lumineuses et * moins saturées que dans le thème clair pour éviter la vibration * visuelle sur le fond sombre. */ --color-success: oklch(68% 0.16 145); --color-success-light: oklch(78% 0.16 145); --color-warning: oklch(72% 0.15 65); --color-warning-light: oklch(82% 0.15 65); --color-error: oklch(63% 0.17 25); --color-error-light: oklch(73% 0.17 25); --color-info: oklch(68% 0.14 210); --color-info-light: oklch(78% 0.14 210); /* ======================================== * BORDURES * ======================================== */ /** * Bordures: Plus claires que le fond * * Dans un thème sombre, les bordures doivent être plus claires que le * fond pour être visibles. Nous les rendons juste assez claires pour * être perceptibles sans dominer visuellement. */ --color-border: oklch(28% 0.012 250); --color-border-hover: oklch(38% 0.015 250); --color-border-focus: var(--color-primary); /* ======================================== * OMBRES - LUEURS SUBTILES * ======================================== */ /** * Ombres remplacées par lueurs * * Les ombres traditionnelles (assombrissement) ne fonctionnent pas sur * fond sombre. À la place, nous utilisons des "lueurs" (éclaircissement) * avec la couleur primaire désaturée. Cela crée une profondeur tout en * renforçant l'identité visuelle du thème. */ --shadow-xs: 0 1px 2px 0 oklch(65% 0.05 250 / 0.15); --shadow-sm: 0 1px 3px 0 oklch(65% 0.05 250 / 0.20); --shadow-md: 0 4px 6px -1px oklch(65% 0.05 250 / 0.20); --shadow-lg: 0 10px 15px -3px oklch(65% 0.05 250 / 0.20); --shadow-xl: 0 20px 25px -5px oklch(65% 0.05 250 / 0.25); /* Les autres variables (typographie, espacements, etc.) restent identiques */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --spacing-3xl: 4rem; --spacing-4xl: 6rem; --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; --border-width: 1px; --border-width-thick: 2px; --transition-fast: 150ms ease-in-out; --transition-base: 250ms ease-in-out; --transition-slow: 350ms ease-in-out; --max-width-prose: 65ch; --max-width-container: 1280px; --max-width-narrow: 768px; --max-width-wide: 1536px; }