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

- Fixes #333

diff --git a/ui/src/index.html b/ui/src/index.html
index e427b9533f7e8851a68e6bf2c211319354ba456c..933cdc68486be90d1202af8541ae6a6f643f376f 100644 (file)
--- a/ui/src/index.html
+++ b/ui/src/index.html
@@ -13,15 +13,7 @@
 
   <!-- Styles -->
   <link rel="stylesheet" type="text/css" href="/static/assets/css/tribute.css" />
-  <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/litera.min.css" id="litera" />
-  <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/minty.min.css" id="minty" />
-  <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/solar.min.css" id="solar" />
-  <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/united.min.css" id="united" />
-  <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/cyborg.min.css" id="cyborg" />
   <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/darkly.min.css" id="darkly" />
-  <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/journal.min.css" id="journal" />
-  <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/sketchy.min.css" id="sketchy" />
-  <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/vaporwave.min.css" id="vaporwave" />
   <link rel="stylesheet" type="text/css" href="/static/assets/css/main.css" />
 
   <!-- Scripts -->

diff --git a/ui/src/services/UserService.ts b/ui/src/services/UserService.ts
index 5ca5ff07e757f8c227d8158abf317629e25e70cb..b6d8b768675d4cc70791529f8c6166710c9ef710 100644 (file)
--- a/ui/src/services/UserService.ts
+++ b/ui/src/services/UserService.ts
@@ -17,7 +17,9 @@ export class UserService {
     if (jwt) {
       this.setUser(jwt);
     } else {
-      setTheme();
+      if (this.user.theme != 'darkly') {
+        setTheme();
+      }
       console.log('No JWT cookie found.');
     }
   }
@@ -42,7 +44,9 @@ export class UserService {
 
   private setUser(jwt: string) {
     this.user = jwt_decode(jwt);
-    setTheme(this.user.theme);
+    if (this.user.theme != 'darkly') {
+      setTheme(this.user.theme);
+    }
     this.sub.next({ user: this.user, unreadCount: 0 });
     console.log(this.user);
   }

diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 9d2e720eb6ddf829315f2bf3ff894c352a24e693..b63f0cab19e882287a450933c519fc955fbdf404 100644 (file)
--- 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');
 }