fix css

Author: Fedorse

index.html

@@ -7,17 +7,14 @@
     <title>
       Sorting Algorithm Visualization: Control Speed and Sorting Size
     </title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      rel="preload"
       href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=SUSE:[email protected]&display=swap"
-      as="style"
-      onload="this.onload=null;this.rel='stylesheet'"
+      rel="stylesheet"
+      media="print"
+      onload="this.media='all'"
     />
-    <noscript
-      ><link
-        rel="stylesheet"
-        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=SUSE:[email protected]&display=swap"
-    /></noscript>
     <link rel="canonical" href="https://algorithms-virid.vercel.app/" />
     <meta name="theme-color" content="hsl(230, 23%, 20%)" />
     <meta

src/index.css

@@ -1,4 +1,34 @@
-@import 'variables.css';
+:root {
+  --primary-color: hsl(230, 23%, 20%);
+  --text-color: hsl(0, 8%, 97%);
+  --secondary-text-color: hsl(214, 33%, 65%);
+  --icon-width-large: 3rem;
+  --icon-width-medium: 2.5rem;
+  --icon-width-small: 1.5rem;
+}
+
+/* light mode */
+:root[data-theme='light'] {
+  --background-color: hsl(210, 36%, 96%);
+  --active-color: hsl(228, 31%, 34%);
+  --bar-color: hsla(230, 10%, 46%, 0.1);
+  --color-button: hsl(230, 23%, 20%);
+  --highlight-compare-color: hsla(27, 87%, 67%, 0.8);
+  --highlight-active-color: hsla(11, 58%, 45%, 0.8);
+  --highlight-pivot-color: hsla(248, 54%, 67%, 0.8);
+}
+
+/* dark mode */
+:root[data-theme='dark'] {
+  --background-color: hsl(230, 23%, 20%);
+  --active-color: hsl(226, 31%, 34%);
+  --bar-color: hsla(232, 10%, 46%, 0.3);
+  --color-button: hsl(0, 8%, 97%);
+  --highlight-compare-color: hsl(27, 87%, 67%);
+  --highlight-active-color: hsl(11, 58%, 45%);
+  --highlight-pivot-color: hsl(248, 54%, 67%);
+}
+
 * {
   margin: 0;
   padding: 0;