<script setup lang="ts">
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";

import dayIcon from "@/assets/svg/day.svg?component";
import darkIcon from "@/assets/svg/dark.svg?component";

const { dataTheme, dataThemeChange } = useDataThemeChange();

function handleThemeToggle() {
  dataTheme.value = !dataTheme.value;
  dataThemeChange();
}
</script>

<template>
  <button
    type="button"
    class="header-dark-switch navbar-bg-hover"
    title="切换暗黑模式"
    aria-label="切换暗黑模式"
    @click="handleThemeToggle"
  >
    <component
      :is="dataTheme ? dayIcon : darkIcon"
      class="header-dark-switch__icon"
    />
  </button>
</template>

<style lang="scss" scoped>
.header-dark-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 48px;
  padding: 0;
  color: var(--el-text-color-primary);
  cursor: pointer;
  background: transparent;
  border: 0;
  outline: none;
}

.header-dark-switch__icon {
  width: 16px;
  height: 16px;
  fill: currentcolor;
}

:global(html.dark) .header-dark-switch {
  color: #fff;
}
</style>
