enable swtiching built-in themes on-the-fly

javascript/settings.js

@@ -9,12 +9,13 @@ const monitoredOpts = [
 
 const AppyOpts = [
   { compact_view: (val) => toggleCompact(val) },
+  { gradio_theme: (val, old) => setTheme(val, old) },
   { font_size: (val) => setFontSize(val) },
 ];
 
 async function updateOpts(json_string) {
   const settings_data = JSON.parse(json_string);
-  opts = settings_data.values;
+  const new_opts = settings_data.values;
   opts_metadata = settings_data.metadata;
 
   for (const op of monitoredOpts) {
@@ -22,16 +23,18 @@ async function updateOpts(json_string) {
     const callback = op[key];
     if (opts[key] && opts[key] !== settings_data.values[key]) {
       log('updateOpts', key, opts[key], settings_data.values[key]);
-      if (callback) callback(opts[key]);
+      if (callback) callback(new_opts[key], opts[key]);
     }
   }
 
   for (const op of AppyOpts) {
     const key = Object.keys(op)[0];
     const callback = op[key];
-    if (callback) callback(settings_data.values[key]);
+    if (callback) callback(new_opts[key], opts[key]);
   }
 
+  opts = new_opts;
+
   Object.entries(opts_metadata).forEach(([opt, meta]) => {
     if (!opts_tabs[meta.tab_name]) opts_tabs[meta.tab_name] = {};
     if (!opts_tabs[meta.tab_name].unsaved_keys) opts_tabs[meta.tab_name].unsaved_keys = new Set();

javascript/ui.js

@@ -7,6 +7,7 @@ let img2img_textarea;
 const wait_time = 800;
 const token_timeouts = {};
 let uiLoaded = false;
+window.args_to_array = Array.from; // Compatibility with e.g. extensions that may expect this to be around
 
 function rememberGallerySelection(name) {
   // dummy
@@ -64,7 +65,20 @@ function extract_image_from_gallery(gallery) {
   return [gallery[index]];
 }
 
-window.args_to_array = Array.from; // Compatibility with e.g. extensions that may expect this to be around
+async function setTheme(val, old) {
+  if (!old) return;
+  const links = Array.from(document.getElementsByTagName('link')).filter((l) => l.href.includes(old));
+  for (const link of links) {
+    const href = link.href.replace(old, val);
+    const res = await fetch(href);
+    if (res.ok) {
+      log('setTheme:', old, val);
+      link.href = link.href.replace(old, val);
+    } else {
+      log('setTheme: CSS not found', val);
+    }
+  }
+}
 
 function setFontSize(val) {
   const size = val || opts.font_size;