From a5b99db1ed4dbd8579c1bc49eca3c738add11750 Mon Sep 17 00:00:00 2001
From: "Ricardo Q. Bazan" <raquirozbazan@gmail.com>
Date: Mon, 18 Nov 2024 19:46:55 -0500
Subject: [PATCH] fix: theme color
---
.gitignore | 6 +++-
.vscode/settings.json | 3 ++
bun.lockb | Bin 347818 -> 347818 bytes
package.json | 2 +-
public/site.webmanifest | 1 -
src/layouts/default/components/seo.astro | 43 ++++++++++++++++++++---
6 files changed, 47 insertions(+), 8 deletions(-)
diff --git a/.gitignore b/.gitignore
index 94de5c0..3cef4c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,4 +24,8 @@ pnpm-debug.log*
.idea/
# vercel output directory
-.vercel/
\ No newline at end of file
+.vercel/
+
+# yalc
+.yalc/
+yalc.lock
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 43b4722..ef48351 100644
--- a/.vscode/settings.json
+++ b/.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"
diff --git a/bun.lockb b/bun.lockb
index 7886ecb266b2f482931e3c49402e6c856a9fab20..726dc5f22358e8df98fadfbee42f15466997fcd9 100755
GIT binary patch
delta 167
zcmV;Y09gO3ofWE`6_73<F&L^%d{hm69&g^fMO&YzmM=3lI38My6Ie$3<scFUu}+4^
zlN38Ng9ymC2*?5TK|sOyAO&#&??oAuH9tF|vW#Hc<|m3lM2<UN;9w7KarwsR<v!Y3
zfciT2F1qq)VOC8b>4cn8mlv>Ty#M0ur1ghA3Iex13Ik$#2Lb>900000ho*!Bx2A*y
VB6633Rs<rKPT&LyxAXP{w^uEdM%w@Y
delta 167
zcmV;Y09gO3ofWE`6_73<B9p@BY9f@TMnQ~*93I+4?5x~V$XXZ<r@TQZtXUPTu}+4^
zlN3BOg9ymC2*?5TK|lpdZjO^+;+GUMWA7Z|lH2Q0qaCCL9F%p|lo`l3UVMv*k)OWF
zfdD4KcT>-%d4T!Z(`o)hk?L$$d7ZOc!or6=3Iex13Ik$#2LWC&E;24Lho*!Bx2A*y
VB662wIt3z^PT&LyxAXP{w^#7aN|68n
diff --git a/package.json b/package.json
index 06d6a80..d5a22fc 100644
--- a/package.json
+++ b/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",
diff --git a/public/site.webmanifest b/public/site.webmanifest
index 4979b94..d161b3b 100644
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -13,7 +13,6 @@
"type": "image/png"
}
],
- "theme_color": "#101010",
"background_color": "#101010",
"display": "standalone"
}
diff --git a/src/layouts/default/components/seo.astro b/src/layouts/default/components/seo.astro
index 1c5493f..4563809 100644
--- a/src/layouts/default/components/seo.astro
+++ b/src/layouts/default/components/seo.astro
@@ -49,10 +49,43 @@ 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__;
+
+ function onColorModeChange(colorMode) {
+ document
+ .querySelector("meta[name=theme-color]")
+ .setAttribute("content", colorMode === DARK ? "#101010" : "#FFF6E3");
+ }
+
+ document.addEventListener(CUSTOM_EVENT_NAME, (e) => {
+ onColorModeChange(e.detail.colorMode);
+ });
+
+ const colorMore = localStorage.getItem(STORAGE_KEY);
+ onColorModeChange(colorMore);
+</script>