Frontend/src/App.vue

@@ -3,29 +3,43 @@ 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( ()=> {
-  switch( localStorage.theme ) {
-    case "dark":{
-      document.documentElement.classList.add('dark');
-      break;
-    }
-    case "light":{
-      document.documentElement.classList.remove('dark');
-    }} 
-    theme.value = localStorage.theme; 
+  if (localStorage.theme)
+    selectThemeFromLocalStorage();
+  else if (browserPrefersDarkMode()) {
+    setDarkTheme();
+  }
 })
 
-  const theme = ref( getTheme() );
-  provide('theme', theme );
+function setDarkTheme() {
+  document.documentElement.classList.add('dark');
+  theme.value = "dark"; 
+  localStorage.setItem("theme", "dark");
+}
 
-  function setTheme(newTheme : string){
-    theme.value = newTheme;
-  }
+function selectThemeFromLocalStorage() {
+  if (localStorage.theme == "dark")
+    document.documentElement.classList.add('dark');
+  else
+    document.documentElement.classList.remove('dark');
 
-  function getTheme(){
-    return localStorage.theme;
-  }
+  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>

Frontend/src/components/sidebar/SidebarComponent.vue

@@ -18,7 +18,10 @@ function changeLogoForTheme(){
 }
 
 function isDarkModeSet(){
-    return localStorage.theme == "dark";
+    if (localStorage.theme) 
+        return localStorage.theme == "dark";
+    else
+        return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 }
 
 function changeTheme(theme:string){