Dynamically loading CSS theme, removing all but darkly from index.html
- Fixes #333
This commit is contained in:
parent
e88ccd563c
commit
0ab36f20a2
3 changed files with 21 additions and 13 deletions
8
ui/src/index.html
vendored
8
ui/src/index.html
vendored
|
@ -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 -->
|
||||
|
|
8
ui/src/services/UserService.ts
vendored
8
ui/src/services/UserService.ts
vendored
|
@ -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);
|
||||
}
|
||||
|
|
18
ui/src/utils.ts
vendored
18
ui/src/utils.ts
vendored
|
@ -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');
|
||||
}
|
||||
|
|
Reference in a new issue