UI Update

index.css

@@ -53,21 +53,23 @@ html {
     background: #0a0a1002;
 }
 ::-webkit-scrollbar-thumb{
-   background-color: #0ba360;
+   background-color: var(--primary-theme-color);
    border-radius: 2px;
 
 }
 :root{
 
     cursor:default;
     --border-color: #27272a;
-    --nav-color-one: #0d11179a;
-    --nav-color-two: #12161f;
-    --body-color: #0d1016;
+    --nav-color-one: #0d0d179a;
+    --nav-color-two: #0d0618;
+    --body-color: #0a0611;
     --dark-text: #101010;
     --light-text: #ffffff;
     --light-text-secondary: #b9b9b9;
     --light-text-desc: #d8d8d8;
+    --primary-theme-color: #7937e8;
+    --secondary-theme-color: #ae8bfd;
 }
 
 body{
@@ -152,7 +154,7 @@ header{
     fill: var(--light-text-secondary);
 }
 .star-on-github-button:hover{
-    color: #0ba360;
+    color: var(--primary-theme-color)
 }
 
 #visual-toggle-button{
@@ -253,9 +255,9 @@ main{
     font-size: 2rem;
     padding: 15px 30px;
     color: white;
-    background: #0ba360;
-    background: linear-gradient(to right,#0ba360,#3cba92);
-    box-shadow: 0px 14px 56px -11px #0ba360;
+    background: var(--primary-theme-color);
+    background: linear-gradient(to right,var(--primary-theme-color),var(--secondary-theme-color));
+    box-shadow: 0px 14px 56px -11px var(--primary-theme-color);
     border: none;
     letter-spacing: 0.05em;
     border-radius: 8px;
@@ -457,7 +459,7 @@ main{
   }
   .footerContainer a{
     text-decoration: none;
-    color: #0ba360;
+    color: var(--secondary-theme-color);
     transition: all .3s;
   }
   .fa-copyright{

preloader.css

@@ -3,16 +3,26 @@
     width: 100%;
     height: 100vh;
     position: fixed;
-    background-color: #0d1016;
+    background-color: #0a0611;
     top: 0;
     display: flex;
     align-items: center;
     justify-content: center;
+    --border-color: #27272a;
+    --nav-color-one: #0d0d179a;
+    --nav-color-two: #0d0618;
+    --body-color: #0a0611;
+    --dark-text: #101010;
+    --light-text: #ffffff;
+    --light-text-secondary: #b9b9b9;
+    --light-text-desc: #d8d8d8;
+    --primary-theme-color: #7937e8;
+    --secondary-theme-color: #ae8bfd;
 }
 .loader {
     width: 120px;
     aspect-ratio: 1;
-    background: #0d1016;
+    background: #0a0611;
     border-radius: 50%;
     position: relative;
     padding: 4px;
@@ -43,7 +53,7 @@
   .loader .dots-container .dot-row .dot {
     width: 4%;
     aspect-ratio: 1;
-    background: #0ba360;
+    background: #411391;
     border-radius: 50%;
     box-shadow: 0px 0px 5px 0px rgb(255, 255, 255);
   }
@@ -418,16 +428,15 @@
     border-radius: 50%;
     display: grid;
     place-content: center;
-    background: #0ba360;
-    background: linear-gradient(to right,#0ba360,#3cba92);
-    box-shadow: 0px 14px 56px -11px #0ba360;
-    border-right: 1px solid #13cc7c;
-    border-bottom: 1px solid #0ba360;
+    background: var(--primary-theme-color);
+    box-shadow: 0px 14px 56px -11px var(--primary-theme-color);
+    border-right: 1px solid var(--primary-theme-color);
+    border-bottom: 1px solid var(--primary-theme-color);
   }
 
   .loader .center-div .svg {
     width: 15px;
-    fill: #0ba360;
+    fill: var(--primary-theme-color);
   }
 
   .loader .glass {