63 lines
1.3 KiB
Plaintext
63 lines
1.3 KiB
Plaintext
---
|
|
import Icon from '@components/Icon.astro';
|
|
---
|
|
|
|
|
|
<div class="theme-switcher">
|
|
<button id="switch-to-dark">
|
|
<Icon name="sun" />
|
|
</button>
|
|
<button id="switch-to-light">
|
|
<Icon name="moon" />
|
|
</button>
|
|
</div>
|
|
|
|
|
|
<style>
|
|
.theme-switcher {
|
|
position: relative;
|
|
isolation: isolate;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
|
|
transform: translateY(0.1rem);
|
|
}
|
|
|
|
button {
|
|
position: absolute;
|
|
inset: 0;
|
|
|
|
background-color: transparent;
|
|
padding: 0;
|
|
color: var(--nav-link-color);
|
|
border: none;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
/* hide by default, i.e. if JS isn't enabled and the data-theme attribute didn't get set, */
|
|
display: none;
|
|
}
|
|
|
|
:global(html[data-theme="light"]) button#switch-to-dark {
|
|
display: block;
|
|
}
|
|
|
|
:global(html[data-theme="dark"]) button#switch-to-light {
|
|
display: block;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.getElementById('switch-to-dark')?.addEventListener('click', () => {
|
|
localStorage.setItem('theme-preference', 'dark');
|
|
document.documentElement.dataset.theme = 'dark';
|
|
});
|
|
document.getElementById('switch-to-light')?.addEventListener('click', () => {
|
|
localStorage.setItem('theme-preference', 'light');
|
|
document.documentElement.dataset.theme = 'light';
|
|
})
|
|
</script>
|