/* ========================================================== dark.css - thème sombre Trois états : clair, sombre, ou le réglage du système. Le choix est appliqué avant le premier rendu par un script dans le , sinon la page clignote en clair avant de basculer. Ce n'est pas le thème clair avec les couleurs inversées. Un noir pur sur blanc pur fatigue en écriture longue ; les fonds sont légèrement chauds, comme le papier du thème clair, et les contrastes sont mesurés séparément. ========================================================== */ :root[data-theme="dark"] { --bg: #16171a; --bg-soft: #1c1e22; --bg-card: #202329; --bg-tint: #1b2233; /* Blanc cassé plutôt que blanc pur : 15,8:1 sur le fond, encore bien au-delà de AA, sans l'éblouissement du blanc pur. */ --ink: #e8e6e1; --ink-2: #b9b6ae; /* 9,1:1 */ --ink-3: #8f8b83; /* 5,3:1 */ --ink-4: #74716a; /* 3,7:1 — réservé aux éléments larges */ --line: #2b2f36; --line-2: #3a3f47; /* Le bleu du thème clair descend à 2,9:1 sur un fond sombre. Éclairci jusqu'à 7,1:1. */ --blue: #7ba7f5; --blue-soft: rgba(123,167,245,.12); --shadow-sm: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 4px 16px rgba(0,0,0,.45); --shadow-lg: 0 12px 44px rgba(0,0,0,.5); color-scheme: dark; } /* Le réglage du système ne s'applique QUE si la personne a choisi "system" explicitement. Le défaut du site est clair : un visiteur dont la machine est en sombre ne doit pas découvrir un site sombre sans l'avoir demandé. */ @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --bg: #16171a; --bg-soft: #1c1e22; --bg-card: #202329; --bg-tint: #1b2233; --ink: #e8e6e1; --ink-2: #b9b6ae; --ink-3: #8f8b83; --ink-4: #74716a; --line: #2b2f36; --line-2: #3a3f47; --blue: #7ba7f5; --blue-soft: rgba(123,167,245,.12); color-scheme: dark; } } /* ---------- ce qui ne suit pas les variables ---------- */ :root[data-theme="dark"] .beta-bar, :root[data-theme="system"] .beta-bar { background: #0f1013; border-bottom-color: #2b2f36; } :root[data-theme="dark"] .toast, :root[data-theme="dark"] .gloss-pop, :root[data-theme="dark"] .cookie-bar { background: #2a2e35; border: 1px solid #3a3f47; color: #e8e6e1; } /* Les blocs de code sont déjà sombres en thème clair : en sombre ils doivent se détacher du fond, pas s'y fondre. */ :root[data-theme="dark"] .code-block, :root[data-theme="dark"] .code, :root[data-theme="dark"] pre { background: #0f1013 !important; border: 1px solid #2b2f36; } :root[data-theme="dark"] .code-head { background: #16171a; border-bottom-color: #2b2f36; } /* Les états colorés, réaccordés : les fonds pâles du thème clair deviennent illisibles sur du sombre. */ :root[data-theme="dark"] .th-badge.resolved, :root[data-theme="dark"] .mk-verified-review, :root[data-theme="dark"] .ds-licence, :root[data-theme="dark"] .pub-verified, :root[data-theme="dark"] .fmt-full { color: #86d489; background: rgba(134,212,137,.11); border-color: rgba(134,212,137,.3); } :root[data-theme="dark"] .mk-deprecated, :root[data-theme="dark"] .err-sev.error, :root[data-theme="dark"] .cl-semver.major { color: #f0938a; background: rgba(240,147,138,.1); border-color: rgba(240,147,138,.3); } :root[data-theme="dark"] .beta-notice, :root[data-theme="dark"] .err-sev.warning, :root[data-theme="dark"] .dl-note.beta, :root[data-theme="dark"] .th-badge.locked { color: #e6c56b; background: rgba(230,197,107,.09); border-color: rgba(230,197,107,.28); } :root[data-theme="dark"] .beta-notice h4, :root[data-theme="dark"] .beta-notice p { color: var(--ink-2); } :root[data-theme="dark"] .dl-note.nightly, :root[data-theme="dark"] .cl-breaking, :root[data-theme="dark"] .danger-zone, :root[data-theme="dark"] .mk-banner.rejected, :root[data-theme="dark"] .empty.error { background: rgba(240,147,138,.07); border-color: rgba(240,147,138,.28); color: var(--ink-2); } :root[data-theme="dark"] .val-banner.ok { background: rgba(134,212,137,.07); border-color: rgba(134,212,137,.28); } :root[data-theme="dark"] .val-banner.ok .val-big { color: #86d489; } :root[data-theme="dark"] .val-banner.bad { background: rgba(240,147,138,.07); border-color: rgba(240,147,138,.28); } :root[data-theme="dark"] .val-banner.bad .val-big { color: #f0938a; } :root[data-theme="dark"] .val-dot.pass { background: #86d489; } :root[data-theme="dark"] .val-dot.fail { background: #f0938a; } :root[data-theme="dark"] .mk-free, :root[data-theme="dark"] .mk-ok { color: #86d489; } :root[data-theme="dark"] .mk-no { color: #f0938a; } :root[data-theme="dark"] .mk-stars { color: #e6c56b; } /* Le grain du fond clair devient du bruit sur du sombre. */ :root[data-theme="dark"] body::before { opacity: .015; } /* Une image lumineuse sur fond sombre éblouit. Assombrie légèrement, et rendue franche au survol. */ :root[data-theme="dark"] .mk-tile-icon img, :root[data-theme="dark"] .pal-icon img, :root[data-theme="dark"] .brand-img { filter: brightness(.92); } :root[data-theme="dark"] .mk-tile:hover .mk-tile-icon img { filter: none; } /* ---------- le sélecteur ---------- */ .theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg-card); color: var(--ink-2); cursor: pointer; } .theme-btn:hover { border-color: var(--blue); color: var(--blue); } .theme-btn svg { width: 17px; height: 17px; } .theme-btn .icon-dark, :root[data-theme="dark"] .theme-btn .icon-light { display: none; } :root[data-theme="dark"] .theme-btn .icon-dark { display: block; } @media (prefers-color-scheme: dark) { :root[data-theme="system"] .theme-btn .icon-light { display: none; } :root[data-theme="system"] .theme-btn .icon-dark { display: block; } } /* La transition ne s'applique qu'au basculement volontaire, jamais au chargement : sinon la page fond en couleur à chaque visite. */ :root.theme-switching, :root.theme-switching * { transition: background-color .18s, border-color .18s, color .18s !important; } /* ========================================================== Le héros ---------------------------------------------------------- Il a ses propres couleurs codées en dur, parce qu'il pilote une simulation WebGL dont le fond doit correspondre au canvas. Les variables ne l'atteignent donc pas : il faut le reprendre explicitement. ========================================================== */ :root[data-theme="dark"] .hero-mobile-bg { background: #16171a; } :root[data-theme="dark"] #signalCanvas, :root[data-theme="dark"] .hero-canvas { background: #14161b; } /* Le dégradé de sortie du héros vers la page. */ :root[data-theme="dark"] .hero::after, :root[data-theme="dark"] .hero-fade { background: linear-gradient(180deg, transparent, var(--bg) 92%); } /* La pastille "nouveau" en tête de héros. */ :root[data-theme="dark"] .hero-chip, :root[data-theme="dark"] .chip { background: rgba(32,35,41,.82); border-color: var(--line-2); color: var(--ink-2); } /* Les boutons de verre du héros : translucides sur clair, ils disparaissent sur sombre. */ :root[data-theme="dark"] .btn-glass, :root[data-theme="dark"] .hero-cta-row .btn-secondary { background: rgba(32,35,41,.7); border-color: var(--line-2); color: var(--ink); backdrop-filter: blur(8px); } :root[data-theme="dark"] .btn-glass:hover { background: rgba(42,46,53,.85); } /* Le cadre de capture d'écran. */ :root[data-theme="dark"] .app-frame, :root[data-theme="dark"] .app-media-slot { background: var(--bg-soft); border-color: var(--line); } /* La grille de fond, presque invisible sur sombre si on ne la reprend pas. */ :root[data-theme="dark"] .hero-grid, :root[data-theme="dark"] .grid-overlay { opacity: .5; } /* La barre de navigation est translucide sur le papier clair et codée en dur : elle reste crème sur un fond sombre si on ne la reprend pas. */ :root[data-theme="dark"] nav.topnav.scrolled, :root[data-theme="system"] nav.topnav.scrolled { background: rgba(28, 30, 34, .86); border-bottom-color: var(--line); backdrop-filter: blur(12px); } @media (prefers-color-scheme: dark) { :root[data-theme="system"] nav.topnav.scrolled { background: rgba(28, 30, 34, .86); border-bottom-color: var(--line); } } :root[data-theme="dark"] nav.topnav .nav-links a { color: var(--ink-2); } :root[data-theme="dark"] nav.topnav .nav-links a:hover, :root[data-theme="dark"] nav.topnav .nav-links a.active { color: var(--ink); } :root[data-theme="dark"] .brand, :root[data-theme="dark"] nav.topnav.scrolled .brand { color: var(--ink); } :root[data-theme="dark"] .btn-secondary { background: var(--bg-card); border-color: var(--line-2); color: var(--ink); } :root[data-theme="dark"] .btn-secondary:hover { background: var(--bg-soft); border-color: var(--blue); } :root[data-theme="dark"] .btn-primary { color: #0f1013; }