feat: app theme depend on local storage instead native theme electron

core/src/api/index.ts

@@ -3,9 +3,6 @@
  * @description Enum of all the routes exposed by the app
  */
 export enum AppRoute {
-  setNativeThemeLight = 'setNativeThemeLight',
-  setNativeThemeDark = 'setNativeThemeDark',
-  setNativeThemeSystem = 'setNativeThemeSystem',
   appDataPath = 'appDataPath',
   appVersion = 'appVersion',
   getResourcePath = 'getResourcePath',

electron/handlers/app.ts

@@ -8,30 +8,6 @@ import { AppRoute } from '@janhq/core'
 import { getResourcePath } from './../utils/path'
 
 export function handleAppIPCs() {
-  /**
-   * Handles the "setNativeThemeLight" IPC message by setting the native theme source to "light".
-   * This will change the appearance of the app to the light theme.
-   */
-  ipcMain.handle(AppRoute.setNativeThemeLight, () => {
-    nativeTheme.themeSource = 'light'
-  })
-
-  /**
-   * Handles the "setNativeThemeDark" IPC message by setting the native theme source to "dark".
-   * This will change the appearance of the app to the dark theme.
-   */
-  ipcMain.handle(AppRoute.setNativeThemeDark, () => {
-    nativeTheme.themeSource = 'dark'
-  })
-
-  /**
-   * Handles the "setNativeThemeSystem" IPC message by setting the native theme source to "system".
-   * This will change the appearance of the app to match the system's current theme.
-   */
-  ipcMain.handle(AppRoute.setNativeThemeSystem, () => {
-    nativeTheme.themeSource = 'system'
-  })
-
   /**
    * Returns the version of the app.
    * @param _event - The IPC event object.

web/containers/Layout/index.tsx

@@ -15,22 +15,11 @@ const BaseLayout = (props: PropsWithChildren) => {
   const { children } = props
   const { mainViewState } = useMainViewState()
 
-  const { theme } = useTheme()
+  const { theme, setTheme } = useTheme()
 
-  // Force set theme native
   useEffect(() => {
-    async function setTheme() {
-      switch (theme) {
-        case 'light':
-          return await window?.electronAPI.setNativeThemeLight()
-        case 'dark':
-          return await window?.electronAPI.setNativeThemeDark()
-        default:
-          return await window?.electronAPI.setNativeThemeSystem()
-      }
-    }
-    setTheme()
-  }, [theme])
+    setTheme(theme as string)
+  }, [setTheme, theme])
 
   return (
     <div className="flex h-screen w-screen flex-1 overflow-hidden">

web/screens/Settings/Appearance/ToggleTheme.tsx

@@ -8,17 +8,6 @@ const themeMenus = [{ name: 'light' }, { name: 'dark' }, { name: 'system' }]
 export default function ToggleTheme() {
   const { theme: currentTheme, setTheme } = useTheme()
 
-  const handeleNativeTheme = async (val: string) => {
-    switch (val) {
-      case 'light':
-        return await window?.electronAPI.setNativeThemeLight()
-      case 'dark':
-        return await window?.electronAPI.setNativeThemeDark()
-      default:
-        return await window?.electronAPI.setNativeThemeSystem()
-    }
-  }
-
   return (
     <div className="flex items-center space-x-1">
       {themeMenus.map((theme, i) => {
@@ -32,7 +21,7 @@ export default function ToggleTheme() {
               )}
               onClick={async () => {
                 setTheme(theme.name)
-                handeleNativeTheme(theme.name)
+                // handeleNativeTheme(theme.name)
               }}
             >
               {theme.name}