feat: support follow system appearance (#670)

pull/671/head
boojack 3 years ago committed by GitHub
parent 1ea74dfd0d
commit 4767ee3293
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -35,7 +35,7 @@ func (key UserSettingKey) String() string {
var (
UserSettingLocaleValue = []string{"en", "zh", "vi", "fr", "sv"}
UserSettingAppearanceValue = []string{"light", "dark"}
UserSettingAppearanceValue = []string{"system", "light", "dark"}
UserSettingMemoVisibilityValue = []Visibility{Private, Protected, Public}
UserSettingMemoDisplayTsOptionKeyValue = []string{"created_ts", "updated_ts"}
)

@ -1,17 +1,18 @@
import { useColorScheme } from "@mui/joy";
import { useEffect, Suspense } from "react";
import { useTranslation } from "react-i18next";
import { RouterProvider } from "react-router-dom";
import { locationService } from "./services";
import { globalService, locationService } from "./services";
import { useAppSelector } from "./store";
import Loading from "./pages/Loading";
import router from "./router";
import * as storage from "./helpers/storage";
import { useColorScheme } from "@mui/joy";
import { getSystemColorScheme } from "./helpers/utils";
function App() {
const { i18n } = useTranslation();
const { appearance, locale, systemStatus } = useAppSelector((state) => state.global);
const { setMode } = useColorScheme();
const { mode, setMode } = useColorScheme();
useEffect(() => {
locationService.updateStateWithLocation();
@ -20,6 +21,15 @@ function App() {
};
}, []);
useEffect(() => {
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (e) => {
if (globalService.getState().appearance === "system") {
const mode = e.matches ? "dark" : "light";
setMode(mode);
}
});
}, []);
// Inject additional style and script codes.
useEffect(() => {
if (systemStatus.additionalStyle) {
@ -43,18 +53,27 @@ function App() {
}, [locale]);
useEffect(() => {
const root = document.documentElement;
if (appearance === "light") {
root.classList.remove("dark");
} else if (appearance === "dark") {
root.classList.add("dark");
}
setMode(appearance);
storage.set({
appearance: appearance,
});
let currentAppearance = appearance;
if (appearance === "system") {
currentAppearance = getSystemColorScheme();
}
setMode(currentAppearance);
}, [appearance]);
useEffect(() => {
const root = document.documentElement;
if (mode === "light") {
root.classList.remove("dark");
} else {
root.classList.add("dark");
}
}, [mode]);
return (
<Suspense fallback={<Loading />}>
<RouterProvider router={router} />

@ -4,7 +4,7 @@ import { globalService, userService } from "../services";
import { useAppSelector } from "../store";
import Icon from "./Icon";
const appearanceList = ["light", "dark"];
const appearanceList = ["system", "light", "dark"];
const AppearanceSelect = () => {
const user = useAppSelector((state) => state.user.user);
@ -17,6 +17,8 @@ const AppearanceSelect = () => {
return <Icon.Sun className={className} />;
} else if (apperance === "dark") {
return <Icon.Moon className={className} />;
} else {
return <Icon.Smile className={className} />;
}
};

@ -168,9 +168,9 @@
"additional-script-placeholder": "Additional JavaScript codes"
},
"apperance-option": {
"system": "Follow system",
"light": "Always light",
"dark": "Always dark",
"system": "Follow system"
"dark": "Always dark"
}
},
"amount-text": {

@ -168,9 +168,9 @@
"additional-script-placeholder": "Ytterligare JavaScript kod"
},
"apperance-option": {
"system": "Follow system",
"light": "Alltid ljus",
"dark": "Alltid mörk",
"system": "Följ systeminställningarna"
"dark": "Alltid mörk"
}
},
"amount-text": {

@ -168,9 +168,9 @@
"additional-script-placeholder": "自定义 JavaScript 代码"
},
"apperance-option": {
"system": "跟随系统",
"light": "总是浅色",
"dark": "总是深色",
"system": "跟随系统"
"dark": "总是深色"
}
},
"amount-text": {

@ -11,7 +11,7 @@ const globalService = {
initialState: async () => {
const defaultGlobalState = {
locale: "en" as Locale,
appearance: "light" as Appearance,
appearance: "system" as Appearance,
systemStatus: {
allowSignUp: false,
additionalStyle: "",

@ -10,7 +10,7 @@ const globalSlice = createSlice({
name: "global",
initialState: {
locale: "en",
appearance: "light",
appearance: "system",
systemStatus: {
host: undefined,
profile: {

@ -1,4 +1,4 @@
type Appearance = "light" | "dark";
type Appearance = "system" | "light" | "dark";
interface Setting {
locale: Locale;

Loading…
Cancel
Save