Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script setup lang="ts">
import { useDark, useToggle } from "@vueuse/core";
import { Moon } from "@element-plus/icons-vue";
const isDark = useDark();
const toggleDark = useToggle(isDark);
</script>
<template>
<div :class="$style.dark_mode_button">
<span @click.stop="toggleDark()"
><el-icon :size="24"><Moon /></el-icon>
</span>
<el-switch v-model="isDark" size="large"></el-switch>
</div>
</template>
<style module>
.dark_mode_button {
line-height: 40px;
display: flex;
gap: 4px;
span {
line-height: 40px;
svg {
margin-top: 14px;
}
}
}
</style>
|