<template>
  <div class="">
    <t-tooltip placement="bottom" :content="themeLabel">
      <div class="theme-change" @click="changeTheme">
        <ThemeLightSvg v-if="theme === 'dark'" class="icon"></ThemeLightSvg>
        <ThemeDarkSvg v-else class="icon"></ThemeDarkSvg>
      </div>
    </t-tooltip>
  </div>
</template>

<script lang="ts" setup>
import ThemeLightSvg from '/public/images/svg/header/theme-light.svg';
import ThemeDarkSvg from '/public/images/svg/header/theme-dark.svg';

// 当前主题
const theme = useCurTheme();
const themeLabel = computed(() => {
  return theme.value === 'light' ? '点击切换夜间模式' : '点击切换白天模式';
});
const changeTheme = () => {
  if (theme.value === 'light') {
    theme.value = 'dark';
  } else {
    theme.value = 'light';
  }
  document.documentElement.setAttribute('theme-mode', theme.value);
};
</script>

<style lang="less" scoped>
@import '@/style/flex.less';
.theme-change {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  .dja();
  cursor: pointer;
  margin-right: 12px;
  &:hover {
    background-color: var(--td-bg-color-container-hover);
  }
  .icon {
    width: 24px;
    height: 24px;
  }
}
</style>
