From 03ca03debc95f89da1c11c438b126b5d664036d9 Mon Sep 17 00:00:00 2001
From: Francesco Minnocci <ad17fmin@uwcad.it>
Date: Sat, 10 Sep 2022 19:00:35 +0200
Subject: [PATCH] Add dark theme

---
 src/components/Toolbar.jsx |   7 +-
 src/main.jsx               |  12 +++
 src/styles/main.scss       | 152 +++++++++++++++++++------------------
 3 files changed, 97 insertions(+), 74 deletions(-)

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index d72670a..f61792f 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -1,7 +1,7 @@
 import { CompoundButton } from './CompoundButton.jsx'
 import { Icon } from './Icon.jsx'
 
-export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp }) => {
+export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp, theme, setTheme }) => {
     return (
         <div class="toolbar">
             <div class="mobile">
@@ -52,6 +52,11 @@ export const Toolbar = ({ mode, setMode, source, setSource, onShowMenu, onHelp }
                         <Icon name="print" />
                     </button>
                 </div>
+                <div class="item option">
+                    <button class="icon" onClick={() => setTheme(theme==="dark"?"light":"dark")}>
+                        <Icon name={theme==="dark"?"dark_mode":"light_mode"} />
+                    </button>
+                </div>
                 <div class="item option">
                     <button class="icon" onClick={onHelp}>
                         <Icon name="question_mark" />
diff --git a/src/main.jsx b/src/main.jsx
index 8708c18..dc53bfc 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -95,6 +95,16 @@ const App = ({}) => {
 
     const [showMobileMenu, setShowMobileMenu] = useState(false)
 
+    useEffect(async () => {
+        const eventi = await loadEventi(CALENDAR_IDS[source])
+        // window.dataBuffer[source] = eventi
+        setEventi(eventi)
+    }, [source])
+
+    const [theme, setTheme] = useState("light")
+
+    document.body.classList.toggle("dark-mode", theme === "dark")
+
     return (
         <>
             <Toolbar
@@ -105,6 +115,8 @@ const App = ({}) => {
                     setSource,
                     onShowMenu: () => setShowMobileMenu(true),
                     onHelp: () => setHelpVisible(true),
+                    theme,
+                    setTheme,
                 }}
             />
             <EventsView
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 6baa5c0..b50e76f 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -14,31 +14,38 @@ html {
 // Theme
 
 :root {
-    --gray-000: #ffffff;
-    --gray-100: #f8f8f8;
-    --gray-300: #f0f0f0;
-    --gray-350: #e8e8e8;
-    --gray-500: #d8d8d8;
-    --gray-600: #c0c0c0;
-    --gray-700: #b0b0b0;
-    --gray-800: #909090;
-    --gray-900: #282828;
-
-    // --accent-100: #e6ceff;
-    // --accent-400: #d0b8ef;
-    // --accent-500: #aa82db;
-
-    // --accent-100: hsl(221, 100%, 88%);
-    // --accent-400: hsl(221, 75%, 78%);
-    // --accent-500: hsl(221, 70%, 75%);
-
-    --accent-100: #d6ffc2;
-    --accent-400: #6cc16c;
-    --accent-500: #5aa05a;
+    --bg-500: #ffffff;
+    --bg-selected-500: #f8f8f8;
+    --bg-highlight-500: #f0f0f0;
+    --border-400: #e8e8e8;
+    --border-500: #d8d8d8;
+    --border-600: #c0c0c0;
+    --border-highlight-500: #b0b0b0;
+    --border-selected-500: #909090;
+    --text-500: #282828;
+
+    --accent-500: #d6ffc2;
+    --accent-100: #6cc16c;
     --accent-900: #244624;
 }
 
-$device-s-width: 500px;
+body.dark-mode {
+    --bg-500: hsl(269, 24%, 18%);
+    --bg-selected-500: #722da0;
+    --bg-highlight-500: #a64edb;
+    --border-400: hsl(269, 40%, 30%);
+    --border-500: hsl(269, 40%, 40%);
+    --border-600: #a66af6;
+    --border-highlight-500: hsl(269, 80%, 78%);
+    --border-selected-500: #b66af6;
+    --text-500: #e6bdf6;
+
+    --accent-100: hsl(269, 44%, 24%);
+    --accent-500: hsl(269, 50%, 60%);
+    --accent-900: hsl(269, 20%, 80%);
+}
+
+$device-s-width: 600px;
 
 // Elements
 
@@ -97,10 +104,10 @@ button,
 
     gap: 0.25rem;
 
-    color: var(--gray-900);
+    color: var(--text-500);
 
-    background: var(--gray-000);
-    border: 2px solid var(--gray-350);
+    background: var(--bg-500);
+    border: 2px solid var(--border-400);
     border-radius: 0.5rem;
 
     font: inherit;
@@ -125,8 +132,8 @@ button,
     }
 
     &.primary {
-        background: var(--accent-100);
-        border-color: var(--accent-400);
+        background: var(--accent-500);
+        border-color: var(--accent-100);
 
         &:hover::after {
             background: #00000020;
@@ -152,8 +159,8 @@ button,
 
     height: 3rem;
 
-    background: var(--gray-000);
-    border: 2px solid var(--gray-350);
+    background: var(--bg-500);
+    border: 2px solid var(--border-400);
     border-radius: 0.5rem;
 
     font-weight: 400;
@@ -282,16 +289,16 @@ button,
 
             border-top-right-radius: 0.5rem;
             border-bottom-right-radius: 0.5rem;
-            border: 2px solid var(--gray-350);
+            border: 2px solid var(--border-400);
         }
 
         &.radio {
             &.selected {
-                background: var(--accent-100);
-                border-color: var(--accent-400);
+                background: var(--accent-500);
+                border-color: var(--accent-100);
 
                 & + .radio {
-                    border-left-color: var(--accent-400);
+                    border-left-color: var(--accent-100);
                 }
 
                 &:hover::after {
@@ -305,8 +312,8 @@ button,
 // Extension Classes
 
 .panel {
-    background: var(--gray-000);
-    border: 1px solid var(--gray-500);
+    background: var(--bg-500);
+    border: 1px solid var(--border-500);
     border-radius: 1rem;
     padding: 1rem;
 }
@@ -329,8 +336,8 @@ button,
 // Structure
 
 body {
-    background: var(--gray-000);
-    color: var(--gray-900);
+    background: var(--bg-500);
+    color: var(--text-500);
 
     font-weight: 300;
     font-family: 'Inter', sans-serif;
@@ -345,7 +352,7 @@ body {
 
     border-radius: 0;
     border: none;
-    border-bottom: 1px solid var(--gray-500);
+    border-bottom: 1px solid var(--border-500);
 
     height: 4rem;
 
@@ -415,7 +422,7 @@ body {
                 cursor: pointer;
 
                 &.selected {
-                    background: var(--gray-100);
+                    background: var(--bg-selected-500);
 
                     &::after {
                         content: '';
@@ -423,13 +430,13 @@ body {
                         inset: -1px;
                         border-radius: 1rem;
 
-                        border: 3px solid var(--gray-800);
+                        border: 3px solid var(--border-selected-500);
                     }
                 }
 
                 &.highlight {
-                    background: var(--gray-300);
-                    border-color: var(--gray-700);
+                    background: var(--bg-highlight-500);
+                    border-color: var(--border-highlight-500);
                 }
 
                 .title {
@@ -474,15 +481,15 @@ body {
 
                 height: calc(var(--size) * var(--event-height) + (var(--size) - 1) * 0.25rem);
 
-                border-top: 1px solid var(--gray-500);
-                border-right: 1px solid var(--gray-500);
+                border-top: 1px solid var(--border-500);
+                border-right: 1px solid var(--border-500);
                 padding: 0.5rem 1rem 0 0.5rem;
 
                 font-size: 18px;
                 font-weight: 400;
 
                 &:last-child {
-                    border-bottom: 1px solid var(--gray-500);
+                    border-bottom: 1px solid var(--border-500);
                 }
             }
         }
@@ -515,11 +522,11 @@ body {
                     font-size: 18px;
                     font-weight: 400;
 
-                    border-left: 1px solid var(--gray-500);
+                    border-left: 1px solid var(--border-500);
 
                     &:nth-child(2),
                     &:nth-child(4) {
-                        border-right: 1px solid var(--gray-500);
+                        border-right: 1px solid var(--border-500);
                     }
                 }
             }
@@ -547,15 +554,14 @@ body {
                         grid-row: var(--row) / span 1;
                         grid-column: var(--start) / span var(--size);
 
-                        // $color: hsl(var(--hue), 80%, 60%);
-                        $color: var(--gray-000);
+                        $color: var(--bg-500);
 
                         background: $color;
-                        color: var(--gray-900);
+                        color: var(--text-500);
 
                         border-radius: 0.25rem;
 
-                        border: 1px solid var(--gray-600);
+                        border: 1px solid var(--border-600);
 
                         display: flex;
                         padding: 0.4rem;
@@ -595,11 +601,11 @@ body {
                         z-index: 2;
                     }
 
-                    border-top: 1px solid var(--gray-500);
+                    border-top: 1px solid var(--border-500);
                     padding: 0.25rem 0;
 
                     &:last-child {
-                        border-bottom: 1px solid var(--gray-500);
+                        border-bottom: 1px solid var(--border-500);
                     }
                 }
             }
@@ -630,10 +636,10 @@ body {
 
             z-index: 2;
 
-            background: var(--gray-000);
+            background: var(--bg-500);
 
-            border-bottom: 1px solid var(--gray-500);
-            border-right: 1px solid var(--gray-500);
+            border-bottom: 1px solid var(--border-500);
+            border-right: 1px solid var(--border-500);
         }
 
         .left-header {
@@ -645,9 +651,9 @@ body {
             position: sticky;
             left: 0;
 
-            border-right: 1px solid var(--gray-500);
+            border-right: 1px solid var(--border-500);
 
-            background: var(--gray-000);
+            background: var(--bg-500);
 
             z-index: 1;
 
@@ -669,7 +675,7 @@ body {
                     font-size: 16px;
                     font-weight: 400;
 
-                    border-top: 1px solid var(--gray-500);
+                    border-top: 1px solid var(--border-500);
 
                     @media screen and (max-width: $device-s-width) and (orientation: portrait),
                         screen and (max-height: $device-s-width) and (orientation: landscape) {
@@ -678,7 +684,7 @@ body {
 
                     &:not(.skip-border) {
                         height: calc(2 * (var(--event-height) + 1rem) + 1px);
-                        border-bottom: 1px solid var(--gray-500);
+                        border-bottom: 1px solid var(--border-500);
                     }
                 }
             }
@@ -708,12 +714,12 @@ body {
                 font-size: 18px;
                 font-weight: 400;
 
-                background: var(--gray-000);
-                border-bottom: 1px solid var(--gray-500);
+                background: var(--bg-500);
+                border-bottom: 1px solid var(--border-500);
             }
 
             &:not(:last-child) {
-                border-right: 1px solid var(--gray-500);
+                border-right: 1px solid var(--border-500);
             }
 
             .events {
@@ -733,9 +739,9 @@ body {
                     grid-row: var(--start) / span var(--size);
                     grid-column: var(--stack) / span 1;
 
-                    background: var(--gray-000);
+                    background: var(--bg-500);
 
-                    border: 1px solid var(--gray-600);
+                    border: 1px solid var(--border-600);
                     // border: 4px solid hsl(var(--hue), 80%, 80%);
 
                     border-radius: 0.5rem;
@@ -748,7 +754,7 @@ body {
                     padding: 0.5rem 1rem 0.5rem 0.5rem;
 
                     &.selected {
-                        background: var(--gray-100);
+                        background: var(--bg-selected-500);
 
                         &::after {
                             content: '';
@@ -756,13 +762,13 @@ body {
                             inset: -1px;
                             border-radius: 0.5rem;
 
-                            border: 3px solid var(--gray-800);
+                            border: 3px solid var(--border-selected-500);
                         }
                     }
 
                     &.highlight {
-                        background: var(--gray-300);
-                        border-color: var(--gray-700);
+                        background: var(--bg-highlight-500);
+                        border-color: var(--border-highlight-500);
                     }
 
                     .title {
@@ -781,7 +787,7 @@ body {
                     grid-row: var(--track) / span 2;
 
                     height: 0px;
-                    border-bottom: 1px dashed var(--gray-500);
+                    border-bottom: 1px dashed var(--border-500);
 
                     align-self: center;
 
@@ -830,7 +836,7 @@ body {
     width: 100vw;
     height: 100vh;
 
-    background: var(--gray-000);
+    background: var(--bg-500);
 
     z-index: 10;
 
@@ -843,7 +849,7 @@ body {
         align-items: center;
         justify-content: space-between;
 
-        border-bottom: 1px solid var(--gray-500);
+        border-bottom: 1px solid var(--border-500);
         .logo {
             display: flex;
             align-items: center;
@@ -878,7 +884,7 @@ body {
         height: 1px;
         left: 1rem;
 
-        background: var(--gray-500);
+        background: var(--border-500);
         border: none;
     }