brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed get theme hook error

Browse source
This commit is contained in:
Carter 2025-04-15 15:21:44 -06:00
parent 1c3f088ea1
commit bd852c083a
2 changed files with 18 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/theme/themeType.ts
View file

@ -1,12 +1,13 @@
import { useThemeMode } from "./AppThemeProvider";
export type ThemeType = "light" | "dark" | "system"; export type ThemeType = "light" | "dark" | "system";
export function getThemeType(): ThemeType { export function getThemeType(): ThemeType {
const themeMode = useThemeMode() let mode = localStorage.getItem("theme")
// return localStorage.getItem("theme"); const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
// return theme === "light" ? "light" : "dark"; if (mode === "system") {
return themeMode.resolvedMode if (prefersDark) return "dark"
if (!prefersDark) return "light"
}
return mode !== "light" ? "dark" : "light"
} }
export function setThemeType(theme: ThemeType) { export function setThemeType(theme: ThemeType) {
@ -14,8 +15,11 @@ export function setThemeType(theme: ThemeType) {
} }
export function getThemeMode(): ThemeType { export function getThemeMode(): ThemeType {
const themeMode = useThemeMode() let mode = localStorage.getItem("theme")
// return localStorage.getItem("theme"); const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
// return theme === "light" ? "light" : "dark"; if (mode === "system") {
return themeMode.resolvedMode if (prefersDark) return "dark"
if (!prefersDark) return "light"
}
return mode !== "light" ? "dark" : "light"
} }

6
src/user/UserSettings.tsx
View file

@ -27,6 +27,7 @@ import { IconPicker } from "common/IconPicker";
import { MuiTelInput } from "mui-tel-input"; import { MuiTelInput } from "mui-tel-input";
import { useThemeMode } from "theme/AppThemeProvider"; import { useThemeMode } from "theme/AppThemeProvider";
import ContractsIcon from "products/CommonIcons/contractIcon"; import ContractsIcon from "products/CommonIcons/contractIcon";
import { setThemeType } from "theme";
const useStyles = makeStyles((theme: Theme) => { const useStyles = makeStyles((theme: Theme) => {
return ({ return ({
@ -355,9 +356,10 @@ export default function UserSettings(props: Props) {
return <IconPicker url={user.settings.avatar} setUrl={setAvatarUrl} id={user.settings.id} />; return <IconPicker url={user.settings.avatar} setUrl={setAvatarUrl} id={user.settings.id} />;
}; };
const handleChange = (event: React.MouseEvent<HTMLElement>, nextView: "light" | "dark" | "system") => { const handleChange = (event: React.MouseEvent<HTMLElement>, theme: "light" | "dark" | "system") => {
event.preventDefault() event.preventDefault()
themeMode.setMode(nextView) themeMode.setMode(theme)
setThemeType(theme)
}; };
const themeToggle = () => { const themeToggle = () => {