diff --git a/ui/src/index.html b/ui/src/index.html
index e427b953..933cdc68 100644
--- a/ui/src/index.html
+++ b/ui/src/index.html
@@ -13,15 +13,7 @@
-
-
-
-
-
-
-
-
diff --git a/ui/src/services/UserService.ts b/ui/src/services/UserService.ts
index 5ca5ff07..b6d8b768 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 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');
}