add theoretical support for themes

scripts/injector.js

@@ -1,5 +1,5 @@
 let scriptsToInject = ["jquery", "clock", "getPreferences", "getjson", "search", "bookmarks", "greetings", "randomQuote"]
-let stylesToInject = ["main", "greetings", "searchBar", "bookmarks"]
+let stylesToInject = ["main", "greetings", "searchBar", "bookmarks", "themes"]
 
 for(let i = 0; i < scriptsToInject.length; i++) {
     let scriptToInject = document.createElement("script")

styles/main.css

@@ -1,25 +1,15 @@
 :root {
-    --background-color: #062726;
-    --light-background-color: #102B3F;
-    --text-color: #E0E2DB;
-    --light-text-color: #E2CFEA;
-    --highlighter: #6247AA;
+    --background-color: #1d2021;
+    --light-background-color: #32302f;
+    --text-color: #fbf1c7;
+    --light-text-color: #d5c4a1;
+    --highlighter: #fb4934;
     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);
+    background-color:  var(--background-color) !important;
     color-scheme: light dark;
 }
 
@@ -34,15 +24,16 @@ ion-icon[name="settings-outline"] {
     position: absolute;
     top: 2%;
     right: 2%;
-    background-color: var(--highlighter);
-    border: var(--search-text-color) 3px solid;
+    background-color: var(--background-color);
+    border: var(--light-text-color) 3px solid;
     border-radius: 50vh;
     padding: 1%;
     transition: 250ms;
 }
 
 ion-icon[name="settings-outline"]:hover {
-    background-color: var(--highlighter);
+    background-color: var(--light-background-color);
+    border-color: var(--highlighter);
     transform: scale(1.25);
     cursor: pointer;
     animation: spin 1.5s ease 250ms;

styles/themes.css

@@ -0,0 +1,7 @@
+.the_baum {
+    --background-color: #062726;
+    --light-background-color: #102B3F;
+    --text-color: #E0E2DB;
+    --light-text-color: #E2CFEA;
+    --highlighter: #6247AA;
+}