refactor(Theme): update theme management to use setTheme function

- Replaced toggleTheme with setTheme for more explicit theme handling.
- Removed unused SunMoon icon from TabContainer and Sidebar components.
- Updated theme icon rendering logic to directly reflect the current theme state.
- Adjusted ThemeProvider to include setTheme in context for better theme management.

src/renderer/src/components/Tab/TabContainer.tsx

@@ -20,7 +20,6 @@ import {
   Sparkle,
   SquareTerminal,
   Sun,
-  SunMoon,
   X
 } from 'lucide-react'
 import { useCallback, useEffect } from 'react'
@@ -70,7 +69,7 @@ const TabsContainer: React.FC<TabsContainerProps> = ({ children }) => {
   const tabs = useAppSelector((state) => state.tabs.tabs)
   const activeTabId = useAppSelector((state) => state.tabs.activeTabId)
   const isFullscreen = useFullscreen()
-  const { settedTheme, toggleTheme } = useTheme()
+  const { theme, setTheme } = useTheme()
 
   const getTabId = (path: string): string => {
     if (path === '/') return 'home'
@@ -125,19 +124,6 @@ const TabsContainer: React.FC<TabsContainerProps> = ({ children }) => {
     navigate(lastSettingsPath)
   }
 
-  const getThemeIcon = () => {
-    switch (settedTheme) {
-      case ThemeMode.dark:
-        return <Moon size={16} />
-      case ThemeMode.light:
-        return <Sun size={16} />
-      case ThemeMode.system:
-        return <SunMoon size={16} />
-      default:
-        return <SunMoon size={16} />
-    }
-  }
-
   return (
     <Container>
       <TabsBar $isFullscreen={isFullscreen}>
@@ -168,7 +154,9 @@ const TabsContainer: React.FC<TabsContainerProps> = ({ children }) => {
         </AddTabButton>
         <RightButtonsContainer>
           <TopNavbarOpenedMinappTabs />
-          <ThemeButton onClick={toggleTheme}>{getThemeIcon()}</ThemeButton>
+          <ThemeButton onClick={() => setTheme(theme === ThemeMode.dark ? ThemeMode.light : ThemeMode.dark)}>
+            {theme === ThemeMode.dark ? <Moon size={16} /> : <Sun size={16} />}
+          </ThemeButton>
           <SettingsButton onClick={handleSettingsClick} $active={activeTabId === 'settings'}>
             <Settings size={16} />
           </SettingsButton>

src/renderer/src/components/app/Sidebar.tsx

@@ -24,8 +24,7 @@ import {
   Palette,
   Settings,
   Sparkle,
-  Sun,
-  SunMoon
+  Sun
 } from 'lucide-react'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -44,7 +43,7 @@ const Sidebar: FC = () => {
   const { pathname } = useLocation()
   const navigate = useNavigate()
 
-  const { theme, settedTheme, toggleTheme } = useTheme()
+  const { theme, setTheme } = useTheme()
   const avatar = useAvatar()
   const { t } = useTranslation()
 
@@ -105,17 +104,11 @@ const Sidebar: FC = () => {
           </Icon>
         </Tooltip>
         <Tooltip
-          title={t('settings.theme.title') + ': ' + t(`settings.theme.${settedTheme}`)}
+          title={t('settings.theme.title') + ': ' + t(`settings.theme.${theme}`)}
           mouseEnterDelay={0.8}
           placement="right">
-          <Icon theme={theme} onClick={() => toggleTheme()}>
-            {settedTheme === ThemeMode.dark ? (
-              <Moon size={20} className="icon" />
-            ) : settedTheme === ThemeMode.light ? (
-              <Sun size={20} className="icon" />
-            ) : (
-              <SunMoon size={20} className="icon" />
-            )}
+          <Icon theme={theme} onClick={() => setTheme(theme === ThemeMode.dark ? ThemeMode.light : ThemeMode.dark)}>
+            {theme === ThemeMode.dark ? <Moon size={20} className="icon" /> : <Sun size={20} className="icon" />}
           </Icon>
         </Tooltip>
         <Tooltip title={t('settings.title')} mouseEnterDelay={0.8} placement="right">

src/renderer/src/context/ThemeProvider.tsx

@@ -9,12 +9,14 @@ interface ThemeContextType {
   theme: ThemeMode
   settedTheme: ThemeMode
   toggleTheme: () => void
+  setTheme: (theme: ThemeMode) => void
 }
 
 const ThemeContext = createContext<ThemeContextType>({
   theme: ThemeMode.system,
   settedTheme: ThemeMode.dark,
-  toggleTheme: () => {}
+  toggleTheme: () => {},
+  setTheme: () => {}
 })
 
 interface ThemeProviderProps extends PropsWithChildren {
@@ -64,7 +66,11 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
     window.api.setTheme(settedTheme)
   }, [settedTheme])
 
-  return <ThemeContext value={{ theme: actualTheme, settedTheme, toggleTheme }}>{children}</ThemeContext>
+  return (
+    <ThemeContext value={{ theme: actualTheme, settedTheme, toggleTheme, setTheme: setSettedTheme }}>
+      {children}
+    </ThemeContext>
+  )
 }
 
 export const useTheme = () => use(ThemeContext)