/* * Theme T&B — Dark Mode Styles * * Implements 04B-Design-Tokens.md (Section 12) and * 04H-Accessibility-and-Motion.md (Section 6). * * Dark mode is driven entirely by CSS custom properties. * No duplicate CSS rules — only token overrides. * * @package ThemeTB * @version 2.0.0 */ /* ========================================================= System Dark Mode (prefers-color-scheme) ========================================================= data-tb-theme is set on . Use :root:not([data-tb-theme='light']) so forced light mode wins over OS dark preference. ========================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-tb-theme='light']) { --tb-bg: #0F172A; --tb-bg-secondary: #1E293B; --tb-bg-tertiary: #334155; --tb-surface: #1E293B; --tb-surface-raised: #334155; --tb-card-bg: #1E293B; --tb-card-border: #334155; --tb-border: #334155; --tb-border-light: #1E293B; --tb-border-dark: #475569; --tb-text-primary: #F8FAFC; --tb-text-secondary: #CBD5E1; --tb-text-muted: #64748B; --tb-text-inverse: #0F172A; --tb-link: #60A5FA; --tb-link-hover: #93C5FD; --tb-disabled-bg: #1E293B; --tb-disabled-text: #475569; --tb-disabled-border: #334155; } } /* ========================================================= Manual Dark Mode (html[data-tb-theme="dark"]) ========================================================= */ html[data-tb-theme='dark'], [data-tb-theme='dark'] { --tb-bg: #0F172A; --tb-bg-secondary: #1E293B; --tb-bg-tertiary: #334155; --tb-surface: #1E293B; --tb-surface-raised: #334155; --tb-card-bg: #1E293B; --tb-card-border: #334155; --tb-border: #334155; --tb-border-light: #1E293B; --tb-border-dark: #475569; --tb-text-primary: #F8FAFC; --tb-text-secondary: #CBD5E1; --tb-text-muted: #64748B; --tb-text-inverse: #0F172A; --tb-link: #60A5FA; --tb-link-hover: #93C5FD; --tb-disabled-bg: #1E293B; --tb-disabled-text: #475569; --tb-disabled-border: #334155; } /* ========================================================= Dark Mode Toggle Button ========================================================= */ .tb-header__dark-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--tb-radius-md); color: var(--tb-text-secondary); background: none; border: none; cursor: pointer; transition: all var(--tb-duration-fast); } .tb-header__dark-toggle:hover { color: var(--tb-color-primary); background: var(--tb-color-primary-50); } .tb-header__dark-toggle .tb-icon-sun { display: none; } .tb-header__dark-toggle .tb-icon-moon { display: block; } [data-tb-theme='dark'] .tb-header__dark-toggle .tb-icon-sun { display: block; } [data-tb-theme='dark'] .tb-header__dark-toggle .tb-icon-moon { display: none; } /* ========================================================= Dark Mode Specific Overrides ========================================================= */ [data-tb-theme='dark'] .tb-hero { background: linear-gradient(135deg, #1E293B 0%, #0F172A 60%); } [data-tb-theme='dark'] .tb-header { background: rgb(15 23 42 / 0.95); border-bottom-color: var(--tb-border); } [data-tb-theme='dark'] .tb-tool-card:hover, [data-tb-theme='dark'] .tb-ebook-card:hover, [data-tb-theme='dark'] .tb-blog-card:hover { border-color: var(--tb-color-primary-light); } [data-tb-theme='dark'] .tb-skeleton { background: linear-gradient( 90deg, #1E293B 25%, #334155 50%, #1E293B 75% ); background-size: 200% 100%; }