Add dark mode

src/_global.scss

@@ -7,6 +7,10 @@
     --layout-slant: -30deg;
     --layout-radius: 20px;
 
+    @media (prefers-color-scheme: dark) {
+        --color-base: #190b22;
+        --color-splash: red;
+    }
     /*
     --color-base: #190b22;
     --color-splash: red;
@@ -18,3 +22,21 @@
     width: 100%;
     margin: 0 auto;
 }
+
+@mixin animate {
+    transition: all 0.25s;
+
+    @include respectReducedMotion;
+}
+
+@mixin respectReducedMotion {
+    @media (prefers-reduced-motion: reduce) {
+        transition: none !important;
+        animation: none !important;
+
+        * {
+            transition: none !important;
+            animation: none !important;
+        }
+    }
+}

src/index.scss

@@ -28,6 +28,7 @@ body {
         "Roboto", sans-serif;
     color: var(--color-splash);
     background-color: var(--color-base);
+    @include animate;
 }
 
 a {

src/layout/Layout.module.scss

@@ -12,6 +12,7 @@
         width: 100%;
         z-index: 900;
         background-color: var(--color-base);
+        @include animate;
 
         > .navigationBorder {
             max-width: var(--layout-width);
@@ -25,6 +26,7 @@
                 var(--color-splash) 0.5px 3px,
                 var(--color-base) 3.5px 12px
             );
+            @include animate;
         }
 
         > nav {

src/pages/index.module.scss

@@ -68,6 +68,7 @@
                 margin: 7px 0;
                 height: 3px;
                 background-color: var(--color-splash);
+                @include animate;
             }
 
             .impactBox {

src/pages/videos.module.scss

@@ -38,7 +38,9 @@
                     height: 100%;
                     border: 3px solid var(--color-splash);
                     border-radius: var(--layout-radius);
-                    transition: top 0.25s, left 0.25s;
+                    transition: top 0.25s, left 0.25s, border 0.25s;
+
+                    @include respectReducedMotion;
                 }
 
                 [data-gatsby-image-wrapper=""] {
@@ -51,7 +53,13 @@
                     border-radius: var(--layout-radius);
                     border: 3px solid var(--color-base);
                     z-index: 20;
-                    transition: top 0.25s, left 0.25s;
+                    transition: top 0.25s, left 0.25s, border 0.25s,
+                        filter 0.25s;
+
+                    @media (prefers-color-scheme: dark) {
+                        filter: sepia(90%) saturate(200%) brightness(70%)
+                            hue-rotate(-40deg);
+                    }
                 }
             }
 
@@ -82,6 +90,10 @@
                     [data-gatsby-image-wrapper=""] {
                         top: -5px;
                         left: 5px;
+
+                        @media (prefers-color-scheme: dark) {
+                            filter: none;
+                        }
                     }
 
                     .borderBox {