/* Site-wide dark mode overrides (5 mei 2026) * * Targets: * 1. [data-theme="dark"] — set by /app/'s manual toggle on * 2. (prefers-color-scheme: dark) — for pages without a toggle * * The original site has hundreds of inline styles like * style="color:#666" * style="background:#fff" * style="background:linear-gradient(...,#f8f9fa,#e9ecef)" * which look fine on a white page but turn unreadable on a dark page. * * Rather than rewrite every inline style, this stylesheet uses attribute * selectors to override the most common patterns at the dark-mode level. */ /* ───────── Manual toggle (only used on /app/) ───────── */ [data-theme="dark"] body { background: #111827; color: #e5e7eb; } /* Card-like containers with hardcoded white/cream backgrounds */ [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:#FFF8F0"], [data-theme="dark"] [style*="background: #FFF8F0"], [data-theme="dark"] [style*="background:#f8f9fa"], [data-theme="dark"] [style*="background:#fafafa"] { background: #1f2937 !important; color: #e5e7eb !important; } /* Light-gradient containers (Pro Tips card style) */ [data-theme="dark"] [style*="linear-gradient(135deg, #f8f9fa"], [data-theme="dark"] [style*="linear-gradient(135deg,#f8f9fa"], [data-theme="dark"] .tips-section { background: linear-gradient(135deg, #1f2937, #111827) !important; color: #e5e7eb !important; } /* Hardcoded muted text colors — make readable on dark */ [data-theme="dark"] [style*="color:#666"], [data-theme="dark"] [style*="color: #666"] { color: #b0b0b0 !important; } [data-theme="dark"] [style*="color:#777"], [data-theme="dark"] [style*="color: #777"] { color: #a8a8a8 !important; } [data-theme="dark"] [style*="color:#888"], [data-theme="dark"] [style*="color: #888"] { color: #a0a0a0 !important; } [data-theme="dark"] [style*="color:#999"], [data-theme="dark"] [style*="color: #999"] { color: #98a0a8 !important; } [data-theme="dark"] [style*="color:#555"], [data-theme="dark"] [style*="color: #555"] { color: #c5c5c5 !important; } [data-theme="dark"] [style*="color:#444"], [data-theme="dark"] [style*="color: #444"] { color: #d0d0d0 !important; } [data-theme="dark"] [style*="color:#1a1a1a"], [data-theme="dark"] [style*="color: #1a1a1a"] { color: #f0f0f0 !important; } /* Italian green text (logo, headings) — slight tint adjustment for dark */ [data-theme="dark"] [style*="color:#006d3a"], [data-theme="dark"] [style*="color: #006d3a"], [data-theme="dark"] [style*="color:#2d5a1b"], [data-theme="dark"] [style*="color: #2d5a1b"] { color: #4ade80 !important; } /* Italian-red text/borders unchanged hue, slightly brighter on dark */ [data-theme="dark"] [style*="color:#c41e3a"], [data-theme="dark"] [style*="color: #c41e3a"] { color: #ff6b6b !important; } /* Inline borders */ [data-theme="dark"] [style*="border:1px solid #c3e0c3"], [data-theme="dark"] [style*="border:1px solid #ddd"], [data-theme="dark"] [style*="border:1px solid #e0e0e0"], [data-theme="dark"] [style*="border-bottom:1px solid #ddd"] { border-color: #374151 !important; } /* Pale tip/info backgrounds (yellow-ish) */ [data-theme="dark"] [style*="background:#fef3c7"], [data-theme="dark"] [style*="background:#FEF3C7"], [data-theme="dark"] [style*="background:#fffbeb"] { background: #422006 !important; color: #fbbf24 !important; } /* Pale green backgrounds (success/info) */ [data-theme="dark"] [style*="background:#f0fdf4"], [data-theme="dark"] [style*="background:#f0f7f0"], [data-theme="dark"] [style*="background:#ECFDF5"] { background: #1a2e1a !important; color: #d1fae5 !important; } /* ───────── OS-level dark (no toggle, pages without data-theme) ───────── */ /* Only apply when no [data-theme] attribute is set on , so the * manual toggle on /app/ takes precedence (user might have OS dark on * but explicitly chose light in app — respect that). */ @media (prefers-color-scheme: dark) { html:not([data-theme]) body { background: #111827; color: #e5e7eb; } /* Same overrides as above but scoped to no-toggle pages */ html:not([data-theme]) [style*="background:#fff"], html:not([data-theme]) [style*="background: #fff"], html:not([data-theme]) [style*="background:#FFF8F0"], html:not([data-theme]) [style*="background:#f8f9fa"], html:not([data-theme]) [style*="background:#fafafa"] { background: #1f2937 !important; color: #e5e7eb !important; } html:not([data-theme]) [style*="color:#666"], html:not([data-theme]) [style*="color:#777"], html:not([data-theme]) [style*="color:#888"], html:not([data-theme]) [style*="color:#999"] { color: #b0b0b0 !important; } html:not([data-theme]) [style*="color:#555"], html:not([data-theme]) [style*="color:#444"] { color: #c5c5c5 !important; } html:not([data-theme]) [style*="color:#1a1a1a"] { color: #f0f0f0 !important; } html:not([data-theme]) [style*="color:#006d3a"], html:not([data-theme]) [style*="color:#2d5a1b"] { color: #4ade80 !important; } html:not([data-theme]) [style*="color:#c41e3a"] { color: #ff6b6b !important; } }