Merge pull request #4168 from janhq/fix/glitch-theme-on-launch

fix: Glitch theme applies on launch

web/helpers/atoms/Setting.atom.ts

@@ -11,15 +11,30 @@ export const janSettingScreenAtom = atom<SettingScreen[]>([])
 export const THEME = 'themeAppearance'
 export const REDUCE_TRANSPARENT = 'reduceTransparent'
 export const SPELL_CHECKING = 'spellChecking'
-export const themesOptionsAtom = atom<{ name: string; value: string }[]>([])
-export const janThemesPathAtom = atom<string | undefined>(undefined)
+export const THEME_DATA = 'themeData'
+export const THEME_OPTIONS = 'themeOptions'
+export const THEME_PATH = 'themePath'
+export const themesOptionsAtom = atomWithStorage<
+  { name: string; value: string }[]
+>(THEME_OPTIONS, [], undefined, { getOnInit: true })
+export const janThemesPathAtom = atomWithStorage<string | undefined>(
+  THEME_PATH,
+  undefined,
+  undefined,
+  { getOnInit: true }
+)
 export const selectedThemeIdAtom = atomWithStorage<string>(
   THEME,
   '',
   undefined,
   { getOnInit: true }
 )
-export const themeDataAtom = atom<Theme | undefined>(undefined)
+export const themeDataAtom = atomWithStorage<Theme | undefined>(
+  THEME_DATA,
+  undefined,
+  undefined,
+  { getOnInit: true }
+)
 export const reduceTransparentAtom = atomWithStorage<boolean>(
   REDUCE_TRANSPARENT,
   false,

web/hooks/useLoadTheme.test.ts

@@ -4,6 +4,11 @@ import { fs, joinPath } from '@janhq/core'
 import { useAtom, useAtomValue, useSetAtom } from 'jotai'
 
 import { useLoadTheme } from './useLoadTheme'
+import { janDataFolderPathAtom } from '@/helpers/atoms/AppConfig.atom'
+import {
+  selectedThemeIdAtom,
+  themeDataAtom,
+} from '@/helpers/atoms/Setting.atom'
 
 // Mock dependencies
 jest.mock('next-themes')
@@ -36,10 +41,25 @@ describe('useLoadTheme', () => {
 
   it('should load theme and set variables', async () => {
     // Mock Jotai hooks
-    ;(useAtomValue as jest.Mock).mockReturnValue(mockJanDataFolderPath)
+    ;(useAtomValue as jest.Mock).mockImplementation((atom) => {
+      switch (atom) {
+        case janDataFolderPathAtom:
+          return mockJanDataFolderPath
+        default:
+          return undefined
+      }
+    })
     ;(useSetAtom as jest.Mock).mockReturnValue(jest.fn())
-    ;(useAtom as jest.Mock).mockReturnValue([mockSelectedThemeId, jest.fn()])
-    ;(useAtom as jest.Mock).mockReturnValue([mockThemeData, jest.fn()])
+    ;(useAtom as jest.Mock).mockImplementation((atom) => {
+      switch (atom) {
+        case selectedThemeIdAtom:
+          return [mockSelectedThemeId, jest.fn()]
+        case themeDataAtom:
+          return [mockThemeData, jest.fn()]
+        default:
+          return [undefined, jest.fn()]
+      }
+    })
 
     // Mock fs and joinPath
     ;(fs.readdirSync as jest.Mock).mockResolvedValue(['joi-light', 'joi-dark'])

web/hooks/useLoadTheme.ts

@@ -4,7 +4,7 @@ import { useTheme } from 'next-themes'
 
 import { fs, joinPath } from '@janhq/core'
 
-import { useAtom, useAtomValue, useSetAtom } from 'jotai'
+import { useAtom, useAtomValue } from 'jotai'
 
 import cssVars from '@/utils/jsonToCssVariables'
 
@@ -20,8 +20,8 @@ type NativeThemeProps = 'light' | 'dark'
 
 export const useLoadTheme = () => {
   const janDataFolderPath = useAtomValue(janDataFolderPathAtom)
-  const setThemeOptions = useSetAtom(themesOptionsAtom)
-  const setThemePath = useSetAtom(janThemesPathAtom)
+  const [themeOptions, setThemeOptions] = useAtom(themesOptionsAtom)
+  const [themePath, setThemePath] = useAtom(janThemesPathAtom)
   const [themeData, setThemeData] = useAtom(themeDataAtom)
   const [selectedIdTheme, setSelectedIdTheme] = useAtom(selectedThemeIdAtom)
   const { setTheme } = useTheme()
@@ -84,11 +84,23 @@ export const useLoadTheme = () => {
     setThemePath,
   ])
 
-  useEffect(() => {
-    getThemes()
+  const applyTheme = useCallback(async () => {
+    if (!themeData || !themeOptions || !themePath) {
+      await getThemes()
+    } else {
+      const variables = cssVars(themeData.variables)
+      const headTag = document.getElementsByTagName('head')[0]
+      const styleTag = document.createElement('style')
+      styleTag.innerHTML = `:root {${variables}}`
+      headTag.appendChild(styleTag)
+    }
     setNativeTheme(themeData?.nativeTheme as NativeThemeProps)
+  }, [themeData, themeOptions, themePath, getThemes])
+
+  useEffect(() => {
+    applyTheme()
   }, [
-    getThemes,
+    applyTheme,
     selectedIdTheme,
     setNativeTheme,
     setSelectedIdTheme,