/* =========================================================== Aurora — thèmes de couleurs ----------------------------------------------------------- Posé par themes.js sur (identifiants partagés avec le client Flutter) : aurora · ocean · sunset · forest · rose · midnight · light Deux systèmes cohabitent SANS se marcher dessus : • data-theme = clair / sombre (bouton lune-soleil, style.css) • data-atheme = palette (ce fichier) Chaque palette n'écrase que --accent, --accent-2, --bg-0, --bg-1 (+ les blobs du fond) : le reste vient de style.css. Une variante "clair" est fournie par palette pour rester lisible quand data-theme="light" est actif. Le thème « light » est le seul à imposer toute la palette claire, quel que soit data-theme. À charger APRÈS style.css. =========================================================== */ /* Transition douce d'une palette à l'autre. */ html, body { transition: background-color .4s ease, color .4s ease; } .bg { transition: background .4s ease; } /* ---------- Palettes sombres ---------- */ /* Aurora — bleu cyan / violet (défaut, identique à style.css) */ html[data-atheme="aurora"] { --accent: #5eadff; --accent-2: #9a7bff; --bg-0: #05050c; --bg-1: #0e0e1f; --blob-1: #4f7cff; --blob-2: #9a5cff; --blob-3: #ff5fae; --blob-4: #2fd2a6; } /* Ocean — bleu profond */ html[data-atheme="ocean"] { --accent: #35c2f5; --accent-2: #2f6ef0; --bg-0: #030a14; --bg-1: #0a2038; --blob-1: #2f6ef0; --blob-2: #35c2f5; --blob-3: #1fd0d8; --blob-4: #4f7cff; } /* Sunset — orange / rose */ html[data-atheme="sunset"] { --accent: #ff9d3c; --accent-2: #ff5f8f; --bg-0: #120608; --bg-1: #2a0f1c; --blob-1: #ff8a3c; --blob-2: #ff4f7d; --blob-3: #ffc861; --blob-4: #ff5fae; } /* Forest — vert */ html[data-atheme="forest"] { --accent: #2fd8a0; --accent-2: #7fd94f; --bg-0: #030c09; --bg-1: #0b2018; --blob-1: #2fd8a0; --blob-2: #7fd94f; --blob-3: #2fb8a8; --blob-4: #b8d94f; } /* Rose — rose / magenta */ html[data-atheme="rose"] { --accent: #ff6fb5; --accent-2: #c451ff; --bg-0: #0f0413; --bg-1: #240b2c; --blob-1: #ff5fae; --blob-2: #c451ff; --blob-3: #ff8ad0; --blob-4: #7d5cff; } /* Midnight — gris bleuté très sombre, accents discrets */ html[data-atheme="midnight"] { --accent: #8aa2d0; --accent-2: #5b6f9e; --bg-0: #04060a; --bg-1: #0c1119; --blob-1: #46587f; --blob-2: #5b6f9e; --blob-3: #35415e; --blob-4: #6f83ad; --blob-o: .38; } /* ---------- Variantes claires (bouton lune-soleil actif) ---------- data-theme="light" fournit déjà --text / --muted / --glass ; on ne reteinte que les fonds pour qu'ils restent dans la palette. */ html[data-atheme="aurora"][data-theme="light"] { --bg-0: #eef1fb; --bg-1: #dfe6fb; } html[data-atheme="ocean"][data-theme="light"] { --bg-0: #eaf4fd; --bg-1: #d3e6fa; } html[data-atheme="sunset"][data-theme="light"] { --bg-0: #fff2ea; --bg-1: #ffdee6; } html[data-atheme="forest"][data-theme="light"] { --bg-0: #ebf8f1; --bg-1: #d6efdf; } html[data-atheme="rose"][data-theme="light"] { --bg-0: #fdeef7; --bg-1: #f7dcee; } html[data-atheme="midnight"][data-theme="light"] { --bg-0: #eef0f5; --bg-1: #dde2ec; } /* ---------- Thème clair ---------- Autonome : lisible même si data-theme est resté sur "dark". */ html[data-atheme="light"] { --accent: #4f7cff; --accent-2: #8b5cff; --bg-0: #eef1fb; --bg-1: #dfe6fb; --text: #10132a; --muted: #5a618a; --glass: rgba(255, 255, 255, 0.55); --glass-2: rgba(255, 255, 255, 0.68); --glass-3: rgba(255, 255, 255, 0.85); --border: rgba(255, 255, 255, 0.75); --bubble: rgba(255, 255, 255, 0.75); --shadow: 0 24px 60px rgba(60, 80, 160, 0.18); --blob-o: .4; --blob-1: #7fa8ff; --blob-2: #b28aff; --blob-3: #ff9ccb; --blob-4: #6fe0c0; } /* style.css n'éclaircit les champs que via [data-theme="light"] : on refait le même geste pour le thème clair pris seul (texte sombre). */ html[data-atheme="light"] .glass-input { background: rgba(255, 255, 255, .6); } /* ---------- Fond aurore : blobs teintés par la palette ---------- Repli sur les couleurs d'origine si la variable n'est pas définie. */ html[data-atheme] .b1 { background: var(--blob-1, #4f7cff); } html[data-atheme] .b2 { background: var(--blob-2, #9a5cff); } html[data-atheme] .b3 { background: var(--blob-3, #ff5fae); } html[data-atheme] .b4 { background: var(--blob-4, #2fd2a6); } /* ---------- Halos accent codés en dur dans style.css ---------- Ils étaient figés en bleu : on les recalcule depuis --accent pour suivre la palette (rendu identique sur le thème Aurora). */ @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 50% { box-shadow: 0 0 0 16px transparent; } } html[data-atheme] .btn-accent { box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 38%, transparent); } html[data-atheme] .glass-input:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } html[data-atheme] .reaction.own { background: color-mix(in srgb, var(--accent) 18%, transparent); } /* =========================================================== Sélecteur de thème (élément rendu par themePicker()) =========================================================== */ .theme-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; } .theme-opt { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--glass); color: var(--text); font: inherit; cursor: pointer; transition: transform .12s, background .2s, border-color .2s, box-shadow .2s; } .theme-opt:hover { transform: translateY(-2px); background: var(--glass-2); } .theme-opt:focus-visible { outline: none; border-color: var(--accent); } .theme-opt.active { border-color: var(--accent); background: var(--glass-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 38%, transparent); } /* Pastille : le fond du thème, avec une bille dégradée accent au centre. */ .theme-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); background: linear-gradient(160deg, var(--tp-bg0, #05050c), var(--tp-bg1, #0e0e1f)); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35); } .theme-dot::after { content: ""; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--tp-a, #5eadff), var(--tp-b, #9a7bff)); box-shadow: 0 3px 10px color-mix(in srgb, var(--tp-a, #5eadff) 45%, transparent); } .theme-name { font-size: .74rem; color: var(--muted); text-align: center; line-height: 1.15; } .theme-opt.active .theme-name { color: var(--text); font-weight: 650; } @media (prefers-reduced-motion: reduce) { html, body, .bg { transition: none; } .theme-opt { transition: none; } .theme-opt:hover { transform: none; } }