From 5568c805e5747ce90a678c9dc7899ef7b6f1db23 Mon Sep 17 00:00:00 2001
From: Roland Bernard <rolbernard@unibz.it>
Date: Thu, 10 Jun 2021 23:19:23 +0200
Subject: [PATCH] The default theme is now set by the bowser preference

---
 .../navigation/Sidebar/sidebar.scss           |  2 +-
 client/src/index.scss                         | 44 +++++++++++++++++++
 client/src/index.tsx                          | 15 ++++---
 3 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/client/src/components/navigation/Sidebar/sidebar.scss b/client/src/components/navigation/Sidebar/sidebar.scss
index fa32e92..c454a04 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 2b9d736..9ac10fc 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 1775ac2..39ebdae 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() {
-- 
GitLab