wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update theme color onClick

Browse source
This commit is contained in:
madrilene 2024-06-25 15:18:00 +02:00
parent ff75f1543a
commit d23bc96fce
1 changed files with 10 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/assets/scripts/bundle/theme-toggle.js
View file

@ -20,7 +20,7 @@ window.onload = () => {
}
reflectPreference();
updateThemeColor();
updateMetaThemeColor();
lightThemeToggle.addEventListener('click', () => onClick('light'));
darkThemeToggle.addEventListener('click', () => onClick('dark'));
@ -33,6 +33,7 @@ window.onload = () => {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ({matches: isDark}) => {
theme.value = isDark ? 'dark' : 'light';
setPreference();
updateMetaThemeColor();
});
function onClick(themeValue) {
@ -40,6 +41,7 @@ function onClick(themeValue) {
document.querySelector('#light-theme-toggle').setAttribute('aria-pressed', themeValue === 'light');
document.querySelector('#dark-theme-toggle').setAttribute('aria-pressed', themeValue === 'dark');
setPreference();
updateMetaThemeColor();
}
function getColorPreference() {
@ -53,6 +55,7 @@ function getColorPreference() {
function setPreference() {
localStorage.setItem(storageKey, theme.value);
reflectPreference();
updateMetaThemeColor();
}
function reflectPreference() {
@ -61,10 +64,12 @@ function reflectPreference() {
document.querySelector('#dark-theme-toggle')?.setAttribute('aria-label', darkLabel);
}
function updateThemeColor() {
document
.querySelector('meta[name="theme-color"]')
.setAttribute('content', theme.value === 'dark' ? themeColors.dark : themeColors.light);
function updateMetaThemeColor() {
console.log('Updating theme color to:', theme.value);
const metaThemeColor = document.querySelector('meta[name="theme-color"]');
const newColor = theme.value === 'dark' ? themeColors.dark : themeColors.light;
console.log('New meta theme color:', newColor);
metaThemeColor.setAttribute('content', newColor);
}
// set early so no page flashes / CSS is made aware