release11-tools/Frontend/src/App.vue

<script setup lang="ts">
import { RouterView } from 'vue-router';
import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
import {onMounted, provide, ref } from 'vue';

const theme = ref( getTheme() );
provide('theme', theme );

onMounted( ()=> {
  if (localStorage.theme)
    selectThemeFromLocalStorage();
  else if (browserPrefersDarkMode()) {
    setDarkTheme();
  }
})

function setDarkTheme() {
  document.documentElement.classList.add('dark');
  theme.value = "dark"; 
  localStorage.setItem("theme", "dark");
}

function selectThemeFromLocalStorage() {
  if (localStorage.theme == "dark")
    document.documentElement.classList.add('dark');
  else
    document.documentElement.classList.remove('dark');

  theme.value = localStorage.theme;
}

function browserPrefersDarkMode(){
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}

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>