Making the project up to date

app/scss/components/_index.scss

@@ -1,4 +1,4 @@
-@forward 'header';
-@forward 'toggle';
-@forward 'card';
-@forward 'card-grid';
+@forward 'header.scss';
+@forward 'toggle.scss';
+@forward 'card.scss';
+@forward 'card-grid.scss';

app/scss/components/card-grid.scss

@@ -7,9 +7,6 @@
 	justify-items: start;
 	gap: rem(23);
 
-	.card__subtitle {
-	}
-
 	.card__count {
 		margin-bottom: 0;
 	}

app/scss/components/card.scss

@@ -1,4 +1,5 @@
 @use '../util' as *;
+@use '../globals' as *;
 
 .cards {
   display: grid;
@@ -17,24 +18,24 @@
 .card {
   position: relative;
   overflow: hidden;
-  background: var(--card-bg);
-  color: var(--dark-text1);
+  background: $card-bg;
+  color: $dark-text1;
   padding: rem(25);
   border-radius: rem(5);
   text-align: center;
   transition: background 150ms ease-in-out;
   cursor: pointer;
 
   &:hover {
-    background: var(--card-hover);
+    background: $card-hover;
   }
 
   &--facebook {
-    border-top: rem(5) solid var(--facebook);
+    border-top: rem(5) solid $facebook;
   }
 
   &--twitter {
-    border-top: rem(5) solid var(--twitter);
+    border-top: rem(5) solid $twitter;
   }
 
   &--instagram {
@@ -50,16 +51,16 @@
       height: rem(5);
       background: linear-gradient(
         225deg,
-        var(--instagram-end),
-        var(--instagram-middle) 50.91%,
-        var(--instagram-start) 100%
+        $instagram-end,
+        $instagram-middle 50.91%,
+        $instagram-start 100%
       ); // var(--instagram-start);
     }
     //border-top: rem(5) solid linear-gradient(225deg, hsl(329, 70%, 58%) 0%, hsl(5, 77%, 71%) 50.91%, #fdc366 100%);
   }
 
   &--youtube {
-    border-top: rem(5) solid var(--youtube);
+    border-top: rem(5) solid $youtube;
   }
 
   &__platform {
@@ -74,37 +75,25 @@
   &__subtitle {
     font-size: rem(14);
     font-weight: 700;
-    color: var(--text-color2);
+    color: $text-color2;
   }
 
   &__icon {
     margin-right: rem(8);
-
-    &--facebook {
-    }
-
-    &--twitter {
-    }
-
-    &--instagram {
-    }
-
-    &--youtube {
-    }
   }
 
   &__username {
     font-size: rem(12);
     font-weight: 700;
-    color: var(--text-color2);
+    color: $text-color2;
   }
 
   &__followers {
     margin-bottom: rem(25);
   }
 
   &__count {
-    color: var(--text-color);
+    color: $text-color;
     font-weight: 700;
     letter-spacing: rem(-2);
     line-height: 1;
@@ -123,7 +112,7 @@
     font-size: rem(12);
     letter-spacing: rem(5);
     font-weight: 400;
-    color: var(--text-color2);
+    color: $text-color2;
     text-transform: uppercase;
   }
 
@@ -135,18 +124,15 @@
     font-weight: 700;
 
     &--up {
-      color: var(--limegreen);
+      color: $limegreen;
     }
 
     &--down {
-      color: var(--brightred);
+      color: $brightred;
     }
 
     img {
       margin-right: rem(4);
     }
   }
-
-  &__number {
-  }
 }

app/scss/components/header.scss

@@ -1,4 +1,5 @@
 @use '../util' as *;
+@use '../globals' as *;
 
 .header {
   display: flex;
@@ -21,6 +22,6 @@
   &__subtitle {
     font-size: rem(14);
     font-weight: 700;
-    color: var(--text-color2);
+    color: $text-color2;
   }
 }

app/scss/components/toggle.scss

@@ -1,4 +1,5 @@
 @use '../util' as *;
+@use '../globals' as *;
 // https://codepen.io/SaraSoueidan/pen/jpBbrq/?editors=1100
 
 .toggle {
@@ -10,7 +11,7 @@
   label {
     font-size: rem(14);
     font-weight: 700;
-    color: var(--toggle);
+    color: $toggle;
 
     &[for='dark'] {
       line-height: rem(24);
@@ -41,7 +42,7 @@
     width: 100%;
     top: 0;
     border-radius: rem(12);
-    background: var(--toggle-bg);
+    background: $toggle-bg;
     pointer-events: none;
   }
 
@@ -53,7 +54,7 @@
     width: rem(18);
     height: rem(18);
     border-radius: 50%;
-    background-color: var(--toggle-button);
+    background-color: $toggle-button;
     transition: all 150ms ease-in-out;
   }
 

app/scss/globals/_colors.scss

@@ -0,0 +1,76 @@
+$limegreen: hsl(163, 72%, 41%);
+$brightred: hsl(356, 69%, 56%);
+$facebook: hsl(208, 92%, 53%);
+$twitter: hsl(203, 89%, 53%);
+$instagram-start: hsl(37, 97%, 70%);
+$instagram-middle: hsl(5, 77%, 71%);
+$instagram-end: hsl(329, 70%, 58%);
+$youtube: hsl(348, 97%, 39%);
+$toggle-bg-light: hsl(230, 22%, 74%);
+$toggle-bg-start: hsl(210, 78%, 56%);
+$toggle-bg-end: hsl(146, 68%, 55%);
+$toggle-light: hsl(230, 19%, 60%);
+$toggle-button-light: hsl(228, 46%, 96%);
+$dark-bg: hsl(230, 17%, 14%);
+$dark-top-bg: hsl(232, 19%, 15%);
+$dark-card: hsl(228, 28%, 20%);
+$dark-card-hover: hsl(228, 25%, 27%);
+$dark-text1: hsl(228, 34%, 66%);
+$dark-text2: hsl(0, 0%, 100%);
+$light-bg: hsl(0, 0%, 100%);
+$light-top-bg: hsl(225, 100%, 98%);
+$light-card: hsl(227, 47%, 96%);
+$light-card-hover: hsl(228, 33%, 91%);
+$light-text1: hsl(230, 12%, 44%);
+$light-text2: hsl(230, 17%, 14%);
+$background: $light-bg;
+$text-color: $light-text2;
+$text-color2: $light-text1;
+$card-bg: $light-card;
+$card-hover: $light-card-hover;
+$toggle: $toggle-light;
+$toggle-bg: $toggle-bg-light;
+$toggle-button: $toggle-button-light;
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    $background: $dark-bg;
+    $text-color: $dark-text2;
+    $text-color2: $dark-text1;
+    $card-bg: $dark-card;
+    $card-hover: $dark-card-hover;
+    $toggle: $light-bg;
+    $toggle-bg: linear-gradient(
+      225deg,
+      $toggle-bg-end 0%,
+      $toggle-bg-start 98.02%
+    );
+    $toggle-button: $dark-bg;
+  }
+}
+
+body.light {
+  $background: $light-bg;
+  $text-color: $light-text2;
+  $text-color2: $light-text1;
+  $card-bg: $light-card;
+  $card-hover: $light-card-hover;
+  $toggle: $toggle-light;
+  $toggle-bg: $toggle-bg-light;
+  $toggle-button: $toggle-button-light;
+}
+
+body.dark {
+  $background: $dark-bg;
+  $text-color: $dark-text2;
+  $text-color2: $dark-text1;
+  $card-bg: $dark-card;
+  $card-hover: $dark-card-hover;
+  $toggle: $light-bg;
+  $toggle-bg: linear-gradient(
+    225deg,
+    $toggle-bg-end 0%,
+    $toggle-bg-start 98.02%
+  );
+  $toggle-button: $dark-bg;
+}

app/scss/globals/_fonts.scss

@@ -0,0 +1 @@
+$font-inter: 'Inter', sans-serif;

app/scss/globals/_index.scss

@@ -1,5 +1,5 @@
 @forward 'fonts';
 @forward 'colors';
-@forward 'boilerplate';
-@forward 'typography';
-@forward 'layout';
+@forward 'boilerplate.scss';
+@forward 'typography.scss';
+@forward 'layout.scss';

app/scss/globals/boilerplate.scss

@@ -1,3 +1,6 @@
+@use "colors" as *;
+@use "fonts" as *;
+
 html {
   font-size: 100%;
   box-sizing: border-box;
@@ -12,9 +15,9 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: var(--font-inter);
-  background: var(--background);
-  color: var(--text-color);
+  font-family: $font-inter;
+  background: $background;
+  color: $text-color;
 }
 
 .visually-hidden {