zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(website): update favicon and theme color based on dark mode

Browse Source
This commit is contained in:
Darius Cepulis
2025-10-27 14:45:21 -05:00
parent 19ca2385f5
commit 9eacedc484
5 changed files with 35 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/public/favicon-dark.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

website/public/favicon-dark.svg
+7
View File
@@ -0,0 +1,7 @@
<svg viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg">
<path fill="#fcb116" d="M0 0h90v90H0z" />
<path fill="#f26222" d="M0 22.5h90V90H0z" />
<path fill="#ea3837" d="M0 45h90v45H0z" />
<path fill="#a83b71" d="M0 67.5h90V90H0z" />
<path d="M71.954 45L28.046 73.125v-56.25L71.954 45z" fill="#2a2928" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 324 B

website/src/components/ThemeInit.astro
+15
View File
@@ -15,12 +15,27 @@ import { THEME_KEY } from '@/consts';
localStorage[localStorageKey] = 'system';
localStorageValue = 'system';
}
let isDark = false;
if (localStorageValue === 'dark') {
document.documentElement.classList.add('dark');
isDark = true;
} else if (localStorageValue === 'system') {
if (typeof window.matchMedia !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
isDark = true;
}
}
const themeColorMeta = document.querySelector('meta[name="theme-color"]');
if (themeColorMeta) {
themeColorMeta.setAttribute('content', isDark ? '#393836' : '#ebe4c1');
}
const svgFavicon = document.querySelector('link[rel="icon"][type="image/svg+xml"]');
const icoFavicon = document.querySelector('link[rel="icon"][sizes="32x32"]');
if (svgFavicon) {
svgFavicon.setAttribute('href', isDark ? '/favicon-dark.svg' : '/favicon.svg');
}
if (icoFavicon) {
icoFavicon.setAttribute('href', isDark ? '/favicon-dark.ico' : '/favicon.ico');
}
}
</script>
website/src/components/ThemeToggle.tsx
+12 -3
View File
@@ -74,11 +74,20 @@ export function ThemeToggle() {
};
}, [preference]);
// Keep document.documentElement in sync with theme
// Keep document.documentElement, theme-color, and favicons in sync with theme
useEffect(() => {
if (typeof document === 'undefined') return;
if (theme === 'light') document.documentElement.classList.remove('dark');
else if (theme === 'dark') document.documentElement.classList.add('dark');
if (theme === 'light') {
document.documentElement.classList.remove('dark');
document.querySelector('meta[name="theme-color"]')?.setAttribute('content', '#ebe4c1');
document.querySelector('link[rel="icon"][type="image/svg+xml"]')?.setAttribute('href', '/favicon.svg');
document.querySelector('link[rel="icon"][sizes="32x32"]')?.setAttribute('href', '/favicon.ico');
} else if (theme === 'dark') {
document.documentElement.classList.add('dark');
document.querySelector('meta[name="theme-color"]')?.setAttribute('content', '#393836');
document.querySelector('link[rel="icon"][type="image/svg+xml"]')?.setAttribute('href', '/favicon-dark.svg');
document.querySelector('link[rel="icon"][sizes="32x32"]')?.setAttribute('href', '/favicon-dark.ico');
}
return () => {
document.documentElement.classList.remove('dark');
website/src/layouts/Base.astro
+1
View File
@@ -31,6 +31,7 @@ const fullTitle = Array.isArray(title)
{/* Global Metadata */}
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#ebe4c1" />
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />