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>

Frontend/src/App.vue

@@ -1,13 +1,38 @@
 <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 />
+    <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>