/** * Dark Mode Overrides * Gahan Library - Phase 3 * * Active quand [data-theme="dark"] sur * ou quand le système préfère le mode sombre */ /* ======================================== DARK MODE COLORS ======================================== */ [data-theme="dark"] { /* Primary - Plus vibrant en dark mode */ --color-primary: #3aa3e3; --color-primary-light: #5bb8ed; --color-primary-dark: #2989c9; --color-primary-alpha: rgba(58, 163, 227, 0.15); --color-primary-alpha-20: rgba(58, 163, 227, 0.25); /* Secondary */ --color-secondary: #9066bd; --color-secondary-light: #a882cd; --color-secondary-dark: #764ba2; --color-secondary-alpha: rgba(144, 102, 189, 0.15); /* Neutrals - Dark backgrounds */ --color-background: #0f1419; --color-background-alt: #1a1f2e; --color-background-elevated: #1e2433; --color-surface: #1a1f2e; --color-surface-hover: #252b3b; /* Text - Inversé avec contraste amélioré */ --color-text-primary: #f9fafb; --color-text-secondary: #d1d5db; --color-text-tertiary: #9ca3af; --color-text-inverse: #1a1a1a; /* Borders - Plus subtils en dark */ --color-border: #2d3748; --color-border-hover: #3d4a5f; --color-divider: #252b3b; /* Semantic Colors - Ajustés pour dark mode */ --color-success: #34d399; --color-success-light: #6ee7b7; --color-success-dark: #10b981; --color-success-bg: rgba(52, 211, 153, 0.1); --color-warning: #fbbf24; --color-warning-light: #fcd34d; --color-warning-dark: #f59e0b; --color-warning-bg: rgba(251, 191, 36, 0.1); --color-error: #f87171; --color-error-light: #fca5a5; --color-error-dark: #ef4444; --color-error-bg: rgba(248, 113, 113, 0.1); --color-info: #60a5fa; --color-info-light: #93c5fd; --color-info-dark: #3b82f6; --color-info-bg: rgba(96, 165, 250, 0.1); /* Shadows - Adaptés pour dark mode */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6); } /* ======================================== SUPPORT PREFERS-COLOR-SCHEME Auto dark mode si pas de préférence manuelle ======================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Primary */ --color-primary: #3aa3e3; --color-primary-light: #5bb8ed; --color-primary-dark: #2989c9; --color-primary-alpha: rgba(58, 163, 227, 0.15); --color-primary-alpha-20: rgba(58, 163, 227, 0.25); /* Secondary */ --color-secondary: #9066bd; --color-secondary-light: #a882cd; --color-secondary-dark: #764ba2; --color-secondary-alpha: rgba(144, 102, 189, 0.15); /* Neutrals */ --color-background: #0f1419; --color-background-alt: #1a1f2e; --color-background-elevated: #1e2433; --color-surface: #1a1f2e; --color-surface-hover: #252b3b; /* Text */ --color-text-primary: #f9fafb; --color-text-secondary: #d1d5db; --color-text-tertiary: #9ca3af; --color-text-inverse: #1a1a1a; /* Borders */ --color-border: #2d3748; --color-border-hover: #3d4a5f; --color-divider: #252b3b; /* Semantic */ --color-success: #34d399; --color-success-light: #6ee7b7; --color-success-dark: #10b981; --color-success-bg: rgba(52, 211, 153, 0.1); --color-warning: #fbbf24; --color-warning-light: #fcd34d; --color-warning-dark: #f59e0b; --color-warning-bg: rgba(251, 191, 36, 0.1); --color-error: #f87171; --color-error-light: #fca5a5; --color-error-dark: #ef4444; --color-error-bg: rgba(248, 113, 113, 0.1); --color-info: #60a5fa; --color-info-light: #93c5fd; --color-info-dark: #3b82f6; --color-info-bg: rgba(96, 165, 250, 0.1); /* Shadows */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6); } } /* ======================================== DARK MODE SPECIFIC ADJUSTMENTS ======================================== */ [data-theme="dark"], @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* Ajustements spécifiques pour améliorer la lisibilité */ color-scheme: dark; } /* Images - Légèrement assombries pour ne pas éblouir */ [data-theme="dark"] img:not(.no-dark-filter), :root:not([data-theme="light"]) img:not(.no-dark-filter) { opacity: 0.9; transition: opacity var(--duration-normal) var(--ease-in-out); } [data-theme="dark"] img:not(.no-dark-filter):hover, :root:not([data-theme="light"]) img:not(.no-dark-filter):hover { opacity: 1; } /* Code blocks - Meilleur contraste */ [data-theme="dark"] code, [data-theme="dark"] pre, :root:not([data-theme="light"]) code, :root:not([data-theme="light"]) pre { background-color: #1a1f2e; color: #e5e7eb; border: 1px solid var(--color-border); } /* Scrollbar dark */ [data-theme="dark"] ::-webkit-scrollbar-track, :root:not([data-theme="light"]) ::-webkit-scrollbar-track { background: var(--color-background); } [data-theme="dark"] ::-webkit-scrollbar-thumb, :root:not([data-theme="light"]) ::-webkit-scrollbar-thumb { background: var(--color-border-hover); border-color: var(--color-background); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover, :root:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); } /* Firefox scrollbar */ [data-theme="dark"] *, :root:not([data-theme="light"]) * { scrollbar-color: var(--color-border-hover) var(--color-background); } } /* ======================================== DARK MODE TOGGLE BUTTON STYLES ======================================== */ .theme-toggle { position: relative; width: 48px; height: 48px; border: none; background: transparent; cursor: pointer; border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; transition: var(--transition-colors); } .theme-toggle:hover { background-color: var(--color-surface-hover); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle svg { width: 20px; height: 20px; color: var(--color-text-secondary); transition: var(--transition-all); } .theme-toggle:hover svg { color: var(--color-text-primary); } /* Icons swap */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } /* ======================================== SKELETON SCREENS - Dark mode adjustments ======================================== */ [data-theme="dark"] .skeleton, @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .skeleton { background: linear-gradient( 90deg, #1a1f2e 0%, #252b3b 50%, #1a1f2e 100% ); background-size: 1000px 100%; } } /* ======================================== TRANSITIONS POUR LE THEME SWITCH Empêcher les flashs pendant le changement ======================================== */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *:before, html.theme-transitioning *:after { transition: none !important; animation: none !important; } /* ======================================== PRINT - Force light mode ======================================== */ @media print { [data-theme="dark"] { --color-background: #ffffff; --color-text-primary: #000000; --color-text-secondary: #4b5563; } [data-theme="dark"] img { opacity: 1 !important; } }