This commit is contained in:
Thomas Chartron 2021-11-06 12:50:13 +01:00
parent 14dabe1b3d
commit cdb1ae5c8f
2 changed files with 10 additions and 6 deletions

View file

@ -22,10 +22,14 @@ function switchTheme() {
console.log("called") console.log("called")
let current_theme = ([...document.documentElement.classList].includes('dark')) ? 'dark' : 'light'; let current_theme = ([...document.documentElement.classList].includes('dark')) ? 'dark' : 'light';
if (current_theme === 'dark') { if (current_theme === 'dark') {
localStorage.theme = 'light' localStorage.theme = 'light';
document.documentElement.classList.remove('dark') document.documentElement.classList.remove('dark');
document.getElementById('dark').add('hidden');
document.getElementById('light').remove('hidden');
} else { } else {
localStorage.theme = 'dark' localStorage.theme = 'dark';
document.documentElement.classList.add('dark') document.documentElement.classList.add('dark');
document.getElementById('light').remove('hidden');
document.getElementById('dark').add('hidden');
} }
} }

View file

@ -62,11 +62,11 @@
<button id="switch-theme" type="button" class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"> <button id="switch-theme" type="button" class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">Switch Theme</span> <span class="sr-only">Switch Theme</span>
<!-- Heroicon name: outline/light --> <!-- Heroicon name: outline/light -->
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg id="light" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg> </svg>
<!-- Heroicon name: outline/dark --> <!-- Heroicon name: outline/dark -->
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <svg id="dark" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
</svg> </svg>
</button> </button>