1. <template>
    2.   <div @click="changeTheme" class="theme">
    3.     <img :src="themepicture[0]" alt="" v-if="nowtheme == 'light'" />
    4.     <img :src="themepicture[1]" alt="" v-if="nowtheme !== 'light'" />
    5.     <span v-if="nowtheme == 'light'" class="word">晨间模式</span>
    6.     <span v-if="nowtheme !== 'light'" class="word">夜间模式</span>
    7.   </div>
    8. </template>
    10. <script lang="ts" setup>
    11. import { useDark, useToggle } from "@vueuse/core";
    12. import { ElMessage } from "element-plus";
    13. import { computed, nextTick, onMounted, ref } from "vue";
    15. let themepicture = [
    16.   "src/assets/picture/light.png",
    17.   "src/assets/picture/dark.png",
    18. ];
    19. let starttheme = computed(() => {
    20.   if (window.localStorage.getItem("vueuse-color-scheme") == "auto") {
    21.     return "light";
    22.   } else if (window.localStorage.getItem("vueuse-color-scheme") == "dark") {
    23.     return "dark";
    24.   }
    25. });
    26. let nowtheme = ref(starttheme.value);
    27. const isDark = useDark({
    28.   selector: "html", //class渲染的标签
    29.   valueDark: "dark", //暗黑class名字
    30.   valueLight: "light", //高亮class名字
    31. });
    32. const toggleDark = useToggle(isDark);
    33. let getThemePicture = function () {
    34.   console.log(window.localStorage.getItem("vueuse-color-scheme"));
    35.   console.log(window.localStorage.getItem("vueuse-color-scheme") == "light");
    36.   console.log(starttheme.value);
    38.   console.log(nowtheme.value);
    40.   if (nowtheme.value == "dark") {
    41.   } else if (nowtheme.value == "light") {
    42.   }
    43. };
    44. getThemePicture();
    46. let changeThemePicture = function () {
    47.   if (nowtheme.value == "dark") {
    48.     nowtheme.value = "light";
    49.   } else if (nowtheme.value == "light") {
    50.     nowtheme.value = "dark";
    51.   }
    52. };
    53. let changeTheme = function () {
    54.   console.log(nowtheme.value);
    55.   toggleDark();
    57.   ElMessage.success("切换主题成功");
    58.   changeThemePicture();
    59. };
    60. onMounted(() => {});
    61. </script>
    63. <style scoped>
    64. .theme img {
    65.   width: 100%;
    66.   height: 100%;
    67. }
    68. .word {
    69.   font-size: 0.3vw;
    70. }
    71. </style>