Merge pull request #68 from AdvancedCSS2023/dark-mode

Dark mode

Author: jorgennonstad

index.html

@@ -12,7 +12,7 @@
       <!-- SCENE 1 -->
       <div class="scene1">
         <img class="cloud" src="./images/cloud.png" alt="" />
-        <img class="sun" src="./images/sun .png" alt="" />
+        <div class="sun"></div>
         <div>
           <img class="man" src="images/man.png">
           <img class="dock" src="./images/fishing_dock.png" alt="" />

style/_color.scss

@@ -1,5 +1,7 @@
 /* Variables */
-$scene1Gradient : linear-gradient(180deg, rgba(157,221,247,1) 67%, rgb(83, 154, 184) 67%);
+$scene1GradientDarkMode : linear-gradient(180deg, rgb(4, 36, 48) 67%, rgb(9, 129, 155) 67%);
+$scene1GradientLightMode : linear-gradient(180deg, rgba(157,221,247,1) 67%, rgb(83, 154, 184) 67%);
+$scene2GradientDarkMode : linear-gradient(180deg, rgba(9, 129, 155) 22%, rgba(63,106,124,1) 66%);
 $scene2Gradient : linear-gradient(180deg, rgba(83, 154, 184,1) 22%, rgba(63,106,124,1) 66%);
 $scene3Gradient : linear-gradient(180deg, rgba(63,106,124,1) 22%, rgba(15,48,62,1) 73%);
 $scene4Gradient : linear-gradient(180deg, rgba(15,48,62,1) 22%, rgba(0,0,0,1) 73%);
@@ -9,11 +11,38 @@ $urlWave : url(/images/wave.png);
 
 
 /*Applying colors*/
+/*dark mode */
+@media (prefers-color-scheme: dark) {
+    .scene1 {
+       background: $scene1GradientDarkMode;
+    }
+
+    .sun{
+        background: url(../images/moon.png);
+    }
+
+    .scene2{
+        background: $scene2GradientDarkMode;
+    }
+  }
+  
+  /*light mode */
+  @media (prefers-color-scheme: light) {
+    .scene1 {
+        background: $scene1GradientLightMode;
+    }
+    .sun{
+        background: url(../images/sun.png);
+    }
+
+    .scene2{
+        background: $scene2Gradient;
+    }
+  }
+
 body{
     background-color: $scene5Gradient;
-}
-.scene1{
-    background: $scene1Gradient;
+    color: white;
 }
 /*Wave url*/
 .waves-1 {
@@ -28,9 +57,6 @@ body{
 .waves-4 {
     background: $urlWave;
 }
-.scene2{
-    background: $scene2Gradient;
-}
 .scene3{
     background: $scene3Gradient;
 }
@@ -59,12 +85,3 @@ body{
 .man__leg>* {
     background-color: black;
 }
-
-main{
-    background-color: $scene5Gradient;
-    div{
-        &:nth-of-type(n + 3){
-            color: $darkSceneFontColor;
-        }
-    }
-}

style/_layout.scss

@@ -19,21 +19,7 @@ main{
     position: sticky;
     top: 25px;
   }
-/*dark mode */
-@media (prefers-color-scheme: dark) {
-  body {
-  background-color: black;
-  color: white;
-  }
-}
 
-/*light mode */
-@media (prefers-color-scheme: light) {
-  body {
-  background-color: white;
-  color: black;
-  }
-}
   /* general layout for side plant images*/
 .background-plants-right {
     width: 9vw;