75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { themeConfig } from "../theme.config"
|
|
|
|
const htmlElement = document.querySelector("html")
|
|
const lightMode = themeConfig.light
|
|
const darkMode = themeConfig.dark
|
|
|
|
const isInitiallyDark = JSON.parse(localStorage.getItem("is-dark") ?? "false")
|
|
|
|
if (htmlElement) {
|
|
htmlElement.dataset.theme = isInitiallyDark ? darkMode : lightMode
|
|
}
|
|
|
|
const toggle = (isChecked: boolean) => {
|
|
localStorage.setItem("is-dark", isChecked ? "true" : "false")
|
|
|
|
if (!htmlElement) {
|
|
return
|
|
}
|
|
|
|
htmlElement.dataset.theme = isChecked ? darkMode : lightMode
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<label class="toggle text-base-content">
|
|
<input
|
|
type="checkbox"
|
|
:value="darkMode"
|
|
:checked="isInitiallyDark"
|
|
class="theme-controller"
|
|
@click="(e) => toggle((e.target as HTMLInputElement)?.checked)"
|
|
/>
|
|
|
|
<svg
|
|
aria-label="sun"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<g
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
stroke-width="2"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
>
|
|
<circle cx="12" cy="12" r="4"></circle>
|
|
<path d="M12 2v2"></path>
|
|
<path d="M12 20v2"></path>
|
|
<path d="m4.93 4.93 1.41 1.41"></path>
|
|
<path d="m17.66 17.66 1.41 1.41"></path>
|
|
<path d="M2 12h2"></path>
|
|
<path d="M20 12h2"></path>
|
|
<path d="m6.34 17.66-1.41 1.41"></path>
|
|
<path d="m19.07 4.93-1.41 1.41"></path>
|
|
</g>
|
|
</svg>
|
|
<svg
|
|
aria-label="moon"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<g
|
|
stroke-linejoin="round"
|
|
stroke-linecap="round"
|
|
stroke-width="2"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
>
|
|
<path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path>
|
|
</g>
|
|
</svg>
|
|
</label>
|
|
</template>
|