Removal of hardcoded colors

src/apps/sorting-visualizer/components/cell/cell.module.scss

@@ -18,8 +18,8 @@
       width: var(--cell-size);
       height: var(--cell-size);
       margin: 0 calc(var(--cell-margin) / 2);
-      color: black;
-      background-color: white;
+      color: theme.$dark;
+      background-color: theme.$light;
       border: 1px solid theme.$base;
       border-radius: 4px;
       box-shadow: 0 4px 4px theme.$shadow1;

src/apps/sorting-visualizer/components/controller/controls.module.scss

@@ -17,20 +17,20 @@
         flex: 1;
         width: 100%;
         padding: 5px;
-        color: black;
-        background-color: white;
-        border: 1px solid black;
+        color: theme.$dark;
+        background-color: theme.$light;
+        border: 1px solid theme.$dark;
         border-radius: 4px;
       }
 
       .arrayInput:placeholder-shown {
         border: 1px solid transparent;
-        outline: 2px solid red;
+        outline: 2px solid theme.$error;
       }
 
       .rndmBtn {
         padding: 5px 10px;
-        color: white;
+        color: theme.$light;
         background-color: theme.$primary;
         border: none;
         border-radius: 4px;

src/apps/sorting-visualizer/components/navbar/navbar.module.scss

@@ -55,7 +55,7 @@
       }
 
       a.active {
-        color: white;
+        color: theme.$light;
         background-color: theme.$primary;
       }
 

src/apps/sorting-visualizer/components/theme/mode-icon.module.scss

@@ -1,15 +1,15 @@
+@use "/src/styles/theme";
+
 .iconBtn {
   position: absolute;
-  right: 25px;
+  right: 20px;
   bottom: 15px;
   padding: 5px;
   cursor: pointer;
-  background-color: white;
-  border: 1px solid black;
+  background-color: theme.$light;
+  border: 1px solid theme.$dark;
   border-radius: 50%;
   opacity: 0.5;
-  fill: red;
-  transition: all 0.5s;
 
   img {
     width: 25px;

src/apps/sorting-visualizer/components/visualizer/visualizer.module.scss

@@ -24,5 +24,5 @@
 .warning {
   font-size: 1.15rem;
   font-weight: 500;
-  color: rgb(255 47 47);
+  color: theme.$error;
 }

src/index.scss

@@ -37,7 +37,7 @@ body {
   top: 0;
   left: 0;
   width: 100vw;
-  height: 100vh;
+  height: 100%;
   pointer-events: none;
 
   * {

src/styles/_colors.scss

@@ -5,3 +5,4 @@ $white2: rgb(256 256 256 / 40%);
 $black1: rgb(0 0 0 / 15%);
 $black2: rgb(0 0 0 / 40%);
 $blue1: #2b4bfe;
+$red1: red;

src/styles/theme.scss

@@ -1,5 +1,8 @@
+$dark: var(--dark);
+$light: var(--light);
 $base: var(--base);
 $background: var(--background);
 $primary: var(--primary);
 $shadow1: var(--shadow1);
 $shadow2: var(--shadow2);
+$error: var(--error);

src/styles/themes/_dark.scss

@@ -1,9 +1,12 @@
 @use "../colors";
 
 @mixin dark-theme {
+  --light: #{colors.$white};
+  --dark: #{colors.$black};
   --base: #{colors.$white};
   --background: #{colors.$black};
   --primary: #{colors.$blue1};
   --shadow1: #{colors.$white1};
   --shadow2: #{colors.$white2};
+  --error: #{colors.$red1};
 }

src/styles/themes/_light.scss

@@ -1,9 +1,12 @@
 @use "../colors";
 
 @mixin light-theme {
+  --light: #{colors.$white};
+  --dark: #{colors.$black};
   --base: #{colors.$black};
   --background: #{colors.$white};
   --primary: #{colors.$blue1};
   --shadow1: #{colors.$black1};
   --shadow2: #{colors.$black2};
+  --error: #{colors.$red1};
 }