Introduce basic dark theme

Author: lucemans

web/src/components/navigation/Navbar.tsx

@@ -109,7 +109,7 @@ export const Navbar = () => {
         <nav
             role="navigation"
             aria-label="Main"
-            className="fixed bottom-0 z-20 flex h-16 w-full items-center justify-between border-t bg-white md:sticky md:top-0 md:h-9 md:border-b"
+            className="bg-background fixed bottom-0 z-20 flex h-16 w-full items-center justify-between border-t md:sticky md:top-0 md:h-9 md:border-b"
         >
             <Link
                 to="/"

web/src/styles/index.css

@@ -28,6 +28,20 @@
         --ring: 215 20.2% 65.1%;
         --radius: 0.5rem;
     }
+
+    @media (prefers-color-scheme: dark) {
+        :root {
+            --background: 222.2 47.4% 11.2%;
+            --foreground: 210 40% 98%;
+            --card: 222.2 47.4% 11.2%;
+            --card-foreground: 210 40% 98%;
+            --border: 214.3 31.8% 15.3%;
+        }
+    }
+}
+
+html, body {
+    @apply bg-background text-foreground;
 }
 
 #root {
@@ -49,7 +63,7 @@
 }
 
 .card {
-    @apply border border-solid border-neutral-200 rounded-md;
+    @apply border border-solid rounded-md;
     /* @apply w-full gap-4 border border-t-4 shadow-sm rounded-md pt-4; */
 }
 .card:not(.no-padding) {

web/tailwind.config.js

@@ -51,6 +51,9 @@ export default {
                     },
                 },
             },
+            borderColor: {
+                DEFAULT: 'hsl(var(--border))',
+            }
         },
     },
     plugins: [require('tailwindcss-animate')],