diff options
author | Lorenz Schmidt <bytesnake@mailbox.org> | 2020-06-10 17:11:51 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-06-10 11:11:51 -0400 |
commit | 13771d56cd948addc93569dcf7a67d7641bbd747 (patch) | |
tree | 9ddac6418bb27f1e08dcc641caca9d3e3ec1e9f0 | |
parent | 46bb3064ed64bee31e8ae3a31a9380bf9fb17f14 (diff) |
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
-rw-r--r-- | ui/src/components/user.tsx | 2 | ||||
-rw-r--r-- | ui/src/index.html | 3 | ||||
-rw-r--r-- | ui/src/services/UserService.ts | 4 | ||||
-rw-r--r-- | 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 eded9998..7cd460a1 100644 --- a/ui/src/components/user.tsx +++ b/ui/src/components/user.tsx @@ -922,7 +922,7 @@ export class User extends Component<any, UserState> { 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 f39773d0..7cea8c4e 100644 --- a/ui/src/index.html +++ b/ui/src/index.html @@ -15,7 +15,8 @@ <link rel="stylesheet" type="text/css" href="/static/assets/css/toastify.css" /> <link rel="stylesheet" type="text/css" href="/static/assets/css/selectr.min.css" /> <link rel="stylesheet" type="text/css" href="/static/assets/css/tippy.css" /> - <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/united.min.css" id="default-light" media="(prefers-color-scheme: light)" /> + <link rel="stylesheet" type="text/css" href="/static/assets/css/themes/darkly.min.css" id="default-dark" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: dark)" /> <link rel="stylesheet" type="text/css" href="/static/assets/css/main.css" /> <!-- Scripts --> diff --git a/ui/src/services/UserService.ts b/ui/src/services/UserService.ts index 47e28c73..786d5d07 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 81bb0147..93b9cab0 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) { |