deploy: ebd4cc0010
This commit is contained in:
48
node_modules/vitepress/dist/client/theme-default/components/VPSwitchAppearance.vue
generated
vendored
48
node_modules/vitepress/dist/client/theme-default/components/VPSwitchAppearance.vue
generated
vendored
@@ -1,48 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { inject } from 'vue'
|
||||
import { useData } from '../composables/data'
|
||||
import VPSwitch from './VPSwitch.vue'
|
||||
import VPIconMoon from './icons/VPIconMoon.vue'
|
||||
import VPIconSun from './icons/VPIconSun.vue'
|
||||
|
||||
const { isDark } = useData()
|
||||
|
||||
const toggleAppearance = inject('toggle-appearance', () => {
|
||||
isDark.value = !isDark.value
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VPSwitch
|
||||
title="toggle dark mode"
|
||||
class="VPSwitchAppearance"
|
||||
:aria-checked="isDark"
|
||||
@click="toggleAppearance"
|
||||
>
|
||||
<VPIconSun class="sun" />
|
||||
<VPIconMoon class="moon" />
|
||||
</VPSwitch>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.sun {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.moon {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dark .sun {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.dark .moon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.dark .VPSwitchAppearance :deep(.check) {
|
||||
/*rtl:ignore*/
|
||||
transform: translateX(18px);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user