Update light theme and create manual toggling function between themes

Author: gsbm

css/style.css

@@ -35,17 +35,22 @@ Colors
 Colors : Light
 ****************************************************************************************/
 :root.light {
-    --color-foreground-100: rgb(63, 63, 70, 1);
-    --color-foreground-075: rgba(63, 63, 70, 0.75);
-    --color-foreground-050: rgba(63, 63, 70, 0.5);
-    --color-foreground-025: rgba(63, 63, 70, 0.25);
-    --color-foreground-010: rgba(63, 63, 70, 0.1);
-    --color-foreground-005: rgba(63, 63, 70, 0.05);
-    --color-background-100: rgba(250, 250, 250, 1);
-    --color-background-075: rgba(250, 250, 250, 0.75);
-    --color-background-050: rgba(250, 250, 250, 0.5);
-    --color-background-025: rgba(250, 250, 250, 0.25);
-    --color-background-010: rgba(250, 250, 250, 0.1);
+    --color-foreground-100: rgb(46, 43, 41);
+    --color-foreground-075: rgba(46, 43, 41, 0.75);
+    --color-foreground-050: rgba(46, 43, 41, 0.5);
+    --color-foreground-025: rgba(46, 43, 41, 0.25);
+    --color-foreground-010: rgba(46, 43, 41, 0.1);
+    --color-foreground-005: rgba(46, 43, 41, 0.05);
+    --color-background-100: rgb(254, 250, 239);
+    --color-background-075: rgba(254, 250, 239, 0.75);
+    --color-background-050: rgba(254, 250, 239, 0.5);
+    --color-background-025: rgba(254, 250, 239, 0.25);
+    --color-background-010: rgba(254, 250, 239, 0.1);
+    --color-warning-100: rgb(155, 144, 0);
+    --color-warning-075: rgba(155, 144, 0, 0.75);
+    --color-warning-050: rgba(155, 144, 0, 0.5);
+    --color-warning-025: rgba(155, 144, 0, 0.25);
+    --color-warning-010: rgba(155, 144, 0, 0.1);
 }
 :root.light .status-content {
     background-color: var(--color-background-100);

index.html

@@ -177,7 +177,8 @@
             </div>
         </form>
         <div class="footer-container">
-            <span>By using Autoassets, you agree <a href="legal.html">Terms of Service</a> • <a href="https://github.com/gsbm/autoassets" target="_blank"><span class="icon icon-github"></span> GitHub</a></span>
+            <span>By using Autoassets, you agree <a href="legal.html">Terms of Service</a></span>
+            <a href="https://github.com/gsbm/autoassets" target="_blank"><span class="icon icon-github"></span> GitHub</a>
         </div>
     </div>
 

js/script.js

@@ -11,26 +11,6 @@ Language handler
 // }
 
 
-/****************************************************************************************
-Update sheme based on user preference
-****************************************************************************************/
-function updateColorScheme(type) {
-    const root = document.querySelector(':root')
-    if (type === "light") {
-        root.classList.add('light');
-    } else {
-        root.classList.remove('light');
-    }
-}
-if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
-    updateColorScheme("light");
-}
-window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-    const new_color_scheme = event.matches ? "dark" : "light";
-    updateColorScheme(new_color_scheme);
-});
-
-
 /****************************************************************************************
 Prompt presets list
 ****************************************************************************************/

js/utils.js

@@ -86,3 +86,33 @@ function addFormEvent(event) {
 
     previousEvent  = event;
 }
+
+/****************************************************************************************
+Update sheme based on user preference
+****************************************************************************************/
+function updateColorScheme(type) {
+    const root = document.querySelector(':root')
+    if (type === "light") {
+        root.classList.add('light');
+    } else {
+        root.classList.remove('light');
+    }
+}
+
+function toggleColorScheme() {
+    const root = document.querySelector(':root');
+    if (root.classList.contains('light')) {
+        updateColorScheme("dark");
+    } else {
+        updateColorScheme("light");
+    }
+}
+
+if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+    updateColorScheme("light");
+}
+
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+    const new_color_scheme = event.matches ? "dark" : "light";
+    updateColorScheme(new_color_scheme);
+});