diff --git a/client/src/components/navigation/Sidebar/sidebar.scss b/client/src/components/navigation/Sidebar/sidebar.scss
index fa32e9280653d28cd5b370e290335c18e20a7c9d..c454a044555d7cebf63a872d6d9bb545038ed9f3 100644
--- a/client/src/components/navigation/Sidebar/sidebar.scss
+++ b/client/src/components/navigation/Sidebar/sidebar.scss
@@ -144,7 +144,7 @@
             .bar-chart {
                 &:before,
                 &:after {
-                    opacity: 0.15;
+                    opacity: 0.1;
                     background: s.$white;
                 }
             }
diff --git a/client/src/index.scss b/client/src/index.scss
index 2b9d736a452034a5741540da7641b076db596763..9ac10fce2d565e9b63dcb7b2f5b2d431a1e12605 100644
--- a/client/src/index.scss
+++ b/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)};
     }
diff --git a/client/src/index.tsx b/client/src/index.tsx
index 1775ac2bbe2c4a6f29f209fcba0441442fd87b23..39ebdae67dc8746bb95b1fd3f2a0d02a6bac9768 100644
--- a/client/src/index.tsx
+++ b/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() {