/** * 3D Communication – Mode sombre * ----------------------------------------------------------------------------- * Le mode sombre reproduit exactement les variantes « dark: » du projet React. * Approche : on ne redéclare pas chaque composant ; on bascule uniquement les * TOKENS SÉMANTIQUES définis dans design-system.css. Les composants, qui ne * consomment que ces tokens, s'adaptent automatiquement et à l'identique. * * La classe « dark » est portée par l'élément (documentElement), comme * dans le projet d'origine (next-themes / Tailwind). C'est ce qui permet un * basculement sans flash au chargement (voir theme-init.js). * ----------------------------------------------------------------------------- */ .dark { /* Fond & texte */ --tc-body-bg: var(--tc-gray-900); --tc-body-text: var(--tc-white); --tc-heading: var(--tc-white); --tc-muted: var(--tc-gray-300); --tc-muted-strong: var(--tc-gray-300); /* Surfaces de sections */ --tc-surface: var(--tc-gray-900); /* « bg-white » → gray-900 */ --tc-surface-2: var(--tc-gray-800); /* « bg-gray » → gray-800 */ /* Cartes */ --tc-card-bg: var(--tc-gray-800); --tc-card-bg-alt: var(--tc-gray-900); --tc-card-border: var(--tc-gray-700); /* En-tête & pied de page */ --tc-header-bg: var(--tc-gray-900); --tc-header-border: var(--tc-gray-800); --tc-footer-bg: var(--tc-gray-950); /* #030712 */ /* Accents & navigation */ --tc-accent-text: var(--tc-accent-light); /* liens/badges accent → accent-light */ --tc-nav-link: var(--tc-gray-300); --tc-nav-active: var(--tc-accent-light); /* Bouton de thème */ --tc-toggle-bg: var(--tc-gray-800); --tc-toggle-bg-hover: var(--tc-gray-700); } /* * Exceptions ne se réduisant pas à un simple échange de token : * quelques valeurs changent d'opacité/de teinte en mode sombre. */ /* Badge de section : le fond doré passe de 10 % à 20 % d'opacité. */ .dark .tc-badge--section { background-color: rgba(187, 159, 72, 0.2); } /* Bouton de thème : l'icône devient dorée claire en mode sombre. */ .dark .tc-theme-toggle { color: var(--tc-accent-light); }