/* * Omnyscio — thèmes visuels PAR BASE (SPECS §9). * * Deux axes orthogonaux sur : * - data-theme = mode clair / sombre (styles/main.css, src/ui/theme.js) ; * - data-palette = palette du thème ouvert (src/ui/palette.js), posée sur * les écrans d'une base (réglages, session, tableau de bord) et retirée * ailleurs (accueil, guide, mentions). * * Chaque palette redéfinit les tokens de couleur DANS LES DEUX MODES — les * sélecteurs portent toujours [data-theme] ET [data-palette] (même * spécificité partout, pas de fuite d'un mode sur l'autre). * * Deux familles : * - PALETTES SIMPLES (binômes/trinômes de couleurs) : proposées à toutes * les bases dans les réglages (champ « Thème visuel ») ; * - THÈMES AVANCÉS des bases intégrées (catalog.json, clé `theme`) : * une palette + un motif décoratif en filigrane (SVG inline), jamais * derrière le texte des questions. */ /* ============================== Océan (bleu) ============================== */ :root[data-theme="dark"][data-palette="ocean"] { --bg: #0a1a2f; --surface: #12283f; --surface-2: #1d3a57; --border: #1d3a57; --muted: #93b4cd; --accent: #38bdf8; --on-accent: #062a42; --accent-soft: rgba(56, 189, 248, 0.14); } :root[data-theme="light"][data-palette="ocean"] { --bg: #e7f1fa; --surface: #ffffff; --surface-2: #d8e8f5; --border: #c3d9ec; --muted: #4a6b85; --accent: #0369a1; --on-accent: #ffffff; --accent-soft: rgba(3, 105, 161, 0.10); } /* ============================== Forêt (vert) ============================== */ :root[data-theme="dark"][data-palette="forest"] { --bg: #0c1f14; --surface: #163022; --surface-2: #224532; --border: #224532; --muted: #94b8a0; --accent: #4ade80; --on-accent: #052e16; --accent-soft: rgba(74, 222, 128, 0.14); } :root[data-theme="light"][data-palette="forest"] { --bg: #ecf5ee; --surface: #ffffff; --surface-2: #d9ebdc; --border: #c4ddc8; --muted: #50705a; --accent: #15803d; --on-accent: #ffffff; --accent-soft: rgba(21, 128, 61, 0.10); } /* ============================ Lagune (turquoise) ========================== */ :root[data-theme="dark"][data-palette="teal"] { --bg: #0a1f1e; --surface: #123130; --surface-2: #1c4644; --border: #1c4644; --muted: #94b8b3; --accent: #2dd4bf; --on-accent: #042f2c; --accent-soft: rgba(45, 212, 191, 0.14); } :root[data-theme="light"][data-palette="teal"] { --bg: #e9f5f4; --surface: #ffffff; --surface-2: #d4ebe9; --border: #bcdeda; --muted: #4a7570; --accent: #0f766e; --on-accent: #ffffff; --accent-soft: rgba(15, 118, 110, 0.10); } /* ============================== Ambre (orangé) ============================ */ :root[data-theme="dark"][data-palette="amber"] { --bg: #211604; --surface: #33240c; --surface-2: #4a3614; --border: #4a3614; --muted: #c2ab84; --accent: #fbbf24; --on-accent: #3b2503; --accent-soft: rgba(251, 191, 36, 0.14); } :root[data-theme="light"][data-palette="amber"] { --bg: #faf3e3; --surface: #ffffff; --surface-2: #f1e4c4; --border: #e3d2a8; --muted: #7d6a4a; --accent: #b45309; --on-accent: #ffffff; --accent-soft: rgba(180, 83, 9, 0.10); } /* ============================ Améthyste (violet) ========================== */ :root[data-theme="dark"][data-palette="amethyst"] { --bg: #190f2e; --surface: #271945; --surface-2: #3a2762; --border: #3a2762; --muted: #ab9ac7; --accent: #c084fc; --on-accent: #2a1045; --accent-soft: rgba(192, 132, 252, 0.14); } :root[data-theme="light"][data-palette="amethyst"] { --bg: #f2edfa; --surface: #ffffff; --surface-2: #e4d9f5; --border: #d3c2ec; --muted: #6b5a85; --accent: #7e22ce; --on-accent: #ffffff; --accent-soft: rgba(126, 34, 206, 0.10); } /* ============================= Rose (framboise) =========================== */ :root[data-theme="dark"][data-palette="rose"] { --bg: #2a0d18; --surface: #401627; --surface-2: #592138; --border: #592138; --muted: #c79aa8; --accent: #fb7185; --on-accent: #45071a; --accent-soft: rgba(251, 113, 133, 0.14); } :root[data-theme="light"][data-palette="rose"] { --bg: #faedf1; --surface: #ffffff; --surface-2: #f5d9e2; --border: #ecc2d0; --muted: #855a68; --accent: #be123c; --on-accent: #ffffff; --accent-soft: rgba(190, 18, 60, 0.10); } /* =============================== Sable (brun) ============================= */ :root[data-theme="dark"][data-palette="sand"] { --bg: #211d16; --surface: #322c22; --surface-2: #494032; --border: #494032; --muted: #b5a890; --accent: #e0c391; --on-accent: #322208; --accent-soft: rgba(224, 195, 145, 0.14); } :root[data-theme="light"][data-palette="sand"] { --bg: #f5f0e8; --surface: #ffffff; --surface-2: #eae0cf; --border: #dccfb6; --muted: #756a55; --accent: #a16207; --on-accent: #ffffff; --accent-soft: rgba(161, 98, 7, 0.10); } /* ============================ Graphite (neutre) =========================== */ :root[data-theme="dark"][data-palette="graphite"] { --bg: #16191e; --surface: #23282e; --surface-2: #353c44; --border: #353c44; --muted: #8b949e; --accent: #cbd5e1; --on-accent: #1e293b; --accent-soft: rgba(203, 213, 225, 0.14); } :root[data-theme="light"][data-palette="graphite"] { --bg: #f0f1f3; --surface: #ffffff; --surface-2: #e2e5e9; --border: #d2d6dc; --muted: #5d6873; --accent: #475569; --on-accent: #ffffff; --accent-soft: rgba(71, 85, 105, 0.10); } /* ========================================================================== THÈMES AVANCÉS des bases intégrées (catalog.json → `theme`) ========================================================================== */ /* --- « periodic » (Tableau périodique) : améthyste + hexagones (chimie) --- */ :root[data-theme="dark"][data-palette="periodic"] { --bg: #190f2e; --surface: #271945; --surface-2: #3a2762; --border: #3a2762; --muted: #ab9ac7; --accent: #c084fc; --on-accent: #2a1045; --accent-soft: rgba(192, 132, 252, 0.14); } :root[data-theme="light"][data-palette="periodic"] { --bg: #f2edfa; --surface: #ffffff; --surface-2: #e4d9f5; --border: #d3c2ec; --muted: #6b5a85; --accent: #7e22ce; --on-accent: #ffffff; --accent-soft: rgba(126, 34, 206, 0.10); } /* Filigrane hexagonal sur le fond de page (jamais sur les cartes de contenu). */ :root[data-theme="dark"][data-palette="periodic"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='92' viewBox='0 0 80 92'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.045' stroke-width='2'%3E%3Cpath d='M20 7 L33.9 15 L33.9 31 L20 39 L6.1 31 L6.1 15 Z'/%3E%3Cpath d='M60 53 L73.9 61 L73.9 77 L60 85 L46.1 77 L46.1 61 Z'/%3E%3C/g%3E%3C/svg%3E"); } :root[data-theme="light"][data-palette="periodic"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='92' viewBox='0 0 80 92'%3E%3Cg fill='none' stroke='%236b21a8' stroke-opacity='0.07' stroke-width='2'%3E%3Cpath d='M20 7 L33.9 15 L33.9 31 L20 39 L6.1 31 L6.1 15 Z'/%3E%3Cpath d='M60 53 L73.9 61 L73.9 77 L60 85 L46.1 77 L46.1 61 Z'/%3E%3C/g%3E%3C/svg%3E"); } /* --- « birds » (Oiseaux) : lagune + plumes stylisées ---------------------- */ :root[data-theme="dark"][data-palette="birds"] { --bg: #0a1f1e; --surface: #123130; --surface-2: #1c4644; --border: #1c4644; --muted: #94b8b3; --accent: #2dd4bf; --on-accent: #042f2c; --accent-soft: rgba(45, 212, 191, 0.14); } :root[data-theme="light"][data-palette="birds"] { --bg: #e9f5f4; --surface: #ffffff; --surface-2: #d4ebe9; --border: #bcdeda; --muted: #4a7570; --accent: #0f766e; --on-accent: #ffffff; --accent-soft: rgba(15, 118, 110, 0.10); } /* Filigrane de plumes (feuilles courbes + rachis) sur le fond de page. */ :root[data-theme="dark"][data-palette="birds"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M16 52 C14 34 24 18 40 10 C32 26 26 40 22 52 Z'/%3E%3Cpath d='M40 10 C30 26 24 40 20 54'/%3E%3Cpath d='M70 102 C68 86 76 72 90 64 C83 78 78 90 74 102 Z'/%3E%3Cpath d='M90 64 C81 78 76 90 72 104'/%3E%3C/g%3E%3C/svg%3E"); } :root[data-theme="light"][data-palette="birds"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 110 110'%3E%3Cg fill='none' stroke='%230f766e' stroke-opacity='0.08' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M16 52 C14 34 24 18 40 10 C32 26 26 40 22 52 Z'/%3E%3Cpath d='M40 10 C30 26 24 40 20 54'/%3E%3Cpath d='M70 102 C68 86 76 72 90 64 C83 78 78 90 74 102 Z'/%3E%3Cpath d='M90 64 C81 78 76 90 72 104'/%3E%3C/g%3E%3C/svg%3E"); }