c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

Making multiple theme switches possible

Browse Source
This commit is contained in:
Daniel Kluge 2023-12-17 00:28:24 +01:00
parent a7122a1e34
commit 54b4311b4d
1 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/LayoutComponents/ThemeSwitch.astro
View File

@ -3,45 +3,45 @@ import { Icon } from "astro-icon";
--- ---
<div class="switch"> <div class="switch">
<Icon name="mdi:language-javascript" class="placeHolder" title="Theme switching needs JS to be enabled."/> <Icon name="mdi:language-javascript" title="Theme switching needs JS to be enabled." data-theme-ph />
<Icon name="mdi:white-balance-sunny" class="sun" title="Switch to dark theme" /> <Icon name="mdi:white-balance-sunny" title="Switch to dark theme" data-theme-sun />
<Icon name="mdi:weather-night" class="moon" title="Switch to light theme" /> <Icon name="mdi:weather-night" title="Switch to light theme" data-theme-moon />
</div> </div>
<script lang="ts"> <script>
// Get and delete placeholder (JS is enabled) // Get and delete placeholder (JS is enabled)
const placeHolder = document.querySelector(".placeHolder"); const placeHolder = document.querySelectorAll("[data-theme-ph]");
placeHolder.remove(); placeHolder.forEach(e => e.remove());
const moon = document.querySelector(".moon"); const moons = document.querySelectorAll("[data-theme-moon]");
const sun = document.querySelector(".sun"); const suns = document.querySelectorAll("[data-theme-sun]");
const current = document.documentElement.attributes.getNamedItem('data-theme')?.value ?? "dark"; const current = document.documentElement.attributes.getNamedItem('data-theme')?.value ?? "dark";
if (current === "dark") { if (current === "dark") {
moon.classList.add("selected"); moons.forEach(m => m.classList.add("selected"));
} else { } else {
sun.classList.add("selected"); suns.forEach(s => s.classList.add("selected"));
} }
const switchThemeDark = () => { const switchThemeDark = () => {
document.dispatchEvent(new CustomEvent('set-theme', { detail: 'dark' })); document.dispatchEvent(new CustomEvent('set-theme', { detail: 'dark' }));
moon.classList.remove("fadeOut"); moons.forEach(m => m.classList.remove("fadeOut"));
moon.classList.add("fadeIn"); moons.forEach(m => m.classList.add("fadeIn"));
sun.classList.remove("fadeIn"); suns.forEach(s => s.classList.remove("fadeIn"));
sun.classList.add("fadeOut"); suns.forEach(s => s.classList.add("fadeOut"));
} }
const switchThemeLight = () => { const switchThemeLight = () => {
document.dispatchEvent(new CustomEvent('set-theme', { detail: 'light' })); document.dispatchEvent(new CustomEvent('set-theme', { detail: 'light' }));
moon.classList.remove("fadeIn"); moons.forEach(m => m.classList.remove("fadeIn"));
moon.classList.add("fadeOut"); moons.forEach(m => m.classList.add("fadeOut"));
sun.classList.remove("fadeOut"); suns.forEach(s => s.classList.remove("fadeOut"));
sun.classList.add("fadeIn"); suns.forEach(s => s.classList.add("fadeIn"));
} }
moon.addEventListener("click", switchThemeLight); moons.forEach(m => m.addEventListener("click", switchThemeLight));
sun.addEventListener("click", switchThemeDark); suns.forEach(s => s.addEventListener("click", switchThemeDark));
</script> </script>
<style lang="scss"> <style lang="scss">
.switch { .switch {