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 eded9998c53ef741d1f902670a4093f964f7d649..7cd460a17b9ff2110891467949b0b497a1c47b9f 100644 (file)
--- 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 f39773d02ef27db83762a040bdd49cad53b01364..7cea8c4e8dbdc6850b55f3f641185ce5992b83ac 100644 (file)
--- 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 47e28c73e8db37617a7e7f8fb585f3a5fd440195..786d5d07ebdb03e8419e56b652f03fb941503c72 100644 (file)
--- 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 81bb014750d6959032e145502f54bc1a710b5df5..93b9cab08bdae41b3c0caa57bc6e55a9301a9251 100644 (file)
--- 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) {