/* ========================================================================== Themes — Dark mode override (Light mode est le défaut dans base.css) ========================================================================== * * CONCEPTS CLÉS POUR L'APPRENTISSAGE : * * 1. Variables CSS (Custom Properties) : * Les variables CSS (--nom: valeur) sont déclarées dans :root (mode clair) * et surchargées dans [data-theme="dark"]. Tout le CSS du site utilise * var(--nom) au lieu de valeurs en dur, ce qui permet de changer le thème * en modifiant simplement l'attribut data-theme sur . * * Cascading : quand [data-theme="dark"] est appliqué sur , * toutes les variables redéfinies dans ce sélecteur "écrasent" les * valeurs de :root, et tous les éléments enfants héritent automatiquement * des nouvelles valeurs. C'est la puissance de la cascade CSS. * * 2. Sélecteur d'attribut [data-theme="dark"] : * Cible l'élément HTML qui possède l'attribut data-theme avec la valeur * "dark". En JavaScript, on change cet attribut avec : * document.documentElement.setAttribute('data-theme', 'dark') * * 3. rgba() vs hex : * - Hex (#111825) : couleur opaque, 6 chiffres hexadécimaux (RR GG BB) * - rgba(r, g, b, alpha) : couleur avec transparence (alpha de 0 à 1) * On utilise rgba pour les bordures et lueurs (glow) afin de les rendre * semi-transparentes et subtiles. * * 4. Palette choisie : * - Fond (#111825) : bleu très sombre, plus doux que du noir pur * - Texte (#bcc8d2) : gris clair bleuté, bon contraste sur fond sombre * - Accent (#22b15e) : vert vif, utilisé pour les titres et les accents * - Titres (#22b15e) : même couleur que l'accent pour une identité forte * - Boutons remplis : texte en #111825 (même couleur que le fond) pour * un contraste maximal sur le fond vert accent * * 5. Section uniforme + délimiteurs : * Toutes les sections ont le MÊME fond (#111825). Pour les distinguer * visuellement, on utilise un trait horizontal vert (#22b15e) entre les * sections (voir le sélecteur .section + .section dans ce fichier). * * FLUX : * 1. Au chargement, un script inline dans index.html lit le thème depuis * localStorage et applique data-theme AVANT le rendu (évite le flash) * 2. Theme.js prend le relais pour gérer le toggle clair/sombre * 3. Ce fichier CSS est chargé après base.css → les variables dark * surchargent les variables light quand data-theme="dark" * ========================================================================== */ /* ── Surcharge des variables pour le mode sombre ────────────────────────── */ [data-theme="dark"] { /* Fonds : couleur uniforme pour toutes les sections */ --bg-primary: #121212; --bg-secondary: #121212; /* Même couleur que primary → fond uniforme */ --bg-card: #0D0D0D; /* Légèrement plus clair pour les cartes */ --bg-elevated: #262626; /* Encore plus clair pour la navbar scrollée */ /* Textes */ --text-primary: #CCCCCC; /* Texte principal (gris clair bleuté) */ --text-secondary: #B8B8B8; /* Texte secondaire (descriptions, paragraphes) */ --text-muted: #9C9C9C; /* Texte discret (dates, labels) */ /* Accent vert */ --accent: #95BECF; /* Couleur principale (titres, liens, boutons) */ --accent-hover: #B5E9FF; /* Vert plus vif au survol */ --accent-glow: rgba(255, 255, 255, 0.15); /* Lueur verte subtile (ombres) */ /* Couleur du texte sur les éléments avec fond accent (boutons remplis) */ --text-on-accent: #0D0D0D; /* Même couleur que le fond → contraste sur vert */ /* Bordures et ombres */ --border: rgba(255, 255, 255, 0.1); /* Bordure verte très subtile */ --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4); /* Ombre plus forte en dark */ } /* ── Titres en vert accent (mode sombre) ────────────────────────────────── */ /* * En mode clair, les titres utilisent --text-primary (sombre). * En mode sombre, on les passe en vert accent pour donner de l'identité * et améliorer la lisibilité sur le fond sombre. */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #D7D7D7; } /* ── Délimiteurs verts entre sections (mode sombre) ─────────────────────── */ /* * Sélecteur : .section + .section * Le combinateur "+" (sélecteur de frère adjacent) cible un .section qui * est immédiatement précédé d'un autre .section. Cela ajoute un trait * vert en HAUT de chaque section (sauf la première). * * Pourquoi border-top et non border-bottom ? * Parce que le sélecteur cible la DEUXIÈME section d'une paire adjacente. * border-top sur la deuxième = visuellement un trait entre les deux. */ [data-theme="dark"] .section + .section { border-top: 2px solid #434343; } /* ── Fond uniforme du footer (mode sombre) ──────────────────────────────── */ /* * Le footer utilise --bg-secondary par défaut (pour se distinguer du body * en mode clair). En mode sombre, --bg-secondary est déjà #111825, * mais on s'assure que le border-top du footer est aussi en vert. */ [data-theme="dark"] .footer { border-top-color: #434343; }