/*
* Dark Mode Styles - Flavor Theme
* Applied when has class "dark"
* Overrides Tailwind utility classes and custom styles for dark mode
*/
/* =============================================
CSS Custom Properties for Dark Mode
============================================= */
html.dark {
color-scheme: dark;
}
/* =============================================
Body & Base
============================================= */
html.dark body.bg-gray-50 {
background-color: #0f172a; /* slate-900 */
}
html.dark body {
background-color: #0f172a;
color: #e2e8f0;
}
/* =============================================
Background Color Overrides
============================================= */
html.dark .bg-white {
background-color: #1e293b; /* slate-800 */
}
html.dark .bg-gray-50 {
background-color: #0f172a; /* slate-900 */
}
html.dark .bg-gray-100 {
background-color: #1e293b; /* slate-800 */
}
html.dark .bg-gray-200 {
background-color: #334155; /* slate-700 */
}
/* =============================================
Text Color Overrides
============================================= */
html.dark .text-gray-900 {
color: #f1f5f9; /* slate-100 */
}
html.dark .text-gray-800 {
color: #e2e8f0; /* slate-200 */
}
html.dark .text-gray-700 {
color: #cbd5e1; /* slate-300 */
}
html.dark .text-gray-600 {
color: #94a3b8; /* slate-400 */
}
html.dark .text-gray-500 {
color: #94a3b8; /* slate-400 */
}
html.dark .text-gray-400 {
color: #64748b; /* slate-500 */
}
html.dark .text-gray-300 {
color: #475569; /* slate-600 — keeps separators / dividers subtle on dark bg */
}
/* =============================================
Border Color Overrides
============================================= */
html.dark .border-gray-200 {
border-color: #334155; /* slate-700 */
}
html.dark .border-gray-300 {
border-color: #475569; /* slate-600 */
}
html.dark .border-gray-100 {
border-color: #1e293b; /* slate-800 */
}
html.dark .border-gray-800 {
border-color: #475569; /* slate-600 */
}
/* =============================================
Ring Color Overrides
============================================= */
html.dark .ring-gray-300 {
--tw-ring-color: #475569;
}
html.dark .ring-gray-900\/5 {
--tw-ring-color: rgba(241,245,249,0.1);
}
html.dark .ring-inset.ring-gray-300 {
--tw-ring-color: #475569;
}
/* =============================================
Shadow Overrides
============================================= */
html.dark .shadow-sm {
--tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}
html.dark .shadow-lg {
--tw-shadow: 0 10px 15px -3px rgba(0,0,0,0.4),0 4px 6px -4px rgba(0,0,0,0.3);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}
html.dark .shadow-xl {
--tw-shadow: 0 20px 25px -5px rgba(0,0,0,0.4),0 8px 10px -6px rgba(0,0,0,0.3);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}
/* =============================================
Navigation
============================================= */
html.dark nav.bg-white {
background-color: #1e293b;
}
/* Nav items: bare tags from $headerLinks (no Tailwind classes) */
html.dark nav ul > li > a {
color: #94a3b8;
}
html.dark nav ul > li > a:hover {
color: #f1f5f9;
background-color: #334155;
}
html.dark nav ul > li.active > a {
color: #818cf8;
background-color: rgba(79,70,229,0.15);
}
/* Nav items with Tailwind classes (Pricing, Account, Lang buttons) */
html.dark nav .text-gray-600 {
color: #94a3b8;
}
html.dark nav .text-gray-700 {
color: #94a3b8;
}
html.dark nav .text-gray-500 {
color: #94a3b8;
}
html.dark nav .text-gray-400 {
color: #64748b;
}
html.dark nav .hover\:text-gray-900:hover,
html.dark nav .hover\:text-gray-700:hover {
color: #f1f5f9;
}
html.dark nav .hover\:bg-gray-100:hover,
html.dark nav .hover\:bg-gray-50:hover {
background-color: #334155;
}
/* Nav dropdown menus */
html.dark nav .bg-white.rounded-md .text-gray-700 {
color: #94a3b8;
}
html.dark nav .bg-white.rounded-md .text-gray-700:hover {
color: #f1f5f9;
}
/* Active nav item */
html.dark nav .text-primary-600.bg-primary-50 {
color: #818cf8;
background-color: rgba(79,70,229,0.15);
}
/* Nav border */
html.dark nav.border-b.border-gray-200 {
border-color: #334155;
}
/* Mobile menu drawer */
html.dark #mobileMenu {
background-color: #1e293b;
}
html.dark #mobileMenu .border-gray-100,
html.dark #mobileMenu .border-gray-200 {
border-color: #334155;
}
/* Mobile menu: bare tags and Tailwind-classed elements */
html.dark #mobileMenu ul > li > a {
color: #94a3b8;
}
html.dark #mobileMenu ul > li > a:hover {
color: #f1f5f9;
background-color: #334155;
}
html.dark #mobileMenu ul > li.active > a {
color: #818cf8;
background-color: rgba(79,70,229,0.15);
}
html.dark #mobileMenu .text-gray-600,
html.dark #mobileMenu .text-gray-700 {
color: #94a3b8;
}
html.dark #mobileMenu .text-gray-400 {
color: #64748b;
}
html.dark #mobileMenu a:hover {
color: #f1f5f9;
background-color: #334155;
}
html.dark #mobileMenuBtn {
color: #94a3b8;
}
html.dark #mobileMenuBtn:hover {
color: #f1f5f9;
background-color: #334155;
}
/* Navigation dropdown menus */
html.dark nav .bg-white.rounded-md {
background-color: #1e293b;
}
/* =============================================
Hero Section & Sub-page Header
============================================= */
html.dark .hero-section {
background: linear-gradient(135deg, #0f172a 0%, #1a1e33 30%, #1e1a2e 60%, #1a2332 100%);
}
html.dark .hero-section::before {
background-image: radial-gradient(circle at 1px 1px, rgba(148,163,184,0.08) 1px, transparent 0);
}
html.dark .bg-white.border-b,
html.dark .border-b.border-gray-200.bg-white,
html.dark div.bg-white.border-b {
background-color: #1e293b;
}
/* =============================================
Cards & Panels
============================================= */
html.dark .bg-white.rounded-xl,
html.dark .bg-white.rounded-2xl,
html.dark .bg-white.rounded-lg {
background-color: #1e293b;
}
/* =============================================
Form Elements
============================================= */
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="url"],
html.dark input[type="number"],
html.dark input[type="search"],
html.dark textarea,
html.dark select {
background-color: #0f172a;
border-color: #475569;
color: #e2e8f0;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
color: #64748b;
}
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
border-color: #6366f1;
}
html.dark .placeholder-gray-400::placeholder {
color: #64748b;
}
/* Select dropdown bg */
html.dark select option {
background-color: #1e293b;
color: #e2e8f0;
}
/* =============================================
Buttons (non-primary - gray buttons)
============================================= */
html.dark .bg-gray-100.text-gray-700,
html.dark button.bg-gray-100 {
background-color: #334155;
color: #cbd5e1;
}
html.dark .bg-gray-100.text-gray-700:hover,
html.dark button.bg-gray-100:hover {
background-color: #475569;
}
html.dark .hover\:bg-gray-200:hover {
background-color: #475569;
}
html.dark .hover\:bg-gray-50:hover {
background-color: #334155;
}
/* =============================================
Alerts & Status Boxes
============================================= */
/* Red/Error alerts */
html.dark .bg-red-50 {
background-color: rgba(127,29,29,0.2);
}
html.dark .border-red-200 {
border-color: rgba(185,28,28,0.4);
}
html.dark .text-red-800 {
color: #fca5a5;
}
html.dark .text-red-700 {
color: #fca5a5;
}
html.dark .text-red-600 {
color: #f87171;
}
/* Green/Success alerts */
html.dark .bg-green-50 {
background-color: rgba(20,83,45,0.2);
}
html.dark .border-green-200 {
border-color: rgba(22,101,52,0.4);
}
html.dark .text-green-800 {
color: #86efac;
}
html.dark .text-green-600 {
color: #4ade80;
}
html.dark .bg-green-100 {
background-color: rgba(20,83,45,0.3);
}
/* Amber/Warning alerts */
html.dark .bg-amber-50 {
background-color: rgba(120,53,15,0.2);
}
html.dark .border-amber-200 {
border-color: rgba(146,64,14,0.4);
}
html.dark .text-amber-800 {
color: #fcd34d;
}
html.dark .text-amber-600 {
color: #fbbf24;
}
/* Blue/Info alerts */
html.dark .bg-blue-50 {
background-color: rgba(30,58,138,0.2);
}
html.dark .border-blue-200 {
border-color: rgba(30,64,175,0.4);
}
html.dark .text-blue-700 {
color: #93c5fd;
}
html.dark .bg-blue-200 {
background-color: rgba(30,64,175,0.3);
}
/* Sky alerts */
html.dark .bg-sky-50 {
background-color: rgba(12,74,110,0.2);
}
/* Accent subtle backgrounds */
html.dark .bg-accent-50 {
background-color: rgba(13,148,136,0.15);
}
html.dark .bg-gradient-to-r.from-accent-50 {
background: linear-gradient(to right, rgba(13,148,136,0.15), rgba(13,148,136,0.08));
}
html.dark .text-accent-500 {
color: #2dd4bf;
}
html.dark .text-blue-500 {
color: #60a5fa;
}
/* Primary-colored subtle backgrounds */
html.dark .bg-primary-50 {
background-color: rgba(79,70,229,0.15);
}
html.dark .bg-primary-100 {
background-color: rgba(79,70,229,0.2);
}
/* =============================================
Drop Zones & Dashed Borders
============================================= */
html.dark .border-dashed.border-gray-300 {
border-color: #475569;
}
html.dark .border-dashed.border-gray-300:hover,
html.dark .hover\:border-primary-400:hover {
border-color: #818cf8;
}
html.dark .hover\:bg-gray-50:hover {
background-color: #334155;
}
/* =============================================
Footer (already dark - minor tweaks)
============================================= */
html.dark footer.bg-gray-900 {
background-color: #020617; /* slate-950 */
}
/* =============================================
Modals
============================================= */
html.dark .modal-content,
html.dark .bg-white.rounded-2xl.shadow-xl,
html.dark #signin .bg-white,
html.dark #signup .bg-white,
html.dark #xdBox .bg-white {
background-color: #1e293b;
}
html.dark .bg-gray-900\/60 {
background-color: rgba(2,6,23,0.75);
}
/* =============================================
Search Results
============================================= */
html.dark .search-results {
background-color: #1e293b;
border-color: #475569;
box-shadow: 0 0 0 4px rgba(15,23,42,0.5);
}
html.dark .search-results .match a {
border-color: #475569;
color: #cbd5e1;
}
html.dark .search-results .match a:hover {
box-shadow: 0 0 1px 1px #6366f1;
color: #f1f5f9;
border-color: #6366f1;
}
/* Suggestion dropdowns produced by searchResults() in app.js — these use
IDs (not the .search-results class) so the rules above don't apply. */
html.dark #index-results,
html.dark #sidebar-results,
html.dark #hero-results,
html.dark #toolpage-results,
html.dark #navsticky-results,
html.dark #error404-results {
background-color: #1e293b; /* slate-800, matches card bg */
border-color: #334155; /* slate-700 */
box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5), 0 8px 10px -6px rgba(0,0,0,0.4);
}
html.dark #index-results span.match a,
html.dark #sidebar-results span.match a,
html.dark #hero-results span.match a,
html.dark #toolpage-results span.match a,
html.dark #navsticky-results span.match a,
html.dark #error404-results span.match a {
color: #cbd5e1; /* slate-300 */
}
html.dark #index-results span.match a strong,
html.dark #sidebar-results span.match a strong,
html.dark #hero-results span.match a strong,
html.dark #toolpage-results span.match a strong,
html.dark #navsticky-results span.match a strong,
html.dark #error404-results span.match a strong {
color: #f1f5f9; /* slate-100 — highlighted match */
}
html.dark #index-results span.match a:hover,
html.dark #sidebar-results span.match a:hover,
html.dark #hero-results span.match a:hover,
html.dark #toolpage-results span.match a:hover,
html.dark #navsticky-results span.match a:hover,
html.dark #error404-results span.match a:hover {
background-color: #334155; /* slate-700 */
color: #f1f5f9;
}
/* The magnifying-glass icon before each result uses an inline SVG with stroke
color #9ca3af baked in — recolour via a CSS filter so it reads in dark mode. */
html.dark #index-results span.match a::before,
html.dark #sidebar-results span.match a::before,
html.dark #hero-results span.match a::before,
html.dark #toolpage-results span.match a::before,
html.dark #navsticky-results span.match a::before,
html.dark #error404-results span.match a::before {
filter: brightness(1.6);
}
/* =============================================
Sidebar
============================================= */
html.dark #rightCol .bg-white {
background-color: #1e293b;
}
/* =============================================
Tool Cards / Grid Items
============================================= */
html.dark a.bg-white.ring-1 {
background-color: #1e293b;
}
html.dark a.ring-1.ring-inset.ring-gray-300 {
--tw-ring-color: #475569;
}
html.dark a.ring-1:hover {
background-color: #334155;
}
html.dark .hover\:ring-gray-400:hover {
--tw-ring-color: #64748b;
}
/* =============================================
Tables
============================================= */
html.dark table {
color: #e2e8f0;
}
html.dark th {
background-color: #1e293b;
border-color: #475569;
color: #e2e8f0;
}
html.dark td {
border-color: #334155;
}
html.dark tr:hover td {
background-color: rgba(51,65,85,0.3);
}
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
border-color: #334155;
}
/* =============================================
Semi-transparent Backgrounds
============================================= */
html.dark .bg-white\/20 {
background-color: rgba(30,41,59,0.2);
}
html.dark .bg-white\/10 {
background-color: rgba(30,41,59,0.1);
}
/* =============================================
Prose (Typography Plugin) Dark Mode
============================================= */
html.dark .prose-gray {
--tw-prose-body: #cbd5e1;
--tw-prose-headings: #f1f5f9;
--tw-prose-lead: #94a3b8;
--tw-prose-links: #818cf8;
--tw-prose-bold: #f1f5f9;
--tw-prose-counters: #94a3b8;
--tw-prose-bullets: #64748b;
--tw-prose-hr: #334155;
--tw-prose-quotes: #e2e8f0;
--tw-prose-quote-borders: #475569;
--tw-prose-captions: #94a3b8;
--tw-prose-code: #e2e8f0;
--tw-prose-pre-code: #e2e8f0;
--tw-prose-pre-bg: #0f172a;
--tw-prose-th-borders: #475569;
--tw-prose-td-borders: #334155;
}
/* =============================================
Divide Overrides
============================================= */
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
border-color: #1e293b;
}
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
border-color: #334155;
}
/* =============================================
SVG Hardcoded Stroke Overrides (Reviewer progress rings)
============================================= */
html.dark svg circle[stroke="#e5e7eb"] {
stroke: #475569;
}
/* =============================================
Gradient Overrides
============================================= */
html.dark .bg-gradient-to-r.from-red-50.to-orange-50 {
background: linear-gradient(to right, rgba(127,29,29,0.15), rgba(124,45,18,0.15));
}
html.dark .bg-gradient-to-r.from-amber-50.to-orange-50 {
background: linear-gradient(to right, rgba(120,53,15,0.15), rgba(124,45,18,0.15));
}
html.dark .bg-gradient-to-r.from-primary-50 {
background: linear-gradient(to right, rgba(79,70,229,0.15), rgba(79,70,229,0.1));
}
html.dark .bg-gradient-to-r.from-emerald-50 {
background: linear-gradient(to right, rgba(16,185,129,0.15), rgba(20,184,166,0.08));
}
html.dark .bg-gradient-to-r.from-green-50.to-emerald-50 {
background: linear-gradient(to right, rgba(22,163,74,0.15), rgba(16,185,129,0.08));
}
html.dark .text-emerald-500 {
color: #34d399;
}
html.dark .group-hover\:text-emerald-500:hover,
html.dark .group:hover .group-hover\:text-emerald-500 {
color: #34d399;
}
/* =============================================
Sidebar Boxes & Envato Ads Dark Overrides
============================================= */
/* Envato "Unlimited Access" cards */
html.dark .border-green-100 {
border-color: rgba(22,101,52,0.3);
}
html.dark .bg-green-50\/50 {
background-color: rgba(20,83,45,0.15);
}
/* Marketplace link hover */
html.dark .hover\:bg-green-50:hover {
background-color: rgba(20,83,45,0.2);
}
/* Quick link pills ring */
html.dark .ring-gray-200 {
--tw-ring-color: #334155;
}
html.dark .hover\:ring-green-200:hover {
--tw-ring-color: rgba(22,101,52,0.5);
}
html.dark .hover\:text-green-700:hover {
color: #4ade80;
}
html.dark .hover\:bg-green-50:hover {
background-color: rgba(20,83,45,0.2);
}
/* Text colors in sidebar ad cards */
html.dark .text-gray-800 {
color: #e2e8f0;
}
html.dark .group-hover\:text-green-700:hover,
html.dark .group:hover .group-hover\:text-green-700 {
color: #4ade80;
}
html.dark .group:hover .group-hover\:text-green-500 {
color: #22c55e;
}
/* =============================================
FAQ / Accordion Sections
============================================= */
html.dark details {
background-color: #1e293b;
border-color: #334155;
}
html.dark details summary {
color: #e2e8f0;
}
html.dark details[open] {
background-color: #1e293b;
}
/* =============================================
Prose Content (about tool, blog content)
============================================= */
html.dark .prose {
color: #cbd5e1;
}
html.dark .prose h1,
html.dark .prose h2,
html.dark .prose h3,
html.dark .prose h4,
html.dark .prose h5,
html.dark .prose h6 {
color: #f1f5f9;
}
html.dark .prose a {
color: #818cf8;
}
html.dark .prose strong {
color: #f1f5f9;
}
html.dark .prose code {
color: #e2e8f0;
background-color: #334155;
}
html.dark .prose blockquote {
color: #94a3b8;
border-color: #475569;
}
html.dark .prose pre {
background-color: #0f172a;
}
/* =============================================
Custom CSS Overrides (custom.css compatibility)
============================================= */
html.dark .form-control {
background-color: #0f172a;
border-color: #475569;
box-shadow: 0 0 0 4px rgba(15,23,42,0.5);
color: #e2e8f0;
}
html.dark .form-input {
background-color: #0f172a;
border-color: #475569;
color: #e2e8f0;
}
html.dark .well {
background-color: #1e293b;
}
html.dark .widget-box {
border-color: #475569;
}
html.dark .widget-header {
background: #1e293b;
border-color: #475569;
color: #818cf8;
}
html.dark .widget-body {
background-color: #1e293b;
}
html.dark .main-index {
background-color: #1e293b;
border-color: #475569;
}
html.dark .alert-danger,
html.dark .alert-error {
background-color: rgba(127,29,29,0.2);
border-color: rgba(185,28,28,0.4);
color: #fca5a5;
}
html.dark .alert-warning {
background-color: rgba(120,53,15,0.2);
border-color: rgba(146,64,14,0.4);
color: #fcd34d;
}
html.dark .alert-success {
background-color: rgba(20,83,45,0.2);
border-color: rgba(22,101,52,0.4);
color: #86efac;
}
/* =============================================
Scrollbar Styling
---------------------------------------------
Width/track-reservation must be identical in
light and dark — otherwise the viewport width
changes when the user toggles theme, and the
whole page shifts a few pixels horizontally.
The dark-mode block below only overrides COLOURS.
============================================= */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f5f9; /* slate-100 */
}
::-webkit-scrollbar-thumb {
background: #cbd5e1; /* slate-300 */
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8; /* slate-400 */
}
/* Firefox */
html {
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
}
html.dark ::-webkit-scrollbar-track {
background: #1e293b; /* slate-800 */
}
html.dark ::-webkit-scrollbar-thumb {
background: #475569; /* slate-600 */
}
html.dark ::-webkit-scrollbar-thumb:hover {
background: #64748b; /* slate-500 */
}
html.dark {
scrollbar-color: #475569 #1e293b;
}
/* =============================================
Range Input (sliders)
============================================= */
html.dark input[type="range"] {
background-color: #334155;
}
/* =============================================
Skip Link
============================================= */
html.dark .skip-link {
background: #6366f1;
}
/* =============================================
Reviewer Tool Specific
============================================= */
html.dark .result-line {
color: #cbd5e1;
}
html.dark .rv-seoContent {
color: #cbd5e1;
}
html.dark .rvSpinner {
border-color: #475569;
border-top-color: #818cf8;
}
html.dark .rv-seoContent .passedBox {
background-color: rgba(20,83,45,0.15);
}
html.dark .rv-seoContent .errorBox {
background-color: rgba(127,29,29,0.15);
}
html.dark .rv-seoContent .improveBox {
background-color: rgba(120,53,15,0.15);
}
html.dark .rv-seoContent .lowImpactBox {
background-color: #1e293b;
border-left-color: #64748b;
}
html.dark .rv-seoContent .passedBox .suggestionBox { background-color: rgba(20,83,45,0.2); color: #86efac; }
html.dark .rv-seoContent .errorBox .suggestionBox { background-color: rgba(127,29,29,0.2); color: #fca5a5; }
html.dark .rv-seoContent .improveBox .suggestionBox { background-color: rgba(120,53,15,0.2); color: #fcd34d; }
html.dark .rv-seoContent .lowImpactBox .suggestionBox { background-color: #334155; color: #94a3b8; }
html.dark .rv-seoContent .suggestionBox { color: #94a3b8; }
html.dark .rv-seoContent table th {
background-color: #0f172a;
color: #e2e8f0;
border-bottom-color: #475569;
}
html.dark .rv-seoContent table td {
border-bottom-color: #334155;
color: #cbd5e1;
}
html.dark .rv-seoContent table tr:hover td {
background-color: #334155;
}
html.dark .rv-seoContent .googlePreview {
background: #0f172a;
border-color: #475569;
}
html.dark .rv-seoContent .googlePreview p { color: #94a3b8; }
html.dark .rv-seoContent .googlePreview p:first-child { color: #818cf8; }
html.dark .rv-seoContent .googlePreview p:nth-child(2) { color: #4ade80; }
html.dark .rv-seoContent .keywordsTags li {
background: #334155;
border-color: #475569;
}
html.dark .rv-seoContent .keywordsTags .keyword { color: #e2e8f0; }
html.dark .rv-seoContent .line { border-bottom-color: #334155; }
html.dark .rv-seoContent .grayColor { color: #64748b; }
html.dark .rv-seoContent .mobileView img {
border-color: #475569;
}
/* =============================================
Blog Styles
============================================= */
html.dark .blog-img {
opacity: 0.9;
}
html.dark .csPageTitle { color: #cbd5e1; }
html.dark .color_grap { color: #e2e8f0; }
html.dark .color_text_in { color: #94a3b8; }
html.dark .version { color: #cbd5e1; }
html.dark .version a { color: #818cf8; }
html.dark .comment-here { color: #e2e8f0; }
html.dark .posts_1 h5 { color: #94a3b8; }
html.dark #relatedPosts h2 { border-bottom-color: #334155; color: #cbd5e1; }
html.dark .latest-links-right { border-bottom-color: #334155; }
html.dark .latest-links-right .image img { border-color: #475569; }
html.dark .divider_h, html.dark .hr_horiznt_dotted { border-bottom-color: #475569; }
/* Spell/Grammar Checker */
html.dark .hiddenSpellError { background-color: rgba(255,0,0,0.3); }
html.dark .hiddenGrammarError { background-color: rgba(254,228,129,0.3); }
html.dark .hiddenSuggestion { background-color: rgba(129,140,248,0.3); }
/* Card/Payment */
html.dark .miniCards ul li:nth-child(odd) { background-color: #334155; }
html.dark .recordTable tr td:first-child { background: #0f172a; }
html.dark .clicktoflip { color: #e2e8f0; }
/* =============================================
Premium & Subscribe Pages
============================================= */
html.dark .bg-white.rounded-2xl {
background-color: #1e293b;
}
/* =============================================
Invoice / Dashboard
============================================= */
html.dark .bg-white.overflow-hidden {
background-color: #1e293b;
}
/* =============================================
Theme Toggle Button Styling
============================================= */
#darkModeToggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 0.5rem;
color: #6b7280;
transition: all 0.15s ease;
cursor: pointer;
border: none;
background: transparent;
padding: 0;
}
#darkModeToggle:hover {
background-color: #f3f4f6;
color: #111827;
}
html.dark #darkModeToggle {
color: #94a3b8;
}
html.dark #darkModeToggle:hover {
background-color: #334155;
color: #f1f5f9;
}
#darkModeToggle .dm-icon-sun,
#darkModeToggle .dm-icon-moon {
width: 1.125rem;
height: 1.125rem;
}
/* Show/hide icons based on theme */
html.dark #darkModeToggle .dm-icon-moon {
display: none;
}
html:not(.dark) #darkModeToggle .dm-icon-sun {
display: none;
}
/* Mobile toggle */
#darkModeToggleMobile {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
font-size: 0.875rem;
font-weight: 500;
color: #4b5563;
transition: all 0.15s ease;
cursor: pointer;
border: none;
background: transparent;
}
#darkModeToggleMobile:hover {
background-color: #f9fafb;
color: #111827;
}
html.dark #darkModeToggleMobile {
color: #94a3b8;
}
html.dark #darkModeToggleMobile:hover {
background-color: #334155;
color: #f1f5f9;
}
html.dark #darkModeToggleMobile .dm-icon-moon {
display: none;
}
html:not(.dark) #darkModeToggleMobile .dm-icon-sun {
display: none;
}
/* Mobile toggle labels */
html.dark #darkModeToggleMobile .dm-label-dark {
display: none;
}
html:not(.dark) #darkModeToggleMobile .dm-label-light {
display: none;
}
/* =============================================
Smooth Transition for Theme Switch
============================================= */
html.dark-transition,
html.dark-transition *,
html.dark-transition *::before,
html.dark-transition *::after {
transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
transition-delay: 0s !important;
}
/* =============================================
DataTables Dark Mode
============================================= */
html.dark .dataTables_wrapper .dataTables_length select,
html.dark .dataTables_wrapper .dataTables_filter input {
background-color: #0f172a;
border-color: #475569;
color: #e2e8f0;
}
html.dark .dataTables_wrapper .dataTables_info,
html.dark .dataTables_wrapper .dataTables_paginate {
color: #94a3b8;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
color: #94a3b8 !important;
border-color: #475569 !important;
background: #1e293b !important;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current {
background: #334155 !important;
color: #f1f5f9 !important;
border-color: #6366f1 !important;
}
html.dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: #334155 !important;
color: #f1f5f9 !important;
}
/* =============================================
Tailwind Alert (SweetAlert replacement)
============================================= */
html.dark .tw-alert-box {
background-color: #1e293b;
}
html.dark #twAlertTitle {
color: #f1f5f9;
}
html.dark #twAlertText {
color: #94a3b8;
}
/* =============================================
General Hover Overrides
============================================= */
html.dark .hover\:bg-gray-100:hover {
background-color: #334155;
}
html.dark .hover\:bg-gray-50:hover {
background-color: #334155;
}
html.dark .hover\:text-gray-900:hover {
color: #f1f5f9;
}
html.dark .hover\:text-gray-700:hover {
color: #cbd5e1;
}
html.dark .hover\:text-gray-500:hover {
color: #e2e8f0;
}
html.dark .hover\:bg-red-100:hover {
background-color: rgba(127,29,29,0.3);
}
html.dark .hover\:border-red-300:hover {
border-color: rgba(185,28,28,0.5);
}
html.dark .hover\:text-red-600:hover {
color: #f87171;
}
html.dark .hover\:bg-gray-200:hover {
background-color: #475569;
}
/* =============================================
Focus Ring Overrides
============================================= */
html.dark .focus\:ring-primary-500:focus {
--tw-ring-color: #6366f1;
}
html.dark .focus\:border-primary-500:focus {
border-color: #6366f1;
}
html.dark .focus\:ring-primary-100:focus {
--tw-ring-color: rgba(79,70,229,0.3);
}
/* =============================================
Image/Logo handling
============================================= */
/* Dark mode logo swap: hide dark logo by default, swap in dark mode */
.themeLogoDark {
display: none !important;
}
html.dark .themeLogoLight {
display: none !important;
}
html.dark .themeLogoDark {
display: block !important;
}
/* Fallback: if only one logo (no dark variant), apply brightness filter */
html.dark .themeLogoImg:not(.themeLogoLight):not(.themeLogoDark) {
filter: brightness(1.1);
}
html.dark img.themeLogoText {
filter: brightness(1.5);
}
/* =============================================
AdSense / Ad Slot Dark Mode
-----------------------------------------------
Ad slots render with no wrapper styling in light
mode (.aes-ad-slot has no background/border/padding),
so dark mode mirrors that — no slate box, no border,
no rounded corners, no padding. The ad creative
provides its own visual treatment.
============================================= */
/* =============================================
Yellow/Warning Alerts — NT88-NT107 new tools
(bg-yellow-50, text-yellow-800/700 were missing)
============================================= */
html.dark .bg-yellow-50 {
background-color: rgba(120, 53, 15, 0.2);
}
html.dark .border-yellow-200 {
border-color: rgba(161, 98, 7, 0.4);
}
html.dark .text-yellow-800 {
color: #fde68a;
}
html.dark .text-yellow-700 {
color: #fcd34d;
}
html.dark .text-yellow-600 {
color: #fbbf24;
}
/* Blue-800 text (info/tip boxes) */
html.dark .text-blue-800 {
color: #93c5fd;
}
/* Primary-200 border (LSI keyword chips) */
html.dark .border-primary-200 {
border-color: rgba(99, 102, 241, 0.35);
}
html.dark .text-primary-800 {
color: #a5b4fc;
}