make color customizable

Author: androettop

src/components/Layout/Layout.module.css

@@ -1,7 +1,14 @@
 .wrapper {
-    background-color: var(--color-dark);
-    background-image: url('../../images/bg-light.svg'),  url('../../images/noise.jpg');
-    background-repeat: no-repeat, repeat;
-    background-position: top center, center center;
+    background: radial-gradient(
+        ellipse at top,
+        hsla(var(--color-base-primary), 0.22) 0%,
+        hsla(var(--color-base-primary), 0.06) 30%,
+        hsla(var(--color-base-primary), 0.01) 50%,
+        hsla(var(--color-base-primary), 0) 60%
+      ),  url('../../images/noise.jpg'), var(--color-dark);
+    background-repeat: no-repeat, repeat, repeat;
+    background-position: top center, center center, center;
+    background-size: 1440px 280px, auto, auto;
     min-height: 100%;
-}
+    background-blend-mode: normal, luminosity, normal;
+}

src/global.css

@@ -10,14 +10,23 @@ body,
 }
 
 :root {
+  /* All the palette is based on the primary HSL color */
+  --color-hue: 287;
+  --color-saturation: 100%;
+  --color-lightness: 50%;
+
+  --color-base-primary: var(--color-hue), var(--color-saturation), var(--color-lightness);
+
+  /* Palette */
   --color-white: #fff;
-  --color-dark: #17131b;
-  --color-light: #c2bcc9;
-  --color-primary: #a652da;
-  --color-secondary: #4c3c60;
+  --color-dark: hsl(var(--color-hue), calc(var(--color-lightness) * 0.17), calc(var(--color-lightness) * 0.18));
+  --color-light: hsl(var(--color-hue), calc(var(--color-lightness) * 0.11), calc(var(--color-lightness) * 1.52));
+  --color-primary: hsl(var(--color-base-primary));
+  --color-secondary: hsl(var(--color-hue), calc(var(--color-lightness) * 0.23), calc(var(--color-saturation) * 0.62))
 }
 
 body {
   font-family: "JetBrains Mono", monospace;
   color: white;
+  background-color: var(--color-dark);
 }