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;
 }
@@ -94,12 +117,12 @@ nav a:hover {
 
 nav .nav-logo {
     /* height: 3.5rem; */
-    
+
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0.5rem;
-    
+
     background: var(--bg-dark);
     border-radius: 4px;
     border: 1px solid var(--bg-darker-2);
@@ -159,7 +182,7 @@ nav .nav-main .nav-item.dropdown .name {
     justify-content: center;
 
     background: var(--bg-dark);
-    
+
     z-index: 10;
 }
 
@@ -174,14 +197,14 @@ nav .nav-main .nav-item.dropdown .nav-items {
 
     display: none;
 
-    
+
     background: var(--bg-dark);
     border-radius: 4px;
     border: 1px solid var(--bg-darker-2);
     box-shadow: var(--shadow-1);
 
 }
-/* 
+/*
 nav .nav-main .nav-item.dropdown .nav-items::before {
     position: absolute;
     content: '';
@@ -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 */
@@ -306,4 +329,4 @@ a {
 a:hover {
     color: var(--accent-1);
     text-decoration: underline;
-}
+}

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>
 
@@ -103,4 +119,4 @@
 </body>
 
 </html>
-{{end}}
+{{end}}