renamed some css variables in preferences stylesheets

styles/preferences/clock.css

@@ -2,7 +2,7 @@
     display: flex;
     height: 10vh;
     width: 98vw;
-    border: var(--purple-highlighter) 5px solid;
+    border: var(--highlight-color) 5px solid;
     border-radius: 10px;
     margin-top: 3%;
     flex-direction: column;
@@ -11,13 +11,13 @@
     color: var(--text-color);
     font-size: clamp(1rem, 1.5rem, 2rem);
     gap: 5%;
-    background-color: var(--purple-background-color);
+    background-color: var(--light-background-color);
 }
 
 #clock-settings-container input {
     height: 80%;
-    background-color: var(--purple-background-color);
-    border: var(--purple-highlighter) 5px solid;
+    background-color: var(--light-background-color);
+    border: var(--highlight-color) 5px solid;
     border-radius: 10px;
     text-align: center;
     outline: none;

styles/preferences/greeting.css

@@ -6,9 +6,9 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    border: var(--purple-highlighter) 5px solid;
+    border: var(--highlight-color) 5px solid;
     border-radius: 10px;
-    background-color: var(--purple-background-color);
+    background-color: var(--light-background-color);
     gap: 5%;
     font-size: clamp(1rem, 1.5rem, 2rem);
     color: var(--text-color);
@@ -16,8 +16,8 @@
 
 #greeting-settings-container input {
     height: 80%;
-    background-color: var(--purple-background-color);
-    border: var(--purple-highlighter) 5px solid;
+    background-color: var(--light-background-color);
+    border: var(--highlight-color) 5px solid;
     border-radius: 10px;
     text-align: center;
     color: var(--text-color);

styles/preferences/main.css

@@ -1,22 +1,12 @@
 :root {
     --background-color: #062726;
-    --purple-background-color: #102B3F;
+    --light-background-color: #102B3F;
     --text-color: #E0E2DB;
-    --purple-text-color: #E2CFEA;
-    --purple-highlighter: #6247AA;
+    --light-text-color: #E2CFEA;
+    --highlight-color: #6247AA;
     font-family: 'Roboto Mono', monospace;
 }
 
-@media (prefers-color-scheme: light) {
-    :root {
-        --background-color: #fef5;
-        --purple-background-color: #feff;
-        --text-color: #323f;
-        --search-text-color: #535f53;
-        --purple-highlighter: #649f;
-    }
-}
-
 body {
     overflow: hidden;
     background-color: var(--background-color);

styles/preferences/quote.css

@@ -7,8 +7,8 @@
     justify-content: center;
     align-items: center;
     gap: 1%;
-    background-color: var(--purple-background-color);
-    border: var(--purple-highlighter) 5px solid;
+    background-color: var(--light-background-color);
+    border: var(--highlight-color) 5px solid;
     border-radius: 10px;
     font-size: clamp(1rem, 1.5rem, 2rem);
     color: var(--text-color);

styles/preferences/selectSearchEngine.css

@@ -5,9 +5,9 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    border: var(--purple-highlighter) 5px solid;
+    border: var(--highlight-color) 5px solid;
     border-radius: 10px;
-    background-color: var(--purple-background-color);
+    background-color: var(--light-background-color);
     gap: 5%;
     font-size: 2rem;
     color: var(--text-color);
@@ -17,7 +17,7 @@
     font-size: 3rem;
     color: var(--text-color);
     text-align: center;
-    border: var(--purple-highlighter) 5px solid;
+    border: var(--highlight-color) 5px solid;
     border-radius: 10px;
-    background-color: var(--purple-background-color);
+    background-color: var(--light-background-color);
 }