From 0ab36f20a275b7ee5319db26cc25dae69c94cb53 Mon Sep 17 00:00:00 2001
From: Dessalines <happydooby@gmail.com>
Date: Mon, 11 Nov 2019 19:24:40 -0800
Subject: [PATCH] Dynamically loading CSS theme, removing all but darkly from
 index.html

- Fixes #333
---
 ui/src/index.html              |  8 --------
 ui/src/services/UserService.ts |  8 ++++++--
 ui/src/utils.ts                | 18 +++++++++++++++---
 3 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/ui/src/index.html b/ui/src/index.html
index e427b9533..933cdc684 100644
--- 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 5ca5ff07e..b6d8b7686 100644
--- 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 9d2e720eb..b63f0cab1 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');
 }