ray
67 lines
3.0 KiB
Markdown
67 lines
3.0 KiB
Markdown
# Force Dark Mode via CSS Overrides
|
|
|
|
## When to Use
|
|
|
|
The user wants the site to **always look like dark mode** regardless of:
|
|
- The `.dark` class being toggled on/off
|
|
- The `prefers-color-scheme` system setting
|
|
- The dark mode toggle switch being flipped
|
|
|
|
## Approach
|
|
|
|
Instead of editing every `dark:` Tailwind variant across all pages (fragile, tedious), use CSS `!important` overrides in a shared stylesheet (e.g., `style.css`). These override the light-mode base classes so they render with dark-mode colors.
|
|
|
|
## The Override Block
|
|
|
|
```css
|
|
/* Force dark mode colors regardless of .dark class */
|
|
body {
|
|
background: #111827 !important;
|
|
color: #e5e7eb !important;
|
|
}
|
|
|
|
/* Common background classes — map to dark slate */
|
|
.bg-white { background-color: #1f2937 !important; }
|
|
[class*="bg-white "] { background-color: #1f2937 !important; }
|
|
[class*="bg-white/"] { background-color: rgba(31, 41, 55, 0.8) !important; }
|
|
|
|
.bg-gray-50 { background-color: #111827 !important; }
|
|
.bg-gray-100 { background-color: #1f2937 !important; }
|
|
|
|
/* Text colors — map to light text */
|
|
.text-gray-900 { color: #f9fafb !important; }
|
|
.text-gray-800 { color: #f3f4f6 !important; }
|
|
.text-gray-700 { color: #d1d5db !important; }
|
|
.text-gray-600 { color: #9ca3af !important; }
|
|
.text-gray-500 { color: #9ca3af !important; }
|
|
|
|
/* Border colors — map to dark borders */
|
|
.border-gray-200 { border-color: #374151 !important; }
|
|
.border-gray-100 { border-color: #374151 !important; }
|
|
|
|
/* Shadows — make them dark-ambient */
|
|
.shadow-lg, .shadow-xl, .shadow-md, .shadow-sm {
|
|
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.3) !important;
|
|
}
|
|
|
|
/* Gradient backgrounds — used for page backgrounds */
|
|
[class*="from-gray-50"], [class*="to-gray-100"] {
|
|
background: #111827 !important;
|
|
}
|
|
|
|
/* Card-specific overrides */
|
|
.dashboard-card, .metric-card, .modern-card {
|
|
background: #1e293b !important;
|
|
border-color: #334155 !important;
|
|
}
|
|
```
|
|
|
|
## Pitfalls
|
|
|
|
1. **Specificity issues** — The `[class*="..."]` attribute selectors may be needed to match compound classes like `bg-white/10` which contain `/` and don't match `.bg-white` alone.
|
|
2. **Inline styles** — CSS with `!important` in the stylesheet still won't override inline `style="background: white"` on the element. Those need to be edited at the HTML level.
|
|
3. **Tailwind dynamic classes** — If Tailwind JIT generates classes at runtime (e.g., `bg-[#123456]`), they bypass the override block. Use `!important` on the specific selector.
|
|
4. **Box shadows** — Tailwind shadow utilities like `shadow-lg` use color-specific box-shadows. The override block replaces them all with a single dark shadow, which may look slightly different than the original dark-mode shadows.
|
|
5. **Backdrop filters** — Elements with `backdrop-filter: blur(...)` may still show through with unintended colors. Check these manually.
|
|
6. **The toggle still functions** — The `.dark` class can still be toggled on/off, it just won't produce visual changes anymore. If you want to fully disable the toggle, hide it with `display: none` or set `pointer-events: none`.
|