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

Add default themes with media queries (#796)

Browse source 
* 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
This commit is contained in:
Lorenz Schmidt 2020-06-10 17:11:51 +02:00 committed by GitHub
parent 46bb3064ed
commit 13771d56cd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 18 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/src/components/user.tsx vendored
View file

@ -922,7 +922,7 @@ export class User extends Component<any, UserState> {
handleUserSettingsThemeChange(i: User, event: any) { handleUserSettingsThemeChange(i: User, event: any) {
i.state.userSettingsForm.theme = event.target.value; i.state.userSettingsForm.theme = event.target.value;
setTheme(event.target.value); setTheme(event.target.value, true);
i.setState(i.state); i.setState(i.state);
} }

3
ui/src/index.html vendored
View file

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

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

@ -41,9 +41,7 @@ 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, true);
setTheme(this.user.theme);
}
this.sub.next({ user: this.user }); this.sub.next({ user: this.user });
console.log(this.user); console.log(this.user);
} }

19
ui/src/utils.ts vendored
View file

@ -404,7 +404,7 @@ export function getMomentLanguage(): string {
return lang; return lang;
} }
export function setTheme(theme: string = 'darkly') { export function setTheme(theme: string = 'darkly', loggedIn: boolean = false) {
// unload all the other themes // 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]);
@ -413,10 +413,19 @@ export function setTheme(theme: string = 'darkly') {
} }
} }
// Load the theme dynamically // if the user is not logged in, we load the default themes and let the browser decide
let cssLoc = `/static/assets/css/themes/${theme}.min.css`; if(!loggedIn) {
loadCss(theme, cssLoc); document.getElementById("default-light").removeAttribute('disabled')
document.getElementById(theme).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) { export function loadCss(id: string, loc: string) {