/** * WeegoSoft Tools — Dark Theme Override * Applied ONLY via the .dark class on . * Controlled by the page's own JS toggle + localStorage. * NO prefers-color-scheme — never conflicts with OS theme. */ /* ============================================= CSS VARIABLES — DARK ============================================= */ html.dark { --color-bg: #0f172a; --color-surface: #1e293b; --color-border: #334155; --color-text: #f1f5f9; --color-muted: #94a3b8; --color-primary: #818cf8; --color-primary-hover: #6366f1; --color-accent: #22d3ee; --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); } html.dark body { background-color: var(--color-bg); color: var(--color-text); } /* ============================================= NAVBAR — DARK ============================================= */ html.dark .navbar { background: rgba(15, 23, 42, 0.85); border-color: var(--color-border); } html.dark .navbar-nav a:hover, html.dark .navbar-nav a.active { background: #1e293b; color: var(--color-text); } /* ============================================= CARDS — DARK ============================================= */ html.dark .tool-card-hub { background: var(--color-surface); border-color: var(--color-border); } html.dark .tool-card-hub:hover { border-color: #4f46e5; } /* ============================================= SEARCH BAR — DARK ============================================= */ html.dark .search-input { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text); } html.dark .search-input::placeholder { color: var(--color-muted); } html.dark .search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.15); } /* ============================================= CATEGORY TABS — DARK ============================================= */ html.dark .category-tab { background: var(--color-surface); border-color: var(--color-border); color: var(--color-muted); } html.dark .category-tab:hover { border-color: var(--color-primary); color: var(--color-primary); background: #1e2d4a; } html.dark .category-tab.active { background: var(--color-primary); border-color: var(--color-primary); color: #0f172a; } /* ============================================= PROSE — DARK ============================================= */ html.dark .prose h1, html.dark .prose h2, html.dark .prose h3 { color: #f1f5f9; } html.dark .prose p, html.dark .prose li { color: #94a3b8; } html.dark .prose strong { color: #e2e8f0; } html.dark .prose code { background: #1e293b; color: #a5b4fc; } html.dark .prose pre { background: #0f172a; } html.dark .prose blockquote { border-color: #818cf8; } /* ============================================= CUSTOM SCROLLBAR — DARK ============================================= */ html.dark .custom-scrollbar { scrollbar-color: #334155 transparent; } html.dark .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #334155; } html.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #475569; } /* ============================================= FOOTER — DARK ============================================= */ html.dark .footer { border-color: var(--color-border); } /* ============================================= SIDEBAR — DARK ============================================= */ html.dark .sidebar-link { color: #94a3b8; } html.dark .sidebar-link:hover { background: #1e293b; color: #f1f5f9; } html.dark .sidebar-link.active { background: #1e2d4a; color: #818cf8; }