<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();
</script>

<template>
  <span class="header-dark-switch navbar-bg-hover" title="切换暗黑模式">
    <el-switch
      v-model="dataTheme"
      inline-prompt
      :active-icon="dayIcon"
      :inactive-icon="darkIcon"
      @change="dataThemeChange"
    />
  </span>
</template>

<style lang="scss" scoped>
.header-dark-switch {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 10px;
}
</style>
