/* ============================================================ dark.css - Dark Theme Override Stylesheet Activated via html.dark class (applied on element) ============================================================ */ /* ---------------------------------------------------------- 1. Dark Theme CSS Variables ---------------------------------------------------------- */ html.dark { /* --- Background & Surface --- */ --color-bg: #0B0F1A; --color-bg-secondary: #111827; --color-bg-tertiary: #1F2937; --color-surface: #151C2C; --color-surface-hover: #1E293B; /* --- Text --- */ --color-text: #F1F5F9; --color-text-secondary: #94A3B8; --color-text-tertiary: #64748B; --color-text-inverse: #0B0F1A; --color-text-link: #60A5FA; --color-text-link-hover: #93C5FD; /* --- Border --- */ --color-border: #1E293B; --color-border-light: #1E293B; --color-border-focus: #3B82F6; /* --- Primary Color --- */ --color-primary: #3B82F6; --color-primary-hover: #60A5FA; --color-primary-light: rgba(59, 130, 246, 0.15); --color-primary-dark: #2563EB; /* --- Shadow Adjustments (darker, more pronounced) --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); } /* ---------------------------------------------------------- 2. Global Dark Mode Base ---------------------------------------------------------- */ html.dark body { background-color: var(--color-bg); color: var(--color-text); } /* Text selection highlight */ html.dark ::selection { background-color: var(--color-primary); color: #FFFFFF; } /* Scrollbar - WebKit */ html.dark ::-webkit-scrollbar-track { background: var(--color-bg-secondary); } html.dark ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; } html.dark ::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); } /* ---------------------------------------------------------- 3. Navigation Bar ---------------------------------------------------------- */ html.dark .navbar { background-color: rgba(11, 15, 26, 0.85); border-bottom-color: var(--color-border); } html.dark .navbar-logo { color: var(--color-text); } html.dark .navbar-logo:hover { color: var(--color-primary); } /* ---------------------------------------------------------- 4. Search Input ---------------------------------------------------------- */ html.dark .search-input { background-color: var(--color-bg-secondary); border-color: var(--color-border); color: var(--color-text); } html.dark .search-input::placeholder { color: var(--color-text-tertiary); } html.dark .search-input:focus { border-color: var(--color-border-focus); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } /* ---------------------------------------------------------- 5. Sidebar ---------------------------------------------------------- */ html.dark .sidebar { background-color: var(--color-surface); border-right-color: var(--color-border); } html.dark .sidebar-header h3 { color: var(--color-text-secondary); } html.dark .sidebar-item { color: var(--color-text-secondary); } html.dark .sidebar-item:hover { background-color: var(--color-bg-tertiary); color: var(--color-text); } html.dark .sidebar-item.active { background-color: var(--color-primary); color: #FFFFFF; } /* ---------------------------------------------------------- 6. Tool Cards ---------------------------------------------------------- */ html.dark .tool-card { background-color: var(--color-surface); border-color: var(--color-border); } html.dark .tool-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-lg); } html.dark .tool-card h3 { color: var(--color-text); } html.dark .tool-card p { color: var(--color-text-secondary); } html.dark .tool-card-icon { background-color: rgba(59, 130, 246, 0.1); color: var(--color-primary); } html.dark .tool-card:hover .tool-card-icon { background-color: var(--color-primary); color: #FFFFFF; } html.dark .tool-card-tag { background-color: var(--color-bg-tertiary); color: var(--color-text-secondary); } /* ---------------------------------------------------------- 7. Welcome Section ---------------------------------------------------------- */ html.dark .welcome-section h1 { color: var(--color-text); } html.dark .welcome-section p { color: var(--color-text-secondary); } /* ---------------------------------------------------------- 8. Footer ---------------------------------------------------------- */ html.dark .footer { background-color: var(--color-bg-secondary); border-top-color: var(--color-border); } html.dark .footer-links a { color: var(--color-text-secondary); } html.dark .footer-links a:hover { color: var(--color-primary); } html.dark .footer-copyright { color: var(--color-text-tertiary); } /* ---------------------------------------------------------- 9. Ad Slot ---------------------------------------------------------- */ html.dark .ad-slot { border-color: var(--color-border); background-color: var(--color-bg); color: var(--color-text-tertiary); } /* ---------------------------------------------------------- 10. Sidebar Overlay ---------------------------------------------------------- */ html.dark .sidebar-overlay { background-color: rgba(0, 0, 0, 0.6); } /* ---------------------------------------------------------- 11. Action Buttons (navbar) ---------------------------------------------------------- */ html.dark .btn-icon { color: var(--color-text-secondary); } html.dark .btn-icon:hover { background-color: var(--color-bg-tertiary); color: var(--color-text); } /* ---------------------------------------------------------- 12. Code Blocks & Tables ---------------------------------------------------------- */ html.dark code, html.dark pre { background-color: var(--color-bg); color: var(--color-text); } html.dark pre { border-color: var(--color-border); } html.dark hr { border-color: var(--color-border); }