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>
44 lines
1.0 KiB
Vue
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>
|