diff --git a/src/theme/themeType.ts b/src/theme/themeType.ts
index 27dd364..f64d9b3 100644
--- a/src/theme/themeType.ts
+++ b/src/theme/themeType.ts
@@ -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"
 }
\ No newline at end of file
diff --git a/src/user/UserSettings.tsx b/src/user/UserSettings.tsx
index 141c8cb..32beec2 100644
--- a/src/user/UserSettings.tsx
+++ b/src/user/UserSettings.tsx
@@ -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 = () => {