Add light mode

src/_mixins.scss

@@ -10,7 +10,7 @@
     border-radius: 5px;
     overflow: hidden;
     box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.3);
-    transition: transform 0.25s, box-shadow 0.25s;
+    transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s, color 0.25s;
     color: $textColor;
     text-decoration: none;
     margin: 20px;
@@ -23,6 +23,21 @@
         box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
             -1px 11px 33px -10px rgba($accentColor, 0.75);
     }
+
+    @media(prefers-color-scheme: light) {
+        box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.7);
+
+        background: $lightBackground;
+        color: $lightTextColor;
+
+        &:hover,
+        &:active,
+        &:focus {
+            transform: scale(1.05);
+            box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
+                -1px 11px 33px -10px rgba($accentColor, 0.75);
+        }
+    }
 }
 
 @mixin buttonBasic {
@@ -53,6 +68,11 @@
     display: block;
     text-decoration: none;
     color: inherit;
+    transition: background-color .25s, color .25s;
+
+    @media(prefers-color-scheme: light) {
+        background: darken($accentColor, 1);
+    }
 
     img {
         height: 50px;

src/_variables.scss

@@ -1,7 +1,9 @@
 $layoutWidth: 1200px;
 $accentColor: #e5502b;
 $background: #070707;
+$lightBackground: #fff;
 $textColor: white;
+$lightTextColor: black;
 $layoutPadding: 20px;
 
 $mainFont: "Anonymous Pro", monospace;

src/components/navigation.module.scss

@@ -8,14 +8,24 @@
     display: flex;
     width: 100%;
     background: rgba($background, 0.95);
+    color: $textColor;
     backdrop-filter: blur(5px);
     z-index: 999;
-    transition: background 0.25s;
+    transition: background-color .25s, color .25s;
 
     @supports (backdrop-filter: blur(5px)) {
         background: rgba($background, 0.9);
     }
 
+    @media(prefers-color-scheme: light) {
+        background: rgba($lightBackground, 0.95);
+        color: $lightTextColor;
+
+        @supports (backdrop-filter: blur(5px)) {
+            background: rgba($lightBackground, 0.9);
+        }
+    }
+
     .topBarInner {
         display: flex;
         width: 100%;
@@ -33,7 +43,7 @@
         a {
             display: block;
             padding: 10px $layoutPadding;
-            color: white;
+            color: inherit;
             text-decoration: none;
             border-top: 2px solid transparent;
 
@@ -43,6 +53,11 @@
 
             &.active {
                 border-color: white;
+                transition: border-color .25s;
+
+                @media(prefers-color-scheme: light) {
+                    border-color: $accentColor;
+                }
             }
         }
     }
@@ -50,6 +65,7 @@
 
 .homeBar.homeBarTransparent {
     background: transparent;
+    color: $textColor;
     backdrop-filter: blur(0);
 }
 

src/layouts/default.scss

@@ -20,6 +20,12 @@ html,
     color: $textColor;
     display: flex;
     flex-direction: column;
+    transition: background-color .25s, color .25s;
+
+    @media(prefers-color-scheme: light) {
+        background: $lightBackground;
+        color: $lightTextColor;
+    }
 }
 
 footer {
@@ -28,9 +34,15 @@ footer {
     color: white;
     padding: 5px;
     text-align: center;
+    transition: background-color .25s, color .25s;
+
+    @media(prefers-color-scheme: light) {
+        background: darken($lightBackground, 1);
+        color: $lightTextColor;
+    }
 
     a {
-        color: white;
+        color: inherit;
         text-decoration: underline dotted currentColor;
     }
 }

src/pages/friends.module.scss

@@ -20,6 +20,7 @@
             padding: 10px;
             flex-direction: column-reverse;
             text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
+            color: white;
 
             .friendName {
                 font-size: 2em;
@@ -50,6 +51,11 @@
                 text-decoration: underline dotted rgba(0, 0, 0, 0);
                 padding: 6px 0 6px 25px;
                 color: $textColor;
+                transition: color .25s;
+
+                @media(prefers-color-scheme: light) {
+                    color: $lightTextColor;
+                }
 
                 > i {
                     color: $accentColor;

src/pages/index.module.scss

@@ -42,6 +42,11 @@
 
     .heroSectionBgOver {
         background: linear-gradient(to bottom, transparent 80%, $background);
+        transition: background-image .25s;
+
+        @media(prefers-color-scheme: light) {
+            background: linear-gradient(to bottom, transparent 90%, $lightBackground);
+        }
     }
 
     @media (pointer: coarse), (pointer: none) {

src/pages/projects.module.scss

@@ -43,6 +43,7 @@
         background-position: center;
         background-size: cover;
         text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
+        color: white;
     }
 
     .projectCardMeta {

src/pages/social.module.scss

@@ -18,6 +18,7 @@
             padding: 10px;
             flex-direction: column-reverse;
             text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
+            color: white;
 
             .socialName {
                 font-size: 2em;

src/templates/project.module.scss

@@ -69,6 +69,12 @@
 .projectAbout {
     background: #060606;
     color: white;
+    transition: background-color .25s, color .25s;
+
+    @media(prefers-color-scheme: light) {
+        background: $lightBackground;
+        color: $lightTextColor;
+    }
 }
 
 .projectLinks {
@@ -84,7 +90,7 @@
         border-radius: 5px;
         padding: 10px 15px;
         margin: 5px;
-        color: $textColor;
+        color: inherit;
         text-decoration-skip: none;
         text-decoration: underline dotted currentColor;