("theme_changed", (event) => {
console.log(
`Got response in window ${event.windowLabel}, payload: ${event.payload}`,
);
setTheme(event.payload);
- }).then((value) => (unlisten = value));
+ })
+ .then((value) => (unlisten = value))
+ .catch(console.error);
}
return () => {
unlisten && unlisten();
@@ -50,7 +63,7 @@ export default function Header(props: LngProps) {
[],
);
- console.log("isInApp", isInApp);
+ console.log("isTauri", isTauri);
return (
-
+
diff --git a/app/constants/index.ts b/app/constants/index.ts
index 2461a72f..47e2dbbb 100644
--- a/app/constants/index.ts
+++ b/app/constants/index.ts
@@ -1,3 +1,2 @@
-export const isInApp = !!process.env.TAURI_PLATFORM;
export const languages = ["en", "zh"];
export const cacheThemeKey: string = "__faforever_theme__";
diff --git a/app/lib/hooks/index.ts b/app/lib/hooks/index.ts
index b4c3849e..e79cdd84 100644
--- a/app/lib/hooks/index.ts
+++ b/app/lib/hooks/index.ts
@@ -1,4 +1,5 @@
export { default as useIntersectionObserver } from "./use-intersection-observer";
+export { default as useIsTauri } from "./use-is-tauri";
export { default as useLocalStorage } from "./use-local-storage";
export { default as useScroll } from "./use-scroll";
export { default as useAppTheme } from "./use-theme";
diff --git a/app/lib/hooks/use-is-tauri.ts b/app/lib/hooks/use-is-tauri.ts
new file mode 100644
index 00000000..644e7adc
--- /dev/null
+++ b/app/lib/hooks/use-is-tauri.ts
@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+
+const useIsTauri = (): boolean => {
+ const [isTauri, setIsTauri] = useState(false);
+
+ useEffect(() => {
+ setIsTauri(typeof window !== "undefined" && !!window.__TAURI__);
+ }, []);
+
+ return isTauri;
+};
+
+export default useIsTauri;
diff --git a/app/lib/hooks/use-theme.ts b/app/lib/hooks/use-theme.ts
index e13e026b..838c45c0 100644
--- a/app/lib/hooks/use-theme.ts
+++ b/app/lib/hooks/use-theme.ts
@@ -1,7 +1,7 @@
import { useMemo } from "react";
// import { invoke } from "@tauri-apps/api/tauri";
import { useTheme } from "next-themes";
-import { defaultTheme } from "@/theme";
+import { useIsTauri } from "@/lib/hooks";
export interface UseAppThemeProps {
/** Update the theme */
@@ -15,9 +15,13 @@ export interface UseAppThemeProps {
export default function useAppTheme(): UseAppThemeProps {
const { theme, systemTheme, setTheme } = useTheme();
+ const isTauri = useIsTauri();
+
+ const defaultTheme = useMemo(() => (isTauri ? "light" : "system"), [isTauri]);
+
const currentTheme = useMemo(
() => (theme === "system" ? systemTheme : theme) || defaultTheme,
- [theme, systemTheme],
+ [theme, systemTheme, defaultTheme],
);
// const changeTheme = async (theme: string) => {
diff --git a/app/theme/index.ts b/app/theme/index.ts
index 4dcfd40e..0601b8d3 100644
--- a/app/theme/index.ts
+++ b/app/theme/index.ts
@@ -1,9 +1,6 @@
import { MdOutlineDesktopMac, MdDarkMode, MdLightMode } from "react-icons/md";
-import { isInApp } from "@/constants";
import type { IconType } from "react-icons";
-export const defaultTheme = isInApp ? "light" : "system";
-
export type ThemeMode = "system" | "dark" | "light";
export interface Theme {
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 8228cc1f..65863957 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -4,7 +4,7 @@
"beforeBuildCommand": "pnpm build:app",
"devPath": "http://localhost:3000",
"distDir": "../app/out",
- "withGlobalTauri": false
+ "withGlobalTauri": true
},
"package": {
"productName": "FaForever",