From 383e6767a2881e6b5b1ba5e7c9dd5907e8e58d2c Mon Sep 17 00:00:00 2001 From: Nicolas Date: Thu, 17 Sep 2026 21:46:25 +0200 Subject: [PATCH] feat: theme sombre/clair selon la preference navigateur Un seul bloc @media (prefers-color-scheme: dark) dans base.scss redefinit les custom properties CSS existantes (--color-*) - tout le reste du CSS de l'app y puise deja, rien d'autre a toucher. Pas de bascule manuelle demandee. Verifie en navigateur reel dans les deux modes (emulation prefers-color-scheme), y compris les etats de couleur de la file d'attente (echec/termine/en cours) qui restent lisibles en sombre. Co-Authored-By: Claude Sonnet 5 --- client/src/styles/base.scss | 21 +++++++++++++++++++++ spec/architecture.md | 2 +- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/client/src/styles/base.scss b/client/src/styles/base.scss index b4ae1aa..9626016 100644 --- a/client/src/styles/base.scss +++ b/client/src/styles/base.scss @@ -18,6 +18,27 @@ --radius: 8px; } +// Thème sombre selon la préférence système (`prefers-color-scheme`), pas +// de bascule manuelle demandée : mêmes custom properties, valeurs +// réadaptées pour le contraste (tout le reste du CSS n'y touche jamais +// directement, voir plus bas - seule cette feuille définit des couleurs). +@media (prefers-color-scheme: dark) { + :root { + --color-bg: #16181d; + --color-surface: #1f2229; + --color-border: #33363f; + --color-text: #e7e8ea; + --color-text-muted: #9498a3; + --color-primary: #5b84ff; + --color-primary-hover: #7899ff; + --color-danger-bg: #3a2222; + --color-danger-text: #e59a97; + --color-danger-border: #6b3937; + --color-success-border: #4f9c72; + --color-neutral-border: #494d59; + } +} + * { box-sizing: border-box; } diff --git a/spec/architecture.md b/spec/architecture.md index ae4ef6e..c4fa222 100644 --- a/spec/architecture.md +++ b/spec/architecture.md @@ -40,7 +40,7 @@ Pas de `docker-compose.yml` pour l'instant (une seule image, pas encore de dépe - Piège CSS relevé en testant dans un vrai navigateur (pas seulement les tests) : un attribut `hidden` combiné à une règle `display: flex` sur le même sélecteur se fait écraser par cette règle (même spécificité, la feuille de l'auteur gagne sur celle du user-agent) - toujours ajouter `&[hidden] { display: none; }` quand un conteneur togglé porte aussi un `display` explicite. - Layout en hauteur pleine page (`html`/`body`/`.shell` à `height:100%`/`100vh`, `overflow:hidden` sur `body`) : la page elle-même ne défile jamais, seules `download-form__results` et `queue-panel__list` le font (chacune `flex:1 1 0; min-height:0; overflow-y:auto` dans un parent qui propage `height:100%`/`min-height:0` depuis `.shell__panel`). `min-height: 0` est nécessaire à *chaque* niveau flex descendant - un enfant flex ne rétrécit jamais sous la taille de son contenu par défaut, ce qui ferait déborder la page entière au lieu de faire défiler juste la liste. Chaque vue neutralise le grow/shrink de ses enfants directs non-scrollables via `> * { flex: 0 0 auto; }`, puis la règle plus spécifique de l'élément scrollable (même spécificité, déclarée après donc prioritaire) le fait remplir l'espace restant. - Tests : Vitest (`client/test/`), uniquement sur les fonctions pures (`format.ts`) pour l'instant - pas de configuration jsdom, le câblage DOM (formulaires, rendu de liste) est vérifié manuellement dans le navigateur plutôt que testé automatiquement. -- `src/styles/base.scss` : palette et styles de base partagés (custom properties CSS sur `:root`, pas de `$variables` Sass - une variable Sass ne traverserait pas les fichiers, chaque vue étant compilée/importée séparément ; une custom property CSS si, puisqu'elle se résout à l'exécution dans le navigateur une fois tout le CSS regroupé par esbuild). Importé une fois depuis `app.ts`. +- `src/styles/base.scss` : palette et styles de base partagés (custom properties CSS sur `:root`, pas de `$variables` Sass - une variable Sass ne traverserait pas les fichiers, chaque vue étant compilée/importée séparément ; une custom property CSS si, puisqu'elle se résout à l'exécution dans le navigateur une fois tout le CSS regroupé par esbuild). Importé une fois depuis `app.ts`. Thème sombre/clair automatique selon `prefers-color-scheme` (pas de bascule manuelle) : un unique bloc `@media (prefers-color-scheme: dark)` redéfinit les mêmes custom properties dans `:root` - fonctionne partout car aucune autre feuille ne code de couleur en dur (vérifié : toutes passent par `var(--color-*)`). ## API -- 2.45.2