maciejpedzich/cats-album
1
0
Fork 0
mirror of https://github.com/maciejpedzich/cats-album.git synced 2024-11-27 22:35:47 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor theme switcher's logic

Browse Source
This commit is contained in:
Maciej Pędzich 2023-09-04 15:13:48 +02:00
parent 439eeae468
commit abd389fbfb
1 changed files with 21 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/ThemeSwitch.astro
View File

@ -30,6 +30,23 @@ const themeSwitchDarkIcon = document.getElementById('theme-switch-dark-icon');
const themeSwitchLightIcon = document.getElementById( const themeSwitchLightIcon = document.getElementById(
'theme-switch-light-icon' 'theme-switch-light-icon'
); );
const applyTheme = (theme) => {
localStorage.setItem('theme', theme);
themeSwitch.setAttribute(
'title',
`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`
);
if (theme === 'dark') {
document.body.classList.add('dark');
themeSwitchLightIcon.classList.remove('hidden');
themeSwitchDarkIcon.classList.add('hidden');
} else {
document.body.classList.remove('dark');
themeSwitchLightIcon.classList.add('hidden');
themeSwitchDarkIcon.classList.remove('hidden');
}
};
if ( if (
!localStorage.getItem('theme') && !localStorage.getItem('theme') &&
@ -39,30 +56,11 @@ if (
localStorage.setItem('theme', 'dark'); localStorage.setItem('theme', 'dark');
} }
if (localStorage.getItem('theme') === 'dark') { applyTheme(localStorage.getItem('theme') || 'light');
document.body.classList.add('dark');
themeSwitchLightIcon.classList.remove('hidden');
themeSwitchDarkIcon.classList.add('hidden');
themeSwitch.setAttribute('title', 'Switch to light theme');
}
themeSwitch.addEventListener('click', () => { themeSwitch.addEventListener('click', () =>
const currentTheme = localStorage.getItem('theme'); applyTheme(localStorage.getItem('theme') === 'dark' ? 'light' : 'dark')
);
if (currentTheme === 'dark') {
localStorage.setItem('theme', 'light');
document.body.classList.remove('dark');
themeSwitchLightIcon.classList.add('hidden');
themeSwitchDarkIcon.classList.remove('hidden');
themeSwitch.setAttribute('title', 'Switch to dark theme');
} else {
localStorage.setItem('theme', 'dark');
document.body.classList.add('dark');
themeSwitchLightIcon.classList.remove('hidden');
themeSwitchDarkIcon.classList.add('hidden');
themeSwitch.setAttribute('title', 'Switch to light theme');
}
});
</script> </script>
<style> <style>