grishka/lemmy
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source 
- Fixes #333
This commit is contained in:
Dessalines 2019-11-11 19:24:40 -08:00
parent a4033baa4c
commit 408b0efd48
3 changed files with 21 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/src/index.html vendored
View file

@ -13,15 +13,7 @@
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" type="text/css" href="/static/assets/css/tribute.css" /> <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/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" /> <link rel="stylesheet" type="text/css" href="/static/assets/css/main.css" />
<!-- Scripts --> <!-- Scripts -->

4
ui/src/services/UserService.ts vendored
View file

@ -17,7 +17,9 @@ export class UserService {
if (jwt) { if (jwt) {
this.setUser(jwt); this.setUser(jwt);
} else { } else {
if (this.user.theme != 'darkly') {
setTheme(); setTheme();
}
console.log('No JWT cookie found.'); console.log('No JWT cookie found.');
} }
} }
@ -42,7 +44,9 @@ export class UserService {
private setUser(jwt: string) { private setUser(jwt: string) {
this.user = jwt_decode(jwt); this.user = jwt_decode(jwt);
if (this.user.theme != 'darkly') {
setTheme(this.user.theme); setTheme(this.user.theme);
}
this.sub.next({ user: this.user, unreadCount: 0 }); this.sub.next({ user: this.user, unreadCount: 0 });
console.log(this.user); console.log(this.user);
} }

18
ui/src/utils.ts vendored
View file

@ -290,12 +290,24 @@ export const themes = [
]; ];
export function setTheme(theme: string = 'darkly') { export function setTheme(theme: string = 'darkly') {
// unload all the other themes
for (var i = 0; i < themes.length; i++) { for (var i = 0; i < themes.length; i++) {
let styleSheet = document.getElementById(themes[i]); let styleSheet = document.getElementById(themes[i]);
if (themes[i] == theme) { if (styleSheet) {
styleSheet.removeAttribute('disabled');
} else {
styleSheet.setAttribute('disabled', 'disabled'); 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');
} }