fix: theme color (#85)

.gitignore

@@ -24,4 +24,8 @@ pnpm-debug.log*
 .idea/
 
 # vercel output directory
-.vercel/
+.vercel/
+
+# yalc
+.yalc/
+yalc.lock

.vscode/settings.json

@@ -11,6 +11,9 @@
   "[javascriptreact]": {
     "editor.defaultFormatter": "biomejs.biome"
   },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
   "editor.codeActionsOnSave": {
     "quickfix.biome": "explicit",
     "source.organizeImports.biome": "explicit"

package.json

@@ -19,7 +19,7 @@
     "@astrojs/sitemap": "^3.2.0",
     "@astrojs/tailwind": "^5.1.2",
     "@astrojs/vercel": "8.0.0-beta.2",
-    "@rqbazan/set-initial-color-mode": "^1.2.1",
+    "@rqbazan/set-initial-color-mode": "^1.3.0",
     "@unpic/astro": "^0.0.46",
     "@unpic/pixels": "^1.2.2",
     "@unpic/placeholder": "^0.1.2",

public/site.webmanifest

@@ -13,7 +13,6 @@
       "type": "image/png"
     }
   ],
-  "theme_color": "#101010",
   "background_color": "#101010",
   "display": "standalone"
 }

src/layouts/default/components/seo.astro

@@ -49,10 +49,44 @@ const canonicalUrl = getCanonicalUrl(Astro.url);
 <link rel="canonical" href={canonicalUrl} />
 <link rel="sitemap" href="/sitemap-index.xml" />
 
-<link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
+<link
+  rel="apple-touch-icon"
+  sizes="180x180"
+  href="/images/apple-touch-icon.png"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="32x32"
+  href="/images/favicon-32x32.png"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="16x16"
+  href="/images/favicon-16x16.png"
+/>
 <link rel="icon" href="/favicon.ico" />
 
-<meta name="apple-mobile-web-app-title" content="rcrd">
-<link rel="manifest" href="/site.webmanifest">
+<meta name="apple-mobile-web-app-title" content="rcrd" />
+<link rel="manifest" href="/site.webmanifest" />
+
+<meta name="theme-color" />
+
+<script is:inline>
+  const { STORAGE_KEY, CUSTOM_EVENT_NAME, DARK } = __COLOR_MODE__;
+
+  const themeColorEl = document.querySelector("meta[name=theme-color]");
+
+  function onColorModeChange(colorMode) {
+    const newContent = colorMode === DARK ? "#101010" : "#FFF6E3";
+    themeColorEl.setAttribute("content", newContent);
+  }
+
+  document.addEventListener(CUSTOM_EVENT_NAME, (e) => {
+    onColorModeChange(e.detail.colorMode);
+  });
+
+  const colorMore = localStorage.getItem(STORAGE_KEY);
+  onColorModeChange(colorMore);
+</script>