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 function getThemeType(): ThemeType {
const themeMode = useThemeMode()
// return localStorage.getItem("theme");
// return theme === "light" ? "light" : "dark";
return themeMode.resolvedMode
let mode = localStorage.getItem("theme")
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
if (mode === "system") {
if (prefersDark) return "dark"
if (!prefersDark) return "light"
}
return mode !== "light" ? "dark" : "light"
}
export function setThemeType(theme: ThemeType) {
@ -14,8 +15,11 @@ export function setThemeType(theme: ThemeType) {
}
export function getThemeMode(): ThemeType {
const themeMode = useThemeMode()
// return localStorage.getItem("theme");
// return theme === "light" ? "light" : "dark";
return themeMode.resolvedMode
let mode = localStorage.getItem("theme")
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
if (mode === "system") {
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 { useThemeMode } from "theme/AppThemeProvider";
import ContractsIcon from "products/CommonIcons/contractIcon";
import { setThemeType } from "theme";
const useStyles = makeStyles((theme: Theme) => {
return ({
@ -355,9 +356,10 @@ export default function UserSettings(props: Props) {
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()
themeMode.setMode(nextView)
themeMode.setMode(theme)
setThemeType(theme)
};
const themeToggle = () => {