primative theme cuztomize and preset settings

css/style.css

@@ -23,7 +23,7 @@
 
   --time: 250ms;
 
-
+  /*not sure where these vars are used*/
   --input-color: #99A3BA;
   --input-border: #CDD9ED;
   --input-background: #fff;

index.html

@@ -259,6 +259,14 @@
                     <button class="save-button" id="upload">Upload Game Data</button>
                     <p class="upload-result"></p>
                 </div>
+                
+                <h5>Cloak and Mask presets</h5>
+                <select id="presets">
+                    <option value="classroom">Google Classroom</option>
+                    <option value="drive">Google Drive</option>
+                    <option value="mail">Google Mail</option>
+                  </select>
+                <button onclick="updatePreset()">Submit</button>
 
                 <div class="setting">
                     <h5>Cloak</h5>
@@ -336,6 +344,37 @@
                         </div>
                     </label>
                 </div>
+
+
+                <h4>Apperance</h4>
+                <h6>Theme and stuff - yet again changes take place upon refresh</h6>
+                <label for="bg">Background Color:</label>
+                <input type="color" id="bg" name="bg" value="#202020">
+                <br>
+                <label for="block-color">Block Color:</label>
+                <input type="color" id="block-color" name="block-color" value="#2b2b2b">
+                <br>
+                <label for="button-color">Button Color:</label>
+                <input type="color" id="button-color" name="button-color" value="#373737">
+                <br>
+                <label for="games-color">Games Color:</label>
+                <input type="color" id="games-color" name="games-color" value="#373737a6">
+                <br>
+                <label for="hover-color">Hover Color:</label>
+                <input type="color" id="hover-color" name="hover-color" value="#3c3c3c">
+                <br>
+                <label for="scrollbar-color">Scrollbar Color:</label>
+                <input type="color" id="scrollbar-color" name="scrollbar-color" value="#434343">
+                <br>
+                <label for="scroll-track-color">Scroll Track Color:</label>
+                <input type="color" id="scroll-track-color" name="scroll-track-color" value="#111">
+                <br>
+                <label for="font-color">Font Color:</label>
+                <input type="color" id="font-color" name="font-color" value="#dcddde">
+                <br>
+                <button class="save-button" onclick="restoreColorChanges()">Restore Defaults</button>
+                <button class="save-button" onClick="saveColorChanges()">Save Changes</button>
+
             </div>
         </div>
     </section>

js/index.js

@@ -448,6 +448,54 @@ keySlots.forEach((slot) => {
     });
 });
 
+const defaultColorSettings = {
+    'bg': '#202020',
+    'block-color': '#2b2b2b',
+    'button-color': '#373737',
+    'games-color': '#373737a6',
+    'hover-color': '#3c3c3c',
+    'scrollbar-color': '#434343',
+    'scroll-track-color': '#111',
+    'font-color': '#dcddde'
+};
+
+const colorSettings = JSON.parse(localStorage.getItem('colorSettings')) || defaultColorSettings;
+            
+
+// Set input values
+Object.keys(colorSettings).forEach(key => {
+    const inputElement = document.getElementById(key);
+    if (inputElement) {
+        inputElement.value = colorSettings[key];
+    }
+});
+
+// Set CSS variables
+Object.entries(colorSettings).forEach(([key, value]) => {
+    document.documentElement.style.setProperty(`--${key}`, value);
+});
+
+// Save changes button event listener
+function saveColorChanges() {
+    const inputs = document.querySelectorAll('input[type="color"]');
+    const newColorSettings = {};
+    
+    inputs.forEach(input => {
+        newColorSettings[input.id] = input.value;
+    });
+
+    // Save to local storage
+    localStorage.setItem('colorSettings', JSON.stringify(newColorSettings));
+    alert("Colors saved! Changes will take place upon reload");
+}
+
+// Restore defaults button event listener
+function restoreColorChanges() {
+    // Reset to default values
+    localStorage.removeItem('colorSettings');
+    alert("Defaults Restored! Changes will take place upon reload");
+}
+
 const preferencesDefaults = {
     cloak: true,
     cloakUrl: "https://classroom.google.com",
@@ -472,6 +520,36 @@ maskCheckbox.checked = preferences.mask;
 maskTitle.value = preferences.maskTitle;
 maskIcon.value = preferences.maskIconUrl;
 
+const presets = {
+    classroom: {
+      url: 'https://classroom.google.com/',
+      title: 'Home',
+      icon: 'https://ssl.gstatic.com/classroom/ic_product_classroom_32.png'
+    },
+    drive: {
+      url: 'https://drive.google.com/',
+      title: 'My Drive - Google Drive',
+      icon: 'https://ssl.gstatic.com/images/branding/product/2x/hh_drive_36dp.png'
+    },
+    mail: {
+      url: 'https://mail.google.com/',
+      title: 'Inbox (12) - Google Mail',
+      icon: 'https://www.gstatic.com/images/branding/product/2x/gmail_2020q4_512dp.png'
+    }
+  };
+
+function setPreset(object) {
+    preferences.cloakUrl = object.url;
+    preferences.maskTitle = object.title;
+    preferences.maskIconUrl = object.icon;
+    localStorage.setItem('preferences', JSON.stringify(preferences));
+    alert("Preset will take place upon next opening!");
+}
+
+function updatePreset() {
+    setPreset(presets[document.getElementById("presets").value]);
+}
+
 if (preferences.cloak && (window.location.href == window.top.location.href)) {
     if (popupsAllowed()) {
         makecloak();