purgatory/clash-verge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: create theme error, close #294

Browse Source
This commit is contained in:
GyDi 2022-11-22 16:01:33 +08:00
parent f95ddd594e
commit 9b18bd0b48
No known key found for this signature in database
GPG Key ID: 9C3AD40F1F99880A
1 changed files with 46 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/layout/use-custom-theme.ts
View File

@ -1,6 +1,6 @@
import { useEffect, useMemo } from "react"; import { useEffect, useMemo } from "react";
import { useRecoilState } from "recoil"; import { useRecoilState } from "recoil";
import { createTheme } from "@mui/material"; import { createTheme, Theme } from "@mui/material";
import { appWindow } from "@tauri-apps/api/window"; import { appWindow } from "@tauri-apps/api/window";
import { atomThemeMode } from "@/services/states"; import { atomThemeMode } from "@/services/states";
import { defaultTheme, defaultDarkTheme } from "@/pages/_theme"; import { defaultTheme, defaultDarkTheme } from "@/pages/_theme";
@ -36,30 +36,52 @@ export default function useCustomTheme() {
const setting = theme_setting || {}; const setting = theme_setting || {};
const dt = mode === "light" ? defaultTheme : defaultDarkTheme; const dt = mode === "light" ? defaultTheme : defaultDarkTheme;
const theme = createTheme({ let theme: Theme;
breakpoints: {
values: { xs: 0, sm: 650, md: 900, lg: 1200, xl: 1536 }, try {
}, theme = createTheme({
palette: { breakpoints: {
mode, values: { xs: 0, sm: 650, md: 900, lg: 1200, xl: 1536 },
primary: { main: setting.primary_color || dt.primary_color },
secondary: { main: setting.secondary_color || dt.secondary_color },
info: { main: setting.info_color || dt.info_color },
error: { main: setting.error_color || dt.error_color },
warning: { main: setting.warning_color || dt.warning_color },
success: { main: setting.success_color || dt.success_color },
text: {
primary: setting.primary_text || dt.primary_text,
secondary: setting.secondary_text || dt.secondary_text,
}, },
}, palette: {
typography: { mode,
// todo primary: { main: setting.primary_color || dt.primary_color },
fontFamily: setting.font_family secondary: { main: setting.secondary_color || dt.secondary_color },
? `${setting.font_family}, ${dt.font_family}` info: { main: setting.info_color || dt.info_color },
: dt.font_family, error: { main: setting.error_color || dt.error_color },
}, warning: { main: setting.warning_color || dt.warning_color },
}); success: { main: setting.success_color || dt.success_color },
text: {
primary: setting.primary_text || dt.primary_text,
secondary: setting.secondary_text || dt.secondary_text,
},
},
typography: {
// todo
fontFamily: setting.font_family
? `${setting.font_family}, ${dt.font_family}`
: dt.font_family,
},
});
} catch {
// fix #294
theme = createTheme({
breakpoints: {
values: { xs: 0, sm: 650, md: 900, lg: 1200, xl: 1536 },
},
palette: {
mode,
primary: { main: dt.primary_color },
secondary: { main: dt.secondary_color },
info: { main: dt.info_color },
error: { main: dt.error_color },
warning: { main: dt.warning_color },
success: { main: dt.success_color },
text: { primary: dt.primary_text, secondary: dt.secondary_text },
},
typography: { fontFamily: dt.font_family },
});
}
// css // css
const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5"; const selectColor = mode === "light" ? "#f5f5f5" : "#d5d5d5";