feat: add theme toggle functionality to header, allowing users to switch between light and dark modes

Author: godzidcrypto

src/layout/Header/HeaderDesktop.tsx

@@ -33,7 +33,8 @@ import { NotificationsMenu } from '@/views/menus/NotificationsMenu';
 
 import { getOnboardingState } from '@/state/accountSelectors';
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
-import { getHasSeenLaunchIncentives } from '@/state/appUiConfigsSelectors';
+import { AppTheme, setAppThemeSetting } from '@/state/appUiConfigs';
+import { getAppTheme, getHasSeenLaunchIncentives } from '@/state/appUiConfigsSelectors';
 import { openDialog } from '@/state/dialogs';
 
 import { isTruthy } from '@/lib/isTruthy';
@@ -46,9 +47,15 @@ export const HeaderDesktop = () => {
   const onboardingState = useAppSelector(getOnboardingState);
   const { complianceState } = useComplianceState();
   const isSpotEnabled = useEnableSpot();
+  const currentTheme = useAppSelector(getAppTheme);
 
   const hasSeenLaunchIncentives = useAppSelector(getHasSeenLaunchIncentives);
 
+  const handleThemeToggle = () => {
+    const newTheme = currentTheme === AppTheme.Dark ? AppTheme.Light : AppTheme.Dark;
+    dispatch(setAppThemeSetting(newTheme));
+  };
+
   const navItems = [
     {
       group: 'navigation',
@@ -184,6 +191,12 @@ export const HeaderDesktop = () => {
           />
         )}
 
+        <$ThemeToggleButton
+          shape={ButtonShape.Rectangle}
+          iconName={currentTheme === AppTheme.Dark ? IconName.Sun : IconName.Moon}
+          onClick={handleThemeToggle}
+        />
+
         <$AccountMenuWrapper>
           <AccountMenu />
         </$AccountMenuWrapper>
@@ -290,6 +303,13 @@ const $IconButton = styled(IconButton)<{ size?: string }>`
   --button-padding: 0 0.5em;
 `;
 
+const $ThemeToggleButton = styled(IconButton)`
+  ${headerMixins.button}
+  --button-border: none;
+  --button-icon-size: 1.25em;
+  --button-padding: 0.33rem 0.5rem;
+`;
+
 const $LanguageSelector = styled(LanguageSelector)`
   ${headerMixins.dropdownTrigger}
   --trigger-padding: 0.33rem 0.5rem;