/** * Thimze Prints Dashboard — Dark Mode * * Activated via [data-theme="dark"] on . Two layers: * * 1. CSS variables (--tp-*) get dark values — anything already built * with var(--tp-...) (the .tpdb-* utility classes in dashboard.css) * just works automatically, no extra rules needed. * * 2. The portal's section templates are almost entirely hand-written * inline styles (style="color:#111827;background:#fff;..."), built * up over many separate files. Rewriting every inline style by hand * is the "proper" long-term fix, but isn't realistic to do safely in * one pass — instead this remaps the actual repeated hex values via * attribute selectors. The colors below cover the ~25 hex values * that make up the overwhelming majority of every inline style in * the plugin, so this gets the whole portal into a consistent dark * theme without touching the section PHP files at all. New section * code should prefer the .tpdb-* classes / --tp-* variables where * possible so it gets dark mode "for free" going forward. */ [data-theme="dark"] { --tp-dark: #f1f5f9; --tp-sidebar: #0d1219; --tp-sidebar-border: rgba(255,255,255,.06); --tp-border: #2a3343; --tp-bg: #0f1623; --tp-text: #e5e9f0; --tp-muted: #8b96a8; --tp-card-bg: #161e2c; } [data-theme="dark"] body.tpdb-body, [data-theme="dark"] body { background: var(--tp-bg) !important; color: var(--tp-text) !important; } /* ── Page background / scroll areas ─────────────────────────────── */ [data-theme="dark"] [style*="background:#f9fafb"], [data-theme="dark"] [style*="background: #f9fafb"] { background: var(--tp-bg) !important; } /* ── Card / panel surfaces (white backgrounds → dark card) ──────── */ [data-theme="dark"] [style*="background:#fff"], [data-theme="dark"] [style*="background: #fff"], [data-theme="dark"] [style*="background:#ffffff"], [data-theme="dark"] [style*="background:#fafafa"] { background: var(--tp-card-bg) !important; } /* ── Light-gray surfaces used for table headers / zebra rows ─────── */ [data-theme="dark"] [style*="background:#f3f4f6"], [data-theme="dark"] [style*="background: #f3f4f6"], [data-theme="dark"] [style*="background:#f9fafb"] td, [data-theme="dark"] [style*="background:#eef0f5"], [data-theme="dark"] [style*="background:#eee"], [data-theme="dark"] [style*="background:#f5f5f5"] { background: #1b2330 !important; } /* ── Borders ───────────────────────────────────────────────────────*/ [data-theme="dark"] [style*="border:1px solid #e5e7eb"], [data-theme="dark"] [style*="border: 1px solid #e5e7eb"], [data-theme="dark"] [style*="border-bottom:1px solid #e5e7eb"], [data-theme="dark"] [style*="border-top:1px solid #e5e7eb"], [data-theme="dark"] [style*="border-color:#e5e7eb"], [data-theme="dark"] [style*="border:1px solid #d1d5db"], [data-theme="dark"] [style*="border-color: #d1d5db"] { border-color: var(--tp-border) !important; } /* ── Primary text (near-black headings/body) ─────────────────────── */ [data-theme="dark"] [style*="color:#111827"], [data-theme="dark"] [style*="color: #111827"], [data-theme="dark"] [style*="color:#111"], [data-theme="dark"] [style*="color: #111"], [data-theme="dark"] [style*="color:#1a1a2e"] { color: var(--tp-text) !important; } /* ── Secondary text (grays) ───────────────────────────────────────── */ [data-theme="dark"] [style*="color:#374151"], [data-theme="dark"] [style*="color: #374151"] { color: #c3cad6 !important; } [data-theme="dark"] [style*="color:#6b7280"], [data-theme="dark"] [style*="color: #6b7280"] { color: var(--tp-muted) !important; } [data-theme="dark"] [style*="color:#9ca3af"], [data-theme="dark"] [style*="color: #9ca3af"] { color: #6b7686 !important; } /* ── Inputs ────────────────────────────────────────────────────────*/ [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea, [data-theme="dark"] .tpdb-input { background: #1b2330; border-color: var(--tp-border); color: var(--tp-text); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: #5b6577; } /* ── Secondary buttons (white bg, gray border) ───────────────────── */ [data-theme="dark"] .tpdb-btn-secondary, [data-theme="dark"] [style*="background:#fff;color:#374151"] { background: #1b2330 !important; color: #c3cad6 !important; border-color: var(--tp-border) !important; } /* ── Status badge / alert backgrounds — keep the same hue, just darken so text stays legible without looking like a paint splash ── */ [data-theme="dark"] [style*="background:#e8f9fe"] { background: rgba(26,196,243,.16) !important; } [data-theme="dark"] [style*="background:#f0fdf4"] { background: rgba(34,197,94,.14) !important; } [data-theme="dark"] [style*="background:#fef2f2"] { background: rgba(220,38,38,.16) !important; } [data-theme="dark"] [style*="background:#fef3c7"], [data-theme="dark"] [style*="background:#fffbeb"], [data-theme="dark"] [style*="background:#fff7ed"] { background: rgba(245,158,11,.16) !important; } [data-theme="dark"] [style*="background:#faf5ff"], [data-theme="dark"] [style*="background:#f5f3ff"] { background: rgba(124,58,237,.16) !important; } [data-theme="dark"] [style*="background:#dcfce7"] { background: rgba(22,163,74,.16) !important; } [data-theme="dark"] [style*="background:#fee2e2"] { background: rgba(239,68,68,.16) !important; } [data-theme="dark"] [style*="background:#eff6ff"], [data-theme="dark"] [style*="background:#eef2ff"], [data-theme="dark"] [style*="background:#dbeafe"] { background: rgba(59,130,246,.16) !important; } /* Badge/alert text colors — brighten the dark-on-light pairs so they still read clearly against the dimmed backgrounds above. */ [data-theme="dark"] [style*="color:#0a6b87"] { color: #5fd4f9 !important; } [data-theme="dark"] [style*="color:#15803d"] { color: #4ade80 !important; } [data-theme="dark"] [style*="color:#166534"] { color: #4ade80 !important; } [data-theme="dark"] [style*="color:#92400e"] { color: #fbbf24 !important; } [data-theme="dark"] [style*="color:#854d0e"] { color: #fbbf24 !important; } [data-theme="dark"] [style*="color:#991b1b"] { color: #f87171 !important; } [data-theme="dark"] [style*="color:#b91c1c"] { color: #f87171 !important; } [data-theme="dark"] [style*="color:#7c3aed"], [data-theme="dark"] [style*="color:#6d28d9"] { color: #c4b5fd !important; } [data-theme="dark"] [style*="color:#1e40af"], [data-theme="dark"] [style*="color:#1d4ed8"] { color: #93c5fd !important; } /* ── Brand blue stays brand blue — it already has enough contrast on dark backgrounds, so explicitly leave #1ac4f3 / #19c3f3 alone. ── */ /* ── Scrollbars (cosmetic, optional but makes dark mode feel finished) */ [data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--tp-bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2a3343; border-radius: 5px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #38465c; } /* ── Chart.js note: any canvas chart draws its own colors at render time in JS, so switching [data-theme] alone won't restyle an already-drawn chart. The Woo Analytics section loads its own Chart.js instance independently of this plugin, so its colors aren't touched here — if charts there look off in dark mode, that section's own JS would need to read document.documentElement .getAttribute('data-theme') when building its chart options. */ /* ── Topbar (new) ─────────────────────────────────────────────────*/ [data-theme="dark"] .tpdb-topbar { background: var(--tp-card-bg); border-bottom: 1px solid var(--tp-border); } [data-theme="dark"] .tpdb-topbar-icon-btn { color: #9aa5b4; } [data-theme="dark"] .tpdb-topbar-icon-btn:hover { background: rgba(255,255,255,.06); color: #fff; } [data-theme="dark"] .tpdb-notif-panel { background: var(--tp-card-bg); border: 1px solid var(--tp-border); box-shadow: 0 12px 32px rgba(0,0,0,.5); } [data-theme="dark"] .tpdb-notif-item { border-bottom: 1px solid var(--tp-border); } [data-theme="dark"] .tpdb-notif-item:hover { background: rgba(255,255,255,.04); } [data-theme="dark"] .tpdb-notif-item.unread { background: rgba(26,196,243,.06); }