feat: Added theme switcher to settings page (#19414)

frontend/src/layout/navigation/TopBar/SitePopover.tsx

@@ -1,5 +1,5 @@
-import { IconChevronDown, IconDay, IconFeatures, IconLaptop, IconLive, IconNight } from '@posthog/icons'
-import { LemonButtonPropsBase, LemonSelect } from '@posthog/lemon-ui'
+import { IconChevronDown, IconFeatures, IconLive } from '@posthog/icons'
+import { LemonButtonPropsBase } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
@@ -25,6 +25,7 @@ import { Tooltip } from 'lib/lemon-ui/Tooltip'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { billingLogic } from 'scenes/billing/billingLogic'
 import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
+import { ThemeSwitcher } from 'scenes/settings/user/ThemeSwitcher'
 
 import { featurePreviewsLogic } from '~/layout/FeaturePreviews/featurePreviewsLogic'
 import {
@@ -224,36 +225,6 @@ function FeaturePreviewsButton(): JSX.Element {
     )
 }
 
-function ThemeSwitcher(): JSX.Element {
-    const { user } = useValues(userLogic)
-    const { updateUser } = useActions(userLogic)
-
-    return (
-        <LemonSelect
-            options={[
-                { icon: <IconLaptop />, value: null, label: `Sync with system` },
-                { icon: <IconDay />, value: 'light', label: 'Light mode' },
-                { icon: <IconNight />, value: 'dark', label: 'Dark mode' },
-            ]}
-            value={user?.theme_mode}
-            renderButtonContent={(leaf) => {
-                return (
-                    <>
-                        <span className="flex-1 flex justify-between items-baseline">
-                            <span>Color theme</span>
-                            <span className="font-normal text-xs">{leaf ? leaf.label : 'Sync with system'}</span>
-                        </span>
-                    </>
-                )
-            }}
-            onChange={(value) => updateUser({ theme_mode: value })}
-            type="tertiary"
-            fullWidth
-            dropdownPlacement="right-start"
-        />
-    )
-}
-
 function SignOutButton(): JSX.Element {
     const { logout } = useActions(userLogic)
 
@@ -312,7 +283,7 @@ export function SitePopoverOverlay(): JSX.Element {
             )}
             <SitePopoverSection>
                 <FlaggedFeature flag={FEATURE_FLAGS.POSTHOG_3000} match="test">
-                    <ThemeSwitcher />
+                    <ThemeSwitcher fullWidth type="tertiary" />
                 </FlaggedFeature>
                 <LemonButton
                     onClick={closeSitePopover}

frontend/src/scenes/settings/SettingsMap.tsx

@@ -32,6 +32,7 @@ import { SettingSection } from './types'
 import { ChangePassword } from './user/ChangePassword'
 import { OptOutCapture } from './user/OptOutCapture'
 import { PersonalAPIKeys } from './user/PersonalAPIKeys'
+import { ThemeSwitcher } from './user/ThemeSwitcher'
 import { TwoFactorAuthentication } from './user/TwoFactorAuthentication'
 import { UpdateEmailPreferences } from './user/UpdateEmailPreferences'
 import { UserDetails } from './user/UserDetails'
@@ -337,9 +338,14 @@ export const SettingsMap: SettingSection[] = [
     },
     {
         level: 'user',
-        id: 'user-notifications',
-        title: 'Notifications',
+        id: 'user-customization',
+        title: 'Customization',
         settings: [
+            {
+                id: 'theme',
+                title: 'Theme',
+                component: <ThemeSwitcher onlyLabel />,
+            },
             {
                 id: 'notifications',
                 title: 'Notifications',

frontend/src/scenes/settings/types.ts

@@ -30,7 +30,7 @@ export type SettingSectionId =
     | 'organization-danger-zone'
     | 'user-profile'
     | 'user-api-keys'
-    | 'user-notifications'
+    | 'user-customization'
 
 export type SettingId =
     | 'display-name'
@@ -70,6 +70,7 @@ export type SettingId =
     | 'personal-api-keys'
     | 'notifications'
     | 'optout'
+    | 'theme'
 
 export type Setting = {
     id: SettingId

frontend/src/scenes/settings/user/ThemeSwitcher.tsx

@@ -0,0 +1,40 @@
+import { IconDay, IconLaptop, IconNight } from '@posthog/icons'
+import { LemonSelect, LemonSelectProps } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { userLogic } from 'scenes/userLogic'
+
+export function ThemeSwitcher({
+    onlyLabel,
+    ...props
+}: Partial<LemonSelectProps<any>> & { onlyLabel?: boolean }): JSX.Element {
+    const { user } = useValues(userLogic)
+    const { updateUser } = useActions(userLogic)
+
+    return (
+        <LemonSelect
+            options={[
+                { icon: <IconLaptop />, value: null, label: `Sync with system` },
+                { icon: <IconDay />, value: 'light', label: 'Light mode' },
+                { icon: <IconNight />, value: 'dark', label: 'Dark mode' },
+            ]}
+            value={user?.theme_mode}
+            renderButtonContent={(leaf) => {
+                const labelText = leaf ? leaf.label : 'Sync with system'
+                return onlyLabel ? (
+                    labelText
+                ) : (
+                    <>
+                        <span className="flex-1 flex justify-between items-baseline gap-4">
+                            <span>Color theme</span>
+                            <span className="font-normal text-xs">{leaf ? leaf.label : 'Sync with system'}</span>
+                        </span>
+                    </>
+                )
+            }}
+            onChange={(value) => updateUser({ theme_mode: value })}
+            dropdownPlacement="right-start"
+            dropdownMatchSelectWidth={false}
+            {...props}
+        />
+    )
+}