go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-10-23 06:46:11 +08:00
Code Issues Projects Releases Wiki Activity

Add system default as dark theme preference option

Browse Source
This commit is contained in:
Peizhi Zheng
2021-01-13 13:58:10 -08:00
committed by GitHub
parent e7cfbc6bf7
commit b3beef97df
6 changed files with 74 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
ui/src/theme.tsx
View File

@@ -1,6 +1,15 @@
import { createMuiTheme, Theme } from "@material-ui/core/styles";
import { ThemePreference } from "./reducers/settingsReducer";
import useMediaQuery from "@material-ui/core/useMediaQuery";
export function makeTheme(isDarkTheme: boolean): Theme {
export function makeTheme(themePreference: ThemePreference): Theme {
// eslint-disable-next-line react-hooks/rules-of-hooks
let prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
if (themePreference === ThemePreference.Always) {
prefersDarkMode = true;
} else if (themePreference === ThemePreference.Never) {
prefersDarkMode = false;
}
return createMuiTheme({
// Got color palette from https://htmlcolors.com/palette/31/stripe
palette: {
@@ -13,7 +22,7 @@ export function makeTheme(isDarkTheme: boolean): Theme {
background: {
default: "#f5f7f9",
},
type: isDarkTheme ? "dark" : "light",
type: prefersDarkMode ? "dark" : "light",
},
});
}