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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <script setup lang="ts">
import { useDark } from "@vueuse/core";
import { Menu } from "@element-plus/icons-vue";
import { ref, watch } from "vue";
const isDark = ref(useDark().value);
watch(useDark(), () => {
isDark.value = useDark().value;
});
</script>
<template>
<button :class="[$style.menuButton, { [$style.dark]: isDark }]">
<el-icon :size="24"><Menu /></el-icon>
</button>
</template>
<style module>
.menuButton {
padding: 0.6em 1.2em 0.4em 1.2em;
font-size: 24px;
border-radius: 8px;
background-color: #eee;
color: #000;
}
.menuButton.dark {
background-color: #111;
color: #fff;
}
</style>
|