Files
release11-tools/Frontend/src/App.vue
widlam 50c44fc9a8 Created theme switcher (#270)
Reviewed-on: #270
Reviewed-by: Adam Bem <bema@noreply.example.com>
Co-authored-by: widlam <mikolaj.widla@gmail.com>
Co-committed-by: widlam <mikolaj.widla@gmail.com>
2023-12-04 12:11:26 +01:00

44 lines
1.0 KiB
Vue

<script setup lang="ts">
import { RouterView } from 'vue-router';
import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
import {onMounted, provide, ref } from 'vue';
onMounted( ()=> {
switch( localStorage.theme ) {
case "dark":{
document.documentElement.classList.add('dark');
break;
}
case "light":{
document.documentElement.classList.remove('dark');
}}
theme.value = localStorage.theme;
})
const theme = ref( getTheme() );
provide('theme', theme );
function setTheme(newTheme : string){
theme.value = newTheme;
}
function getTheme(){
return localStorage.theme;
}
</script>
<template>
<div id="layout" class="font-sans flex h-screen bg-gradient-to-br from-sky-200 to-indigo-200 dark:from-sky-950 dark:to-indigo-950">
<SidebarComponent @theme:changed="setTheme" />
<div class="relative p-4 w-full m-4 ml-0 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg">
<RouterView></RouterView>
</div>
</div>
</template>
<style scoped></style>