Add a sort of dark mode

assets/css/colors.css

@@ -1,3 +1,12 @@
 :root {
-    --background-color: #f4f4f4;
+    --color-background: #f4f4f4;
+    --color-primary: #000000;
 }
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-background: #111111;
+        --color-primary: #eeeeee;
+    }
+}
+

assets/css/content.css

@@ -8,21 +8,21 @@
 }
 
 .primary-action {
-    background: black;
+    background: var(--color-primary);
     padding: 0.8em;
-    color: white;
+    color: var(--color-background);
     text-decoration-line: unset;
     border-radius: 4px;
     border-style: solid;
     border-width: 1px;
-    border-color: black;
+    border-color: var(--color-primary);
     box-sizing: border-box;
 }
 
 .secondary-action {
     border-width: 1px;
     border-style: solid;
-    border-color: black;
+    border-color: var(--color-primary);
     padding: 0.8em;
     text-decoration-line: unset;
     border-radius: 4px;

assets/css/global.css

@@ -4,12 +4,12 @@
 @import url('content.css');
 
 html {
-    background-color: var(--background-color);
+    background-color: var(--color-background);
 }
 
 body {
     font-family: 'FormaDJRText', sans-serif;
-    color: black;
+    color: var(--color-primary);
 
     display: flex;
     flex-direction: column;
@@ -36,7 +36,6 @@ footer {
 
     padding-bottom: 32px;
     padding-top: 64px;
-    color: dimgray;
 }
 
 a {

assets/css/navigation.css

@@ -14,7 +14,7 @@
     display: flex;
     align-items: center;
     text-decoration: none;
-    color: black;
+    color: var(--color-primary);
 }
 
 .nav-logo-icon {
@@ -36,7 +36,7 @@
 
 .nav-link {
     text-decoration: none;
-    color: black;
+    color: var(--color-primary);
 }
 
 .nav-link:hover {
@@ -56,14 +56,14 @@
     height: 64px;
     justify-content: center;
     align-items: center;
-    background-color: black;
+    background-color: var(--color-primary);
     gap: 4px;
 }
 
 .hamburger-line {
     width: 20px;
     height: 2px;
-    background-color: white;
+    background-color: var(--color-background);
 }
 
 .menu-overlay {
@@ -90,7 +90,7 @@
         left: -100%;
         top: 80px;
         flex-direction: column;
-        background-color: var(--background-color);
+        background-color: var(--color-background);
         width: 100%;
         z-index: 1000;
         gap: 0;
@@ -147,8 +147,8 @@
     justify-content: space-between;
 
     height: 64px;
-    border-top: 1px solid black;
-    border-bottom: 1px solid black;
+    border-top: 1px solid var(--color-primary);
+    border-bottom: 1px solid var(--color-primary);
 
     padding-top: 16px;
     padding-bottom: 16px;