juyung/devscard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: change theme-color dynamically (#185)

Browse source
This commit is contained in:
Szymon Kin 2023-01-29 12:28:05 +01:00 committed by GitHub
parent 85e2437300
commit 7399d6d386
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/web/components/theme-toggle.astro
View file

@ -17,6 +17,11 @@ import Icon from './icon.astro';
const toggleTheme = () => { const toggleTheme = () => {
const theme = localStorage.getItem('theme') ?? 'light'; const theme = localStorage.getItem('theme') ?? 'light';
const newTheme = theme === 'light' ? 'dark' : 'light'; const newTheme = theme === 'light' ? 'dark' : 'light';
const themeMeta = document.getElementsByName('theme-color') as NodeListOf<HTMLMetaElement>;
if (themeMeta[0]) {
themeMeta[0].content = newTheme === 'dark' ? '#1a202c' : '#ffffff';
}
document.documentElement.classList[newTheme === 'dark' ? 'add' : 'remove']('dark'); document.documentElement.classList[newTheme === 'dark' ? 'add' : 'remove']('dark');
localStorage.setItem('theme', newTheme); localStorage.setItem('theme', newTheme);

6
src/web/head/initial-theme.astro
View file

@ -6,6 +6,12 @@
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
})(); })();
const themeMeta = document.getElementsByName('theme-color');
if (themeMeta[0]) {
themeMeta[0].content = theme === 'dark' ? '#1a202c' : '#ffffff';
}
if (theme === 'light') { if (theme === 'light') {
document.documentElement.classList.remove('dark'); document.documentElement.classList.remove('dark');
} else { } else {