<template>
  <div @click="isDark = !isDark" title="主题切换">
    <slot :isDark="isDark">
      <w-icon icon-class="lb" style="margin-right: 0.2em" />{{
        isDark ? "暗" : "亮"
      }}</slot
    >
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
const isDark = ref(document.documentElement.classList.contains("dark"));
watch(
  () => isDark.value,
  (val) => {
    document.documentElement.classList.toggle("dark", val);
    localStorage.setItem("isDark", val);
  }
);
onMounted(() => {
  let darkStr = localStorage.getItem("isDark");
  if(darkStr) {
    isDark.value = darkStr === "true";
  }else {
    isDark.value = window.matchMedia('(prefers-color-scheme: dark)').matches;
  }
});
</script>