From 13771d56cd948addc93569dcf7a67d7641bbd747 Mon Sep 17 00:00:00 2001 From: Lorenz Schmidt Date: Wed, 10 Jun 2020 17:11:51 +0200 Subject: [PATCH] Add default themes with media queries (#796) * Indicate unstable API in README and mdbook * Support user preference for light and dark theme * Add default themes and load them in `setTheme` * Fixes #758 --- ui/src/components/user.tsx | 2 +- ui/src/index.html | 3 ++- ui/src/services/UserService.ts | 4 +--- ui/src/utils.ts | 19 ++++++++++++++----- 4 files changed, 18 insertions(+), 10 deletions(-) diff --git a/ui/src/components/user.tsx b/ui/src/components/user.tsx index eded9998c..7cd460a17 100644 --- a/ui/src/components/user.tsx +++ b/ui/src/components/user.tsx @@ -922,7 +922,7 @@ export class User extends Component { handleUserSettingsThemeChange(i: User, event: any) { i.state.userSettingsForm.theme = event.target.value; - setTheme(event.target.value); + setTheme(event.target.value, true); i.setState(i.state); } diff --git a/ui/src/index.html b/ui/src/index.html index f39773d02..7cea8c4e8 100644 --- a/ui/src/index.html +++ b/ui/src/index.html @@ -15,7 +15,8 @@ - + + diff --git a/ui/src/services/UserService.ts b/ui/src/services/UserService.ts index 47e28c73e..786d5d07e 100644 --- a/ui/src/services/UserService.ts +++ b/ui/src/services/UserService.ts @@ -41,9 +41,7 @@ export class UserService { private setUser(jwt: string) { this.user = jwt_decode(jwt); - if (this.user.theme != 'darkly') { - setTheme(this.user.theme); - } + setTheme(this.user.theme, true); this.sub.next({ user: this.user }); console.log(this.user); } diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 81bb01475..93b9cab08 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -404,7 +404,7 @@ export function getMomentLanguage(): string { return lang; } -export function setTheme(theme: string = 'darkly') { +export function setTheme(theme: string = 'darkly', loggedIn: boolean = false) { // unload all the other themes for (var i = 0; i < themes.length; i++) { let styleSheet = document.getElementById(themes[i]); @@ -413,10 +413,19 @@ export function setTheme(theme: string = 'darkly') { } } - // Load the theme dynamically - let cssLoc = `/static/assets/css/themes/${theme}.min.css`; - loadCss(theme, cssLoc); - document.getElementById(theme).removeAttribute('disabled'); + // if the user is not logged in, we load the default themes and let the browser decide + if(!loggedIn) { + document.getElementById("default-light").removeAttribute('disabled') + document.getElementById("default-dark").removeAttribute('disabled') + } else { + document.getElementById("default-light").setAttribute('disabled', 'disabled'); + document.getElementById("default-dark").setAttribute('disabled', 'disabled'); + + // Load the theme dynamically + let cssLoc = `/static/assets/css/themes/${theme}.min.css`; + loadCss(theme, cssLoc); + document.getElementById(theme).removeAttribute('disabled'); + } } export function loadCss(id: string, loc: string) {