39 lines
949 B
Vue
39 lines
949 B
Vue
<script setup>
|
|
import { RouterLink, RouterView } from 'vue-router'
|
|
import { useDark, useToggle } from "@vueuse/core";
|
|
|
|
const isDark = useDark({selector: "body",});
|
|
const toggleDark = useToggle(isDark);
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<button id="theme-toggle" @click="toggleDark()" class="px-4 py-2 w-16">
|
|
<span v-if="isDark"><img class="theme-toggle" src="./assets/Light.dark.png"></span>
|
|
<span v-if="!isDark"><img class="theme-toggle" src="./assets/Light.light.png"></span>
|
|
</button>
|
|
<RouterView />
|
|
</template>
|
|
|
|
<style>
|
|
.dark {
|
|
background-color: #111;
|
|
color: #999
|
|
}
|
|
|
|
#theme-toggle {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
margin-left: -20px;
|
|
margin-top:5px;
|
|
z-index: 11;
|
|
}
|
|
#app {
|
|
display: block !important;
|
|
max-width: None !important;
|
|
padding: 0rem 0rem !important;
|
|
width: 95%;
|
|
margin: auto;
|
|
}
|
|
</style> |