Add files via upload

Scripts/color.js

@@ -0,0 +1,73 @@
+document.addEventListener("DOMContentLoaded", function () {
+    // Get elements
+    const textColorInput = document.getElementById("text-color");
+    const weatherWidget = document.getElementById("weather-widget");
+    const weatherDetails = weatherWidget ? weatherWidget.querySelectorAll("*") : []; // All nested elements in weather widget
+    const quickLinksDiv = document.getElementById("quick-links-section");
+    const quickLinks = quickLinksDiv ? quickLinksDiv.querySelectorAll("a") : [];
+    const clock = document.getElementById("clock");
+    const searchInput = document.getElementById("search-query");
+
+    // Get settings and quicklinks icons
+    const settingsIcon = document.getElementById("settings-icon");
+    const quicklinksIcon = document.getElementById("quicklinks-icon");
+
+    // Get Save button
+    const saveSettingsButton = document.getElementById("save-settings");
+
+    // Load existing text color from localStorage
+    const existingTextColor = localStorage.getItem("textColor") || "#FFFFFF";
+
+    // Apply the existing text color on page load
+    applyTextColor(existingTextColor);
+    textColorInput.value = existingTextColor;
+
+    // Listen for Save button click to apply and save the color
+    saveSettingsButton.addEventListener("click", () => {
+        const newColor = textColorInput.value.trim();
+        if (newColor) {
+            applyTextColor(newColor);
+            localStorage.setItem("textColor", newColor); // Save to localStorage
+        }
+    });
+
+    /**
+     * Function to apply text color to specific elements on the page
+     * @param {string} color 
+     */
+    function applyTextColor(color) {
+        if (weatherWidget) {
+            weatherWidget.style.setProperty("color", color, "important");
+            weatherDetails.forEach(el => el.style.setProperty("color", color, "important"));
+        }
+
+        // Apply color to clock (time)
+        if (clock) {
+            clock.style.setProperty("color", color, "important");
+        }
+
+        // Apply color to search bar text
+        if (searchInput) {
+            searchInput.style.setProperty("color", color, "important");
+        }
+
+        // Apply color to quick links (individual links within the section)
+        quickLinks.forEach(link => {
+            link.style.color = color;
+        });
+
+        // Apply color to all H1 elements
+        const h1Elements = document.querySelectorAll("h1");
+        h1Elements.forEach(h1 => {
+            h1.style.setProperty("color", color, "important");
+        });
+
+        // Apply color to Settings and QuickLinks icons
+        if (settingsIcon) {
+            settingsIcon.style.setProperty("color", color, "important");
+        }
+        if (quicklinksIcon) {
+            quicklinksIcon.style.setProperty("color", color, "important");
+        }
+    }
+});

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "StyTab",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Stytab - A minimalist Startpage that meets your needs.",
   "chrome_url_overrides": {
     "newtab": "startpage.html"

startpage.html

@@ -63,7 +63,7 @@ <h2>Weather Settings</h2>
 
   <!-- Settings icon -->
   <div class="settings" id="settings-icon">
-    <img src="icons/setting-icon.svg" alt="⚙" style="width: 25px; height: 25px;">
+    <img src="icons/setting-icon.svg" alt="⚙" style="width: 25px; height: 25px;"> 
   </div>
 
   <!-- QuickLinks icon -->
@@ -105,6 +105,10 @@ <h2>Settings</h2>
         <option value="24">24-hour</option>
     </select>
 
+    <label for="text-color">Custom Text Color (Hex):</label>
+    <input type="text" id="text-color" placeholder="#FFFFFF">
+
+
     <div class="toggle-container">
       <label for="toggle-time">Show Time:</label>
       <label class="switch">
@@ -113,6 +117,7 @@ <h2>Settings</h2>
       </label>
     </div>
 
+
     <!-- Styled toggle switch for search bar -->
     <div class="toggle-container">
         <label for="toggle-search">Show Search Bar:</label>
@@ -170,5 +175,6 @@ <h2>QuickLinks</h2>
   <script src="Scripts/settings.js"></script>
   <script src="Scripts/quicklinks.js"></script>
   <script src="Scripts/weather.js"></script>
+    <script src="Scripts/color.js"></script>
 </body>
 </html>

styles/settings.css

@@ -94,6 +94,7 @@
   cursor: pointer;
   transition: background-color 0.3s ease;
   width: 100%;
+  margin-bottom: 30px;
 }
 
 .settings-sidebar button:hover {