From 98653c4b4aac7e8f4dba024b174b61fb10f790b4 Mon Sep 17 00:00:00 2001
From: Kevin Kandlbinder <kevin@kevink.dev>
Date: Sat, 26 Nov 2022 14:47:13 +0100
Subject: [PATCH] Add dark mode

---
 src/_global.scss              | 22 ++++++++++++++++++++++
 src/index.scss                |  1 +
 src/layout/Layout.module.scss |  2 ++
 src/pages/index.module.scss   |  1 +
 src/pages/videos.module.scss  | 16 ++++++++++++++--
 5 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/src/_global.scss b/src/_global.scss
index 28a29f6..5562855 100644
--- a/src/_global.scss
+++ b/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;
+        }
+    }
+}
diff --git a/src/index.scss b/src/index.scss
index 23cb3b6..e32835b 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -28,6 +28,7 @@ body {
         "Roboto", sans-serif;
     color: var(--color-splash);
     background-color: var(--color-base);
+    @include animate;
 }
 
 a {
diff --git a/src/layout/Layout.module.scss b/src/layout/Layout.module.scss
index df4c387..765030a 100644
--- a/src/layout/Layout.module.scss
+++ b/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 {
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
index 004f59f..ee9b5de 100644
--- a/src/pages/index.module.scss
+++ b/src/pages/index.module.scss
@@ -68,6 +68,7 @@
                 margin: 7px 0;
                 height: 3px;
                 background-color: var(--color-splash);
+                @include animate;
             }
 
             .impactBox {
diff --git a/src/pages/videos.module.scss b/src/pages/videos.module.scss
index fae6340..81317c0 100644
--- a/src/pages/videos.module.scss
+++ b/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 {