refactor: update themes

.github/workflows/publish.yml

@@ -99,6 +99,7 @@ jobs:
         with:
           tagName: v__VERSION__ # the action automatically replaces \_\_VERSION\_\_ with the app version
           releaseName: v__VERSION__
+          includeDebug: true
           args: ${{ matrix.settings.args }}
 
       - name: remove windows certificate

app/app/[lng]/page.tsx

@@ -21,7 +21,7 @@ import { BiTestTube } from "react-icons/bi";
 import { FaBlog } from "react-icons/fa";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
-import { isInApp } from "@/constants";
+import { useIsTauri } from "@/lib/hooks";
 import { allPosts } from "contentlayer/generated";
 
 export default function Home({
@@ -32,6 +32,7 @@ export default function Home({
   };
 }) {
   const t = useTranslations();
+  const isTauri = useIsTauri();
 
   const post = allPosts
     .filter((post) => post.slug.startsWith(`${params.lng}/blog`))
@@ -106,7 +107,7 @@ export default function Home({
       <div className="mt-10 grid w-full max-w-screen-xl animate-fade-up xl:px-0">
         <div className="flex items-center justify-center">
           <div
-            className={`grid w-full grid-cols-1 gap-5 md:max-w-3xl ${isInApp ? "md:grid-cols-3" : "md:grid-cols-2"}`}
+            className={`grid w-full grid-cols-1 gap-5 md:max-w-3xl ${isTauri ? "md:grid-cols-3" : "md:grid-cols-2"}`}
           >
             <Link
               href={`https://www.chenyifaer.com/portal/${params.lng}/admin/`}
@@ -130,7 +131,7 @@ export default function Home({
                 <span className="sm:inline-block">{t("common.play")}</span>
               </p>
             </Link>
-            <ShowContent isShow={isInApp}>
+            <ShowContent isShow={isTauri}>
               <button
                 className="flex items-center justify-center space-x-2 rounded-full border border-gray-300 bg-white px-5 py-2 text-sm text-gray-600 shadow-md transition-colors hover:border-gray-800 hover:enabled:border-gray-800 disabled:cursor-not-allowed dark:bg-black dark:text-white/80 max-md:mx-10"
                 onClick={createWindow}

app/app/[lng]/providers.tsx

@@ -2,12 +2,15 @@
 
 import { ThemeProvider } from "next-themes";
 import { cacheThemeKey } from "@/constants";
-import { defaultTheme } from "@/theme";
+import { useIsTauri } from "@/lib/hooks";
 
 export function Providers({ children }: { children: React.ReactNode }) {
+  const isTauri = useIsTauri();
+
   return (
     <ThemeProvider
-      defaultTheme={defaultTheme}
+      defaultTheme={isTauri ? "light" : "system"}
+      enableSystem={!isTauri}
       storageKey={cacheThemeKey}
       attribute="class"
     >

app/components/layout/header.tsx

@@ -3,17 +3,18 @@ import React, { useEffect, useCallback } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { listen, type UnlistenFn } from "@tauri-apps/api/event";
+import { appWindow } from "@tauri-apps/api/window";
 import { useTranslations } from "next-intl";
 import { Github } from "@/components/shared/icons";
-import { useAppTheme, useScroll } from "@/lib/hooks";
-import { isInApp } from "@/constants";
+import { useAppTheme, useScroll, useIsTauri } from "@/lib/hooks";
 import LngDropdown from "./lng-dropdown";
 import ThemeDropdown from "./theme-dropdown";
 import type { LngProps } from "@/types/i18";
 
 export default function Header(props: LngProps) {
   const t = useTranslations();
   const { setTheme } = useAppTheme();
+  const isTauri = useIsTauri();
   const scrolled = useScroll(50);
 
   // toggle menu
@@ -22,15 +23,27 @@ export default function Header(props: LngProps) {
     $navbar?.classList.toggle("hidden");
   };
 
+  useEffect(() => {
+    const updateAppTheme = async () => {
+      const tauriTheme = await appWindow.theme();
+      console.log("tauriTheme", tauriTheme);
+      setTheme(tauriTheme || "light");
+    };
+
+    isTauri && updateAppTheme();
+  }, [isTauri]);
+
   useEffect(() => {
     let unlisten: UnlistenFn;
-    if (isInApp) {
+    if (typeof window.__TAURI_IPC__ === "function") {
       listen<string>("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 (
     <div
@@ -93,7 +106,7 @@ export default function Header(props: LngProps) {
             <li className="h-8 w-8 sm:h-9 sm:w-9">
               <LngDropdown lng={props.lng} />
             </li>
-            <ShowContent isShow={!isInApp}>
+            <ShowContent isShow={!isTauri}>
               <li className="h-8 w-8 sm:h-9 sm:w-9">
                 <ThemeDropdown lng={props.lng} />
               </li>

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__";

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";

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;

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) => {

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 {

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",