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/components/sidebar/FooterComponent.vue

@@ -1,10 +1,16 @@
 <script setup lang="ts">
+import ThemeSwitcherComponent from '../common/ThemeSwitcherComponent.vue';
+
+const emit = defineEmits([
+        "theme",
+    ]);
 
 
 </script>
 
 <template>
-   <div class="flex flex-col gap-4 text-center font-thin text-slate-600 dark:text-slate-400 ">
+   <div class="flex flex-col gap-4 items-center text-center font-thin text-slate-600 dark:text-slate-400 ">
+        <ThemeSwitcherComponent @theme="(theme)=>emit('theme',theme)"></ThemeSwitcherComponent>
         <div class="flex flex-col">
             <a href="mailto:bugs@release11.com">Found a bug?</a>
             <a href="#" class="hidden">Privacy Policy</a>

Frontend/src/components/sidebar/SidebarComponent.vue

@@ -8,15 +8,24 @@ import logoWhite from '@assets/logo_czarne.svg';
 
 const logoR11 = ref( logoDark );
 
+const emit = defineEmits([
+    'theme:changed'
+])
+
 
 function changeLogoForTheme(){
     logoR11.value = isDarkModeSet() ? logoDark : logoWhite;
 }
 
 function isDarkModeSet(){
-    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    return localStorage.theme == "dark";
 }
 
+function changeTheme(theme:string){
+            changeLogoForTheme()
+            emit('theme:changed',theme);
+    }
+
 onMounted( () => {
     changeLogoForTheme();
 })
@@ -55,7 +64,7 @@ onMounted( () => {
 
 
             </div>
-            <FooterComponent></FooterComponent>
+            <FooterComponent @theme="changeTheme"></FooterComponent>
         </div>
     </aside>
 </template>