/* * Dark/Light Theme System * * Globalne zmienne kolorystyczne per theme. * Dark jest domyślny. Light aktywowany przez data-theme="light" na . * Header i footer zawsze ciemne (brand identity). * Żółty akcent (#FECB0E) stały w obu trybach. */ /* ============================================================ DARK THEME (domyślny) ============================================================ */ :root, [data-theme="dark"] { --theme-bg: #000000; --theme-bg-alt: #0a0a0a; --theme-card-bg: #111111; --theme-card-bg-hover: #1a1a1a; --theme-text: #e9ecef; --theme-text-secondary: #adb5bd; --theme-text-muted: #6c757d; --theme-heading: #ffffff; --theme-border: #222222; --theme-border-hover: #333333; --theme-input-bg: #1a1a1a; --theme-input-border: #333333; --theme-input-text: #e9ecef; --theme-input-placeholder: #555555; --theme-overlay: rgba(0, 0, 0, 0.7); --theme-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); --theme-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --theme-table-row-alt: #0d0d0d; --theme-badge-bg: #1a1a1a; --theme-badge-text: #e9ecef; --theme-success: #10b981; --theme-error: #ef4444; --theme-warning: #f59e0b; --theme-info: #3b82f6; --theme-link: #60a5fa; --theme-link-hover: #93bbfd; --theme-scrollbar-track: #111111; --theme-scrollbar-thumb: #333333; --theme-placeholder-bg: #1a1a1a; --theme-placeholder-icon: #333333; --theme-filter-bg: #111111; --theme-filter-active: #FECB0E; --theme-toggle-icon: #FECB0E; --theme-accent: #FECB0E; --theme-accent-hover: #e5b60d; --theme-accent-text: #FECB0E; } /* ============================================================ LIGHT THEME ============================================================ */ [data-theme="light"] { --theme-bg: #f8f9fa; --theme-bg-alt: #ffffff; --theme-card-bg: #ffffff; --theme-card-bg-hover: #f1f3f5; --theme-text: #212529; --theme-text-secondary: #495057; --theme-text-muted: #6c757d; --theme-heading: #111111; --theme-border: #dee2e6; --theme-border-hover: #adb5bd; --theme-input-bg: #ffffff; --theme-input-border: #ced4da; --theme-input-text: #212529; --theme-input-placeholder: #999999; --theme-overlay: rgba(255, 255, 255, 0.7); --theme-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); --theme-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05); --theme-table-row-alt: #f8f9fa; --theme-badge-bg: #e9ecef; --theme-badge-text: #212529; --theme-success: #059669; --theme-error: #dc2626; --theme-warning: #d97706; --theme-info: #2563eb; --theme-link: #2563eb; --theme-link-hover: #1d4ed8; --theme-scrollbar-track: #f1f3f5; --theme-scrollbar-thumb: #ced4da; --theme-placeholder-bg: #e9ecef; --theme-placeholder-icon: #adb5bd; --theme-filter-bg: #f1f3f5; --theme-filter-active: #c48a00; --theme-toggle-icon: #495057; --theme-accent: #c48a00; --theme-accent-hover: #a87600; --theme-accent-text: #9a6d00; } /* ============================================================ GLOBAL THEME OVERRIDES — body, scrollbar, selection ============================================================ */ body[data-theme] { background-color: var(--theme-bg); color: var(--theme-text); transition: background-color 0.3s ease, color 0.3s ease; } /* Scrollbar styling */ body[data-theme]::-webkit-scrollbar { width: 8px; } body[data-theme]::-webkit-scrollbar-track { background: var(--theme-scrollbar-track); } body[data-theme]::-webkit-scrollbar-thumb { background: var(--theme-scrollbar-thumb); border-radius: 4px; } /* Selection */ [data-theme="dark"] ::selection { background: rgba(254, 203, 14, 0.3); color: #fff; } [data-theme="light"] ::selection { background: rgba(37, 99, 235, 0.2); color: #111; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { body[data-theme] { transition: none; } }