Fix header theme hydration mismatch

[SeoFood]

Summary

• Keep header markup stable across SSR and first client render by moving light/dark differences to Tailwind dark: classes.
• Render both theme toggle icons and let CSS show the correct one, avoiding React hydration mismatches when a stored light theme exists.
• Add a Playwright regression test that loads an add-on page with localStorage.theme = light and asserts React #418 is not emitted.

Root cause

The server rendered the header as dark because window is unavailable during SSR, but the client's first render read localStorage / prefers-color-scheme and could render the light header immediately. That changed the initial DOM and triggered React hydration error #418.

Tests

• npm run test:i18n
• npm run test:unit
• npm run build
• npm run test:e2e -- tests/theme-consistency.spec.ts
• npm run test:e2e
• Astro Preview repro on /en/addons/reson8/ with stored light theme: 0 console errors

Summary by CodeRabbit

• Refactor

  • Simplified header component styling logic and theme toggle rendering

• Tests

  • Enhanced theme consistency validation with improved test coverage and error detection mechanisms

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 314e31b5-340e-4207-9673-5ff0bf18c019

📥 Commits

Reviewing files that changed from the base of the PR and between 6f23b74 and 715590b.

📒 Files selected for processing (2)

• src/components/layout/header.tsx
• tests/theme-consistency.spec.ts

---

📝 Walkthrough

Walkthrough

The Header component's theme toggle mechanism is refactored to rely on Tailwind's dark: CSS variants instead of the theme hook value. The hook now yields only toggleTheme, header styling uses static classes with dark-mode prefixes, and both desktop and mobile toggle buttons render icon pairs controlled by Tailwind utilities. Tests gain a helper to validate header background color and confirm light-theme persistence without React hydration errors.

Changes

Header Theme Toggle Refactoring

Layer / File(s)	Summary
Header component refactoring to Tailwind dark variants src/components/layout/header.tsx	Header removes theme from useTheme destructuring and replaces theme-dependent conditionals with static Tailwind classes using dark: variants. Desktop and mobile theme toggle buttons now always render both Sun and Moon icons, with visibility controlled via Tailwind utilities instead of JavaScript branching.
Test helper and theme validation assertions tests/theme-consistency.spec.ts	New expectHeaderBackground(page, theme) helper validates header computed backgroundColor against dark or light theme color formats. Dark and light landing-page tests replace class-presence checks with the new helper. A new "stored light theme behavior" suite confirms light theme persists across navigation, captures and filters console errors to detect React #418 mismatches, and verifies header background matches light mode.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 The header now dances in dark and light,
With Tailwind's dark: variants shining bright,
No theme props needed, just styles that bend,
Tests verify the color blend—
A cleaner toggle, end to end! 🌙☀️

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Fix header theme hydration mismatch' directly and clearly summarizes the main change—addressing a React hydration mismatch in the header's theme rendering. It is concise, specific, and accurately reflects the primary objective of the changeset.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch seofood/fix-header-hydration

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0