The default theme is now set by the bowser preference

client/src/components/navigation/Sidebar/sidebar.scss

@@ -144,7 +144,7 @@
             .bar-chart {
                 &:before,
                 &:after {
-                    opacity: 0.15;
+                    opacity: 0.1;
                     background: s.$white;
                 }
             }

client/src/index.scss

@@ -4,18 +4,62 @@
 @use 'styles/functions' as fn;
 
 :root {
+    &::before {
+        display: none;
+        content: 'light';
+    }
+
     @each $key, $value in s.$light-colors {
         --#{$key}: #{$value};
     }
+
+    @each $key, $value in s.$light-colors {
+        --#{$key}-rgb: #{red($value), green($value), blue($value)};
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        &::before {
+            display: none;
+            content: 'dark';
+        }
+
+        @each $key, $value in s.$dark-colors {
+            --#{$key}: #{$value};
+        }
+
+        @each $key, $value in s.$dark-colors {
+            --#{$key}-rgb: #{red($value), green($value), blue($value)};
+        }
+    }
+}
+
+:root.light-theme {
+    &::before {
+        display: none;
+        content: 'light';
+    }
+
+    @each $key, $value in s.$light-colors {
+        --#{$key}: #{$value};
+    }
+
     @each $key, $value in s.$light-colors {
         --#{$key}-rgb: #{red($value), green($value), blue($value)};
     }
 }
 
 :root.dark-theme {
+    &::before {
+        display: none;
+        content: 'dark';
+    }
+
     @each $key, $value in s.$dark-colors {
         --#{$key}: #{$value};
     }
+
     @each $key, $value in s.$dark-colors {
         --#{$key}-rgb: #{red($value), green($value), blue($value)};
     }

client/src/index.tsx

@@ -9,25 +9,30 @@ import 'index.scss';
 
 serviceWorkerRegistration.register();
 
+const root = document.getElementsByTagName('html')[0];
+
 export function getTheme() {
-    const root = document.getElementsByTagName('html')[0];
     return root.classList.contains('dark-theme') ? 'dark' : 'light';
 }
 
 export function toggleTheme() {
-    const root = document.getElementsByTagName('html')[0];
-    if (root.classList.contains('dark-theme')) {
+    const current = getComputedStyle(root, '::before').getPropertyValue('content');
+    if (current === '"dark"') {
         root.classList.remove('dark-theme');
+        root.classList.add('light-theme');
         localStorage.setItem('selected-theme', 'light');
     } else {
+        root.classList.remove('light-theme');
         root.classList.add('dark-theme');
         localStorage.setItem('selected-theme', 'dark');
     }
 }
 
-if (localStorage.getItem('selected-theme') === 'dark') {
-    const root = document.getElementsByTagName('html')[0];
+const lastTheme = localStorage.getItem('selected-theme');
+if (lastTheme === 'dark') {
     root.classList.add('dark-theme');
+} else if (lastTheme === 'light') {
+    root.classList.add('light-theme');
 }
 
 function render() {