kunthawat/moreminimore-astroreal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(theme): switch to .dark class (Astro/Vite strips [data-theme] selectors)

Browse Source 
ROOT CAUSE found via build artifact analysis:
- Built CSS files (dist/_astro/Base.*.css) had ZERO [data-theme='dark']
  selectors even though source had 17. Astro/Vite CSS optimizer
  strips attribute selectors that don't match any static HTML attribute
  (we set data-theme dynamically via JS, not in JSX/HTML).
- Also stripped: all html { } and body { } rules from source.
- Result: dark mode visually did nothing. Body stayed white.

FIX:
- Replace [data-theme='dark'] with html.dark (17 occurrences in
  fx-system.css). Vite keeps .dark class selectors because the
  anti-flash script (in Base.astro <head>) sets a class, not an
  attribute, which Vite sees as 'used'.
- Update anti-flash script in Base.astro: classList.add/remove
  instead of setAttribute('data-theme', ...).
- Update UtilityBar.astro applyTheme() to use classList too.
- Restore body { background: var(--body-bg) } override (was stripped
  by Vite as 'unused' — but now html.dark applies to it correctly).

ALSO FIXED theme toggle button visibility (from previous turn):
- Removed v7-5 base .fx-theme-toggle rule (rgba(0.1) opacity made
  button invisible — only visible on hover).
- Consolidated into single rule with proper contrast for both modes.

Verified by:
- Build complete: 22 pages, 1.97s
- Built CSS: 17 html.dark selectors present (was 0)
- Body background override present in built CSS
- HTTP server on :4322 serving correct artifacts
This commit is contained in:
Kunthawat Greethong
2026-06-14 09:41:32 +07:00
parent 96caca4af6
commit caab40d9a4
3 changed files with 102 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/UtilityBar.astro
View File

@@ -64,7 +64,12 @@ const email = site?.data?.email ?? 'contact@moreminimore.com';
function applyTheme(mode: ThemeMode) {
const eff = effectiveTheme(mode);
document.documentElement.setAttribute('data-theme', eff);
// Use class instead of data-theme (Astro/Vite keeps .dark selectors)
if (eff === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
const indicator = document.getElementById('fx-mode-indicator');
const btn = document.getElementById('fx-theme-toggle');
if (indicator) indicator.textContent = mode; // shows user's chosen mode (not effective)