mirror of
https://github.com/kogakure/website-astro-stefanimhoff.de.git
synced 2026-02-03 12:05:28 +00:00
52 lines
1.3 KiB
Plaintext
52 lines
1.3 KiB
Plaintext
---
|
|
// Cspell:words clickarea umami
|
|
import { Circle } from './icons';
|
|
---
|
|
|
|
<theme-toggle
|
|
class="col-span-2 col-start-17 flex h-clickarea w-clickarea items-center justify-center self-center justify-self-center md:col-span-1 md:col-start-18 print:hidden"
|
|
>
|
|
<button
|
|
aria-label="Switch color theme"
|
|
class="group flex h-clickarea w-clickarea cursor-pointer items-center justify-center self-center border-0 text-[0]"
|
|
data-umami-event="Switch color theme"
|
|
>
|
|
<Circle
|
|
aria-hidden="true"
|
|
className="icon h-icon w-icon transition-transform duration-500 ease-in-out group-hover:scale-125 group-focus:scale-125"
|
|
/>
|
|
</button>
|
|
</theme-toggle>
|
|
|
|
<script>
|
|
class ThemeToggle extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
const button = this.querySelector('button')!;
|
|
const setTheme = (dark: boolean) => {
|
|
document.documentElement.classList[dark ? 'add' : 'remove']('dark');
|
|
button.setAttribute('aria-pressed', String(dark));
|
|
};
|
|
|
|
button.addEventListener('click', () => {
|
|
setTheme(!this.isDark());
|
|
button.blur();
|
|
});
|
|
|
|
setTheme(this.isDark());
|
|
}
|
|
|
|
isDark() {
|
|
return document.documentElement.classList.contains('dark');
|
|
}
|
|
}
|
|
|
|
customElements.define('theme-toggle', ThemeToggle);
|
|
</script>
|
|
|
|
<style>
|
|
:global(.no-js) theme-toggle {
|
|
display: none;
|
|
}
|
|
</style>
|