Dynamically loading CSS theme, removing all but darkly from index.html

- Fixes #333

1 files changed, 15 insertions, 3 deletions

diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 9d2e720e..b63f0cab 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -290,12 +290,24 @@ export const themes = [
 ];
 
 export function setTheme(theme: string = 'darkly') {
+  // unload all the other themes
   for (var i = 0; i < themes.length; i++) {
     let styleSheet = document.getElementById(themes[i]);
-    if (themes[i] == theme) {
-      styleSheet.removeAttribute('disabled');
-    } else {
+    if (styleSheet) {
       styleSheet.setAttribute('disabled', 'disabled');
     }
   }
+
+  // Load the theme dynamically
+  if (!document.getElementById(theme)) {
+    var head = document.getElementsByTagName('head')[0];
+    var link = document.createElement('link');
+    link.id = theme;
+    link.rel = 'stylesheet';
+    link.type = 'text/css';
+    link.href = `/static/assets/css/themes/${theme}.min.css`;
+    link.media = 'all';
+    head.appendChild(link);
+  }
+  document.getElementById(theme).removeAttribute('disabled');
 }