From: Lorenz Schmidt <bytesnake@mailbox.org>
Date: Wed, 10 Jun 2020 15:11:51 +0000 (+0200)
Subject: Add default themes with media queries (#796)
X-Git-Url: http://these/git/%7B%60%24%7BghostArchiveUrl%7D/static/%7B%60%24%7BwebArchiveUrl%7D/save/%7B%60https:/%24%7Bsubmission.url%7D?a=commitdiff_plain;h=13771d56cd948addc93569dcf7a67d7641bbd747;p=lemmy.git

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
---

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) {