Relocate all colors to _globals.scss

src/_globals.scss

@@ -1,16 +1,94 @@
+@use "sass:map";
+
 $layoutWidth: 1200px;
-$accentColor: #e52b3e;
-$accentColorDarker: darken($accentColor, 5);
-$background: #070707;
-$lightBackground: #fff;
-$textColor: white;
-$lightTextColor: black;
 $layoutPadding: 20px;
 
-$noticeColor: rgba(#e52b3e, 0.15);
-
 $mainFont: "Fira Code", monospace;
 
+$theme: (
+  "accent": #e52b3e,
+  "background": #070707,
+  "text": white,
+  "red": #e52b3e,
+  "orange": #e5752b,
+  "green": #18bb20,
+  "blue": #6d94e9,
+  "purple": #886af5
+);
+
+$theme-light: (
+  "accent": #e52b3e,
+  "background": white,
+  "text": black,
+  "red": #db1e31,
+  "orange": #aa4f12,
+  "green": #17681b,
+  "blue": #2b66e5,
+  "purple": #6848da
+);
+
+
+
+$accentColor: map.get($theme, "accent");
+$background: map.get($theme, "background");
+$lightBackground: map.get($theme-light, "background");
+$textColor: map.get($theme, "text");
+$lightTextColor:  map.get($theme-light, "text");
+$accentColorDarker: darken($accentColor, 5);
+$borderColor: rgba(0, 0, 0, 0.25);
+$border: thin solid $borderColor;
+$textShadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
+$textShadowAccent: 0 0 20px rgba($accentColor, 0.15);
+$textShadowAccentLight: 0 0 20px rgba($accentColor, 0.3);
+
+$skillColor1: map.get($theme, "red");
+$skillColor2: map.get($theme, "orange");
+$skillColor3: map.get($theme, "green");
+$skillColor4: map.get($theme, "blue");
+$skillColor5: map.get($theme, "purple");
+
+$skillColor1Light: map.get($theme-light, "red");
+$skillColor2Light: map.get($theme-light, "orange");
+$skillColor3Light: map.get($theme-light, "green");
+$skillColor4Light: map.get($theme-light, "blue");
+$skillColor5Light: map.get($theme-light, "purple");
+
+$noticeColor: rgba($accentColor, 0.15);
+
+$cardShadow: -1px 11px 33px -10px rgba(27, 27, 27, 0.3);
+$cardHoverShadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2), -1px 11px 33px -10px rgba($accentColor, 0.75);
+
+$cardLightShadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.7);
+$cardLightHoverShadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
+-1px 11px 33px -10px rgba($accentColor, 0.75);
+
+$homeProfileShadow: -1px 11px 33px -10px rgba($accentColor, 0.25);
+$homeProfileClipFront: polygon(6% 8%, 88% 5%, 95% 91%, 7% 96%);
+$homeProfileClipBack: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%);
+
+$aboutCVShadow: 0 0 15px 0 rgba($accentColor, 0.25);
+$aboutCVColorEdu: map.get($theme, "blue");
+$aboutCVColorEduLight: map.get($theme-light, "blue");
+
+
+@mixin homeBg {
+    background: linear-gradient(45deg, #000850 0%, #000320 100%),
+        radial-gradient(100% 225% at 100% 0%, #ff6928 0%, #000000 100%),
+        linear-gradient(225deg, #ff7a00 0%, #000000 100%),
+        linear-gradient(
+            135deg,
+            #cdffeb 10%,
+            #cdffeb 35%,
+            #009f9d 35%,
+            #009f9d 60%,
+            #07456f 60%,
+            #07456f 67%,
+            #0f0a3c 67%,
+            #0f0a3c 100%
+        );
+    background-blend-mode: screen, overlay, hard-light, normal;
+}
+
 @mixin flexList {
     display: flex;
     flex-wrap: wrap;
@@ -20,7 +98,7 @@ $mainFont: "Fira Code", monospace;
 @mixin cardGeneric {
     border-radius: 5px;
     overflow: hidden;
-    box-shadow: -1px 11px 33px -10px rgba(27, 27, 27, 0.3);
+    box-shadow: $cardShadow;
     transition: transform 0.25s, box-shadow 0.25s, background-color 0.25s,
         color 0.25s;
     color: $textColor;
@@ -32,12 +110,11 @@ $mainFont: "Fira Code", monospace;
     &:active,
     &:focus {
         transform: scale(1.05);
-        box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
+        box-shadow: $cardHoverShadow;
-            -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);
+        box-shadow: $cardLightShadow;
 
         background: $lightBackground;
         color: $lightTextColor;
@@ -46,8 +123,7 @@ $mainFont: "Fira Code", monospace;
         &:active,
         &:focus {
             transform: scale(1.05);
-            box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
+            box-shadow: $cardLightHoverShadow;
-                -1px 11px 33px -10px rgba($accentColor, 0.75);
         }
     }
 }

src/layouts/default.scss

@@ -79,9 +79,9 @@ h1 {
 
     color: $accentColor;
 
-    text-shadow: 0 0 20px rgba($accentColor, 0.15);
+    text-shadow: $textShadowAccent;
 
     @media (prefers-color-scheme: light) {
-        text-shadow: 0 0 20px rgba($accentColor, 0.3);
+        text-shadow: $textShadowAccentLight;
     }
 }

src/pages/donate.module.scss

@@ -4,7 +4,7 @@
     display: flex;
     width: 150px;
     margin: 20px auto;
-    border: thin solid rgba(0, 0, 0, 0.25);
+    border: $border;
     border-radius: 5px;
     overflow: hidden;
     line-height: 40px;
@@ -14,7 +14,7 @@
         border: none;
         padding-left: 10px;
         width: 1px;
-        border-right: thin solid rgba(0, 0, 0, 0.25);
+        border-right: $border;
     }
 
     div {

src/pages/friends.module.scss

@@ -18,7 +18,7 @@
             display: flex;
             padding: 10px;
             flex-direction: column-reverse;
-            text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
+            text-shadow: $textShadow;
             color: white;
             position: relative;
 

src/pages/index.module.scss

@@ -33,21 +33,7 @@
     }
 
     .heroSectionBg {
-        background: linear-gradient(45deg, #000850 0%, #000320 100%),
+        @include homeBg;
-            radial-gradient(100% 225% at 100% 0%, #ff6928 0%, #000000 100%),
-            linear-gradient(225deg, #ff7a00 0%, #000000 100%),
-            linear-gradient(
-                135deg,
-                #cdffeb 10%,
-                #cdffeb 35%,
-                #009f9d 35%,
-                #009f9d 60%,
-                #07456f 60%,
-                #07456f 67%,
-                #0f0a3c 67%,
-                #0f0a3c 100%
-            );
-        background-blend-mode: screen, overlay, hard-light, normal;
     }
 
     .heroSectionBgOver {
@@ -197,15 +183,15 @@
 
         .profileImage {
             z-index: 20;
-            box-shadow: -1px 11px 33px -10px #e5502b4b;
+            box-shadow: $homeProfileShadow;
-            clip-path: polygon(6% 8%, 88% 5%, 95% 91%, 7% 96%);
+            clip-path: $homeProfileClipFront;
         }
 
         .profileImageDummy {
             z-index: 10;
             background: $accentColor;
             opacity: 0.2;
-            clip-path: polygon(14% 4%, 95% 1%, 88% 96%, 2% 89%);
+            clip-path: $homeProfileClipBack;
         }
 
         @media (max-width: 690px) {
@@ -289,44 +275,44 @@
                     margin: 5px;
 
                     &.skill_framework {
-                        color: #e52b3e;
+                        color: $skillColor1
                     }
 
                     &.skill_platform {
-                        color: #e5752b;
+                        color: $skillColor2
                     }
 
                     &.skill_program {
-                        color: #18bb20;
+                        color: $skillColor3;
                     }
 
                     &.skill_os {
-                        color: #6d94e9;
+                        color: $skillColor4;
                     }
 
                     &.skill_language {
-                        color: #886af5;
+                        color: $skillColor5;
                     }
 
                     @media (prefers-color-scheme: light) {
-                        &.skill_os {
-                            color: #2b66e5;
-                        }
-
-                        &.skill_language {
-                            color: #6848da;
-                        }
-
                         &.skill_framework {
-                            color: #db1e31;
+                            color: $skillColor1Light;
                         }
 
                         &.skill_platform {
-                            color: #aa4f12;
+                            color: $skillColor2Light;
                         }
 
                         &.skill_program {
-                            color: #17681b;
+                            color: $skillColor3Light;
+                        }
+                        
+                        &.skill_os {
+                            color: $skillColor4Light;
+                        }
+
+                        &.skill_language {
+                            color: $skillColor5Light;
                         }
                     }
                 }
@@ -377,7 +363,7 @@
         height: calc(100% - 40px);
         background-color: $accentColor;
         border-radius: 100px;
-        box-shadow: 0 0 15px 0 rgba(229, 43, 62, 0.25);
+        box-shadow: $aboutCVShadow;
 
         &::before {
             content: " ";
@@ -388,20 +374,8 @@
             height: 5px;
             background-color: $accentColor;
             border-radius: 100px;
-            box-shadow: 0 0 15px 0 rgba(229, 43, 62, 0.25);
+            box-shadow: $aboutCVShadow;
         }
-
-        /*&::after {
-          content: " ";
-          position: absolute;
-          bottom: -10px;
-          left: 0;
-          width: 5px;
-          height: 5px;
-          background-color: $accentColor;
-          border-radius: 100px;
-          box-shadow: 0 0 15px 0 rgba(229, 43, 62, 0.25);
-        }*/
     }
 
     .entry {
@@ -487,9 +461,9 @@
         }
 
         &.entryTypeeducation {
-            --entry-color: #5070ff;
+            --entry-color: #{$aboutCVColorEdu};
             @media (prefers-color-scheme: light) {
-                --entry-color: #2347e9;
+                --entry-color: #{$aboutCVColorEduLight};
             }
         }
     }

src/pages/projects.module.scss

@@ -14,35 +14,12 @@
     flex-shrink: 0;
     position: relative;
 
-    .projectCardActivityIndicator {
-        position: absolute;
-        margin: 12px;
-        padding: 2px 5px;
-        border-radius: 3px;
-
-        &.activityIndicatorGreen {
-            background: #26de81;
-        }
-
-        &.activityIndicatorYellow {
-            background: #f7b731;
-        }
-
-        &.activityIndicatorRed {
-            background: #fc5c65;
-        }
-
-        &.activityIndicatorBlue {
-            background: #45aaf2;
-        }
-    }
-
     .projectCardImage {
         width: 100%;
         height: 250px;
         background-position: center;
         background-size: cover;
-        text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
+        text-shadow: $textShadow;
         color: white;
     }
 

src/pages/social.module.scss

@@ -17,7 +17,7 @@
             display: flex;
             padding: 10px;
             flex-direction: column-reverse;
-            text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
+            text-shadow: $textShadow;
             color: white;
             position: relative;