/* * Thèmes applicatifs — surcharges de couleurs Tabler scopées par [data-app-theme] sur . * * Contrairement aux attributs Tabler natifs (data-bs-theme-primary) qui ne changent QUE l'accent, * chaque thème ci-dessous redéfinit aussi le fond de page, les surfaces (cartes), le texte et les * bordures → des rendus réellement différents. * * data-bs-theme (light | dark) est posé EN PARALLÈLE par theme-switcher.js pour que les règles * de composants Tabler (champs, dropdowns, switches...) s'adaptent au mode. Le sélecteur :root * (spécificité renforcée) garantit que ces surcharges l'emportent sur les valeurs dark par défaut. */ /* * Navbar : toujours foncée (data-bs-theme="dark" sur le header pour le texte/les contrôles clairs), * mais teintée par le thème actif — mélange de l'accent du thème et de quasi-noir. Chaque thème * garde ainsi son identité (bleu nuit par défaut, brun foncé en sepia, violet sombre en dracula...). * Le logo reste blanc sur ce fond (règle Tabler navbar-brand-autodark, rien à surcharger). */ .page > header.navbar { background-color: color-mix(in srgb, var(--tblr-primary) 22%, #141a24); } /* ---------- Thèmes clairs ---------- */ :root[data-app-theme=clair] { --tblr-primary: #066fd1; --tblr-primary-rgb: 6, 111, 209; --tblr-body-bg: #f9fafb; --tblr-bg-surface: #ffffff; --tblr-bg-surface-primary: #ffffff; --tblr-bg-surface-secondary: #f4f6fa; /* Valeur Tabler d'origine (gray-50) : pilote le fond des card-headers/onglets — #eef1f6 les fonçait. */ --tblr-bg-surface-tertiary: #f9fafb; --tblr-body-color: #1f2937; --tblr-secondary: #6b7280; --tblr-muted: #6b7280; --tblr-border-color: #e5e7eb; --tblr-border-color-translucent: rgba(0, 0, 0, 0.08); } :root[data-app-theme=sepia] { --tblr-primary: #b45309; --tblr-primary-rgb: 180, 83, 9; --tblr-body-bg: #f3ead6; --tblr-bg-surface: #fbf5e7; --tblr-bg-surface-primary: #fbf5e7; --tblr-bg-surface-secondary: #efe4cd; --tblr-bg-surface-tertiary: #e9dcc0; --tblr-body-color: #4b3b2b; --tblr-secondary: #8a6d4f; --tblr-muted: #8a6d4f; --tblr-border-color: #ddcba8; --tblr-border-color-translucent: rgba(75, 59, 43, 0.12); } :root[data-app-theme=solarized] { --tblr-primary: #268bd2; --tblr-primary-rgb: 38, 139, 210; --tblr-body-bg: #fdf6e3; --tblr-bg-surface: #fbf6e6; --tblr-bg-surface-primary: #fbf6e6; --tblr-bg-surface-secondary: #eee8d5; --tblr-bg-surface-tertiary: #e6dfc8; --tblr-body-color: #586e75; --tblr-secondary: #93a1a1; --tblr-muted: #93a1a1; --tblr-border-color: #e0dac4; --tblr-border-color-translucent: rgba(88, 110, 117, 0.12); } :root[data-app-theme=rose] { --tblr-primary: #d6336c; --tblr-primary-rgb: 214, 51, 108; --tblr-body-bg: #fdf0f4; --tblr-bg-surface: #ffffff; --tblr-bg-surface-primary: #ffffff; --tblr-bg-surface-secondary: #fbe6ec; --tblr-bg-surface-tertiary: #f7dbe4; --tblr-body-color: #4a2733; --tblr-secondary: #9d6b7b; --tblr-muted: #9d6b7b; --tblr-border-color: #f3d2dd; --tblr-border-color-translucent: rgba(74, 39, 51, 0.10); } /* ---------- Thèmes sombres ---------- */ :root[data-app-theme=sombre] { --tblr-primary: #4dabf7; --tblr-primary-rgb: 77, 171, 247; --tblr-body-bg: #111827; --tblr-bg-surface: #1a2436; --tblr-bg-surface-primary: #1a2436; --tblr-bg-surface-secondary: #16202f; --tblr-bg-surface-tertiary: #212d42; --tblr-body-color: #e5e7eb; --tblr-secondary: #9aa4b2; --tblr-muted: #8b95a5; --tblr-border-color: #2a3648; --tblr-border-color-translucent: rgba(255, 255, 255, 0.08); } :root[data-app-theme=nord] { --tblr-primary: #88c0d0; --tblr-primary-rgb: 136, 192, 208; --tblr-body-bg: #2e3440; --tblr-bg-surface: #3b4252; --tblr-bg-surface-primary: #3b4252; --tblr-bg-surface-secondary: #353b48; --tblr-bg-surface-tertiary: #434c5e; --tblr-body-color: #eceff4; --tblr-secondary: #abb6c8; --tblr-muted: #9aa6bb; --tblr-border-color: #434c5e; --tblr-border-color-translucent: rgba(236, 239, 244, 0.10); } :root[data-app-theme=dracula] { --tblr-primary: #bd93f9; --tblr-primary-rgb: 189, 147, 249; --tblr-body-bg: #282a36; --tblr-bg-surface: #343746; --tblr-bg-surface-primary: #343746; --tblr-bg-surface-secondary: #2d3040; --tblr-bg-surface-tertiary: #44475a; --tblr-body-color: #f8f8f2; --tblr-secondary: #b7b9c4; --tblr-muted: #a2a4b0; --tblr-border-color: #44475a; --tblr-border-color-translucent: rgba(248, 248, 242, 0.10); } :root[data-app-theme=foret] { --tblr-primary: #51cf66; --tblr-primary-rgb: 81, 207, 102; --tblr-body-bg: #0f1e16; --tblr-bg-surface: #16281d; --tblr-bg-surface-primary: #16281d; --tblr-bg-surface-secondary: #12231a; --tblr-bg-surface-tertiary: #1d3527; --tblr-body-color: #d3e8d9; --tblr-secondary: #8fb89c; --tblr-muted: #7fae8c; --tblr-border-color: #234433; --tblr-border-color-translucent: rgba(211, 232, 217, 0.10); } :root[data-app-theme=cyberpunk] { --tblr-primary: #ff2d95; --tblr-primary-rgb: 255, 45, 149; --tblr-body-bg: #120724; --tblr-bg-surface: #1d0f38; --tblr-bg-surface-primary: #1d0f38; --tblr-bg-surface-secondary: #170a2c; --tblr-bg-surface-tertiary: #271350; --tblr-body-color: #f0e6ff; --tblr-secondary: #b79ae0; --tblr-muted: #9f83cc; --tblr-border-color: #35205e; --tblr-border-color-translucent: rgba(240, 230, 255, 0.10); } :root[data-app-theme=terminal] { --tblr-primary: #33ff66; --tblr-primary-rgb: 51, 255, 102; --tblr-body-bg: #0a0e0a; --tblr-bg-surface: #0f160f; --tblr-bg-surface-primary: #0f160f; --tblr-bg-surface-secondary: #0c110c; --tblr-bg-surface-tertiary: #142014; --tblr-body-color: #b6f0c2; --tblr-secondary: #5fbf77; --tblr-muted: #4f9f63; --tblr-border-color: #1c2e1c; --tblr-border-color-translucent: rgba(51, 255, 102, 0.12); }