From 408b0efd48d73e1222b5e783fe1f02b9573f8e1b Mon Sep 17 00:00:00 2001 From: Dessalines 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 @@ - - - - - - - - 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'); }