From 2dce4b3e8fbcf64f85ed6b66dc0f450e3cd6af65 Mon Sep 17 00:00:00 2001
From: catlog22 <catlog22@github.com>
Date: Mon, 2 Mar 2026 17:47:27 +0800
Subject: [PATCH] fix(docs): resolve hydration mismatch and favicon 404 issues

- Add minimal theme preload script to prevent FOUC
- Fix favicon path to use base variable for GitHub Pages
- Theme script only sets data-theme attribute (no color mode)
- Maintains SSR/client consistency while eliminating flash

Fixes:
- Hydration mismatch error from localStorage access before Vue mount
- Favicon 404 on GitHub Pages deployment
- FOUC when theme applies after hydration

The new script is minimal and safe:
- Runs synchronously in head (before render)
- Only reads localStorage and sets attribute
- Matches what ThemeSwitcher.vue will do after mount
- No DOM manipulation that could cause mismatch
---
 docs/.vitepress/config.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index a8e35ab6..3c6b21d7 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -20,6 +20,16 @@ export default withMermaid(defineConfig({
   ignoreDeadLinks: true,
   head: [
     ['link', { rel: 'icon', href: `${base}favicon.svg`, type: 'image/svg+xml' }],
+    [
+      'script',
+      {},
+      `(function() {
+  try {
+    var theme = localStorage.getItem('ccw-theme') || 'blue';
+    document.documentElement.setAttribute('data-theme', theme);
+  } catch (e) {}
+})()`
+    ],
     ['meta', { name: 'theme-color', content: '#3b82f6' }],
     ['meta', { name: 'og:type', content: 'website' }],
     ['meta', { name: 'og:locale', content: 'en_US' }],