feat: first draft for dark mode support

.gitignore

@@ -1,5 +1,3 @@
 
 # Environment files
 .env
-
-

assets/style.css

@@ -5,9 +5,6 @@
     --bg: #eaeaea;
     --fg: #333;
 
-    /* --bg-dark: #e0e0d6;
-    --bg-darker: #d6d6cc; */
-
     --bg-dark: hsl(220, 5%, 93%);
     --bg-darker: hsl(220, 5%, 90%);
     --bg-darker-2: #dadada;
@@ -15,6 +12,9 @@
     --accent-1: #278542;
     --accent-1-fg: #154d24;
 
+    --card-date: #666;
+    --card-content: #222;
+
     --font-sf: 'Inter', sans-serif;
     --font-weight-light: 300;
     --font-weight-normal: 400;
@@ -24,6 +24,29 @@
     --shadow-1: 0 0 16px 0 #00000018;
 }
 
+html.dark{
+    --bg: #282828;
+    --fg: #579f31;
+
+    --bg-dark: hsl(10, 10%, 20%);
+    --bg-darker: hsl(10, 10%, 17%);
+    --bg-darker-2: #1d2021;
+
+    --accent-1: #154d24;
+    --accent-1-fg: #278542;
+
+    --card-date: #928374;
+    --card-content: #d4be98;
+
+    --font-sf: 'Inter', sans-serif;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 700;
+
+    --shadow-1: 0 0 16px 0 #16182077;
+}
+
 * {
     box-sizing: border-box;
 }
@@ -272,14 +295,14 @@ section {
 
 .card .date {
     font-size: 15px;
-    color: #666;
+    color: var(--card-date);
 
     margin-bottom: 0.75rem;
 }
 
 .card .description {
     font-weight: var(--font-weight-light);
-    color: #222;
+    color: var(--card-content);
 }
 
 /* Typography */

views/base.html

@@ -30,6 +30,19 @@
                 ]
             });
         });
+	<!-- [> WIP: Dark Mode <]
+	   - document.documentElement.classList.toggle(
+	   -   'dark',
+	   -   localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
+	   - );
+	   - document.addEventListener('DOMContentLoaded', () =>
+	   -   document.querySelectorAll('[toggle-dark-mode]').forEach((item) =>
+	   -     item.addEventListener('click', () => {
+	   -       localStorage.setItem('theme', localStorage.theme == 'dark' ? 'light' : 'dark');
+	   -       document.documentElement.classList.toggle('dark');
+	   -     })
+	   -   )
+           - );  -->
     </script>
 
 
@@ -88,6 +101,9 @@
                 <a href="/login">Accedi</a>
             </div>
             {{end}}
+            <div class="nav-item toggle-dark-mode">
+                <a href=""><i class="fa-moon"></i></a>
+            </div>
         </div>
     </nav>