feat: Change default theme to light (#19444)

PostHog · Dec 20, 2023 · 296554f · 296554f
1 parent 770c597
commit 296554f
Show file tree

Hide file tree

Showing 8 changed files with 51 additions and 16 deletions.
diff --git a/frontend/src/layout/navigation-3000/themeLogic.ts b/frontend/src/layout/navigation-3000/themeLogic.ts
@@ -9,7 +9,7 @@ import type { themeLogicType } from './themeLogicType'
 export const themeLogic = kea<themeLogicType>([
     path(['layout', 'navigation-3000', 'themeLogic']),
     connect({
-        values: [featureFlagLogic, ['featureFlags'], userLogic, ['user']],
+        values: [featureFlagLogic, ['featureFlags'], userLogic, ['themeMode']],
     }),
     actions({
         syncDarkModePreference: (darkModePreference: boolean) => ({ darkModePreference }),
@@ -24,8 +24,8 @@ export const themeLogic = kea<themeLogicType>([
     }),
     selectors({
         isDarkModeOn: [
-            (s) => [s.user, s.darkModeSystemPreference, s.featureFlags, sceneLogic.selectors.sceneConfig],
-            (user, darkModeSystemPreference, featureFlags, sceneConfig) => {
+            (s) => [s.themeMode, s.darkModeSystemPreference, s.featureFlags, sceneLogic.selectors.sceneConfig],
+            (themeMode, darkModeSystemPreference, featureFlags, sceneConfig) => {
                 // NOTE: Unauthenticated users always get the light mode until we have full support across onboarding flows
                 if (
                     sceneConfig?.layout === 'plain' ||
@@ -34,12 +34,16 @@ export const themeLogic = kea<themeLogicType>([
                 ) {
                     return false
                 }
+
                 // Dark mode is a PostHog 3000 feature
-                // User-saved preference is used when set, oterwise we fall back to the system value
+                if (featureFlags[FEATURE_FLAGS.POSTHOG_3000] !== 'test') {
+                    return false
+                }
+
                 return featureFlags[FEATURE_FLAGS.POSTHOG_3000] === 'test'
-                    ? user?.theme_mode
-                        ? user.theme_mode === 'dark'
-                        : darkModeSystemPreference
+                    ? themeMode === 'system'
+                        ? darkModeSystemPreference
+                        : themeMode === 'dark'
                     : false
             },
         ],

diff --git a/frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx b/frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx
@@ -927,7 +927,7 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
                                 icon: IconLaptop,
                                 display: 'Sync with system preferences',
                                 executor: () => {
-                                    actions.updateUser({ theme_mode: null })
+                                    actions.updateUser({ theme_mode: 'system' })
                                 },
                             },
                         ],

diff --git a/frontend/src/scenes/settings/user/ThemeSwitcher.tsx b/frontend/src/scenes/settings/user/ThemeSwitcher.tsx
@@ -7,17 +7,17 @@ export function ThemeSwitcher({
     onlyLabel,
     ...props
 }: Partial<LemonSelectProps<any>> & { onlyLabel?: boolean }): JSX.Element {
-    const { user } = useValues(userLogic)
+    const { themeMode } = useValues(userLogic)
     const { updateUser } = useActions(userLogic)
 
     return (
         <LemonSelect
             options={[
-                { icon: <IconLaptop />, value: null, label: `Sync with system` },
+                { icon: <IconLaptop />, value: 'system', label: `Sync with system` },
                 { icon: <IconDay />, value: 'light', label: 'Light mode' },
                 { icon: <IconNight />, value: 'dark', label: 'Dark mode' },
             ]}
-            value={user?.theme_mode}
+            value={themeMode}
             renderButtonContent={(leaf) => {
                 const labelText = leaf ? leaf.label : 'Sync with system'
                 return onlyLabel ? (

diff --git a/frontend/src/scenes/userLogic.ts b/frontend/src/scenes/userLogic.ts
@@ -8,7 +8,7 @@ import { lemonToast } from 'lib/lemon-ui/lemonToast'
 import { getAppContext } from 'lib/utils/getAppContext'
 import posthog from 'posthog-js'
 
-import { AvailableFeature, OrganizationBasicType, ProductKey, UserType } from '~/types'
+import { AvailableFeature, OrganizationBasicType, ProductKey, UserTheme, UserType } from '~/types'
 
 import type { userLogicType } from './userLogicType'
 
@@ -232,6 +232,13 @@ export const userLogic = kea<userLogicType>([
                           ) || []
                     : [],
         ],
+
+        themeMode: [
+            (s) => [s.user],
+            (user): UserTheme => {
+                return user?.theme_mode || 'light'
+            },
+        ],
     }),
     afterMount(({ actions }) => {
         const preloadedUser = getAppContext()?.current_user

diff --git a/frontend/src/types.ts b/frontend/src/types.ts
@@ -165,6 +165,8 @@ export interface SceneDashboardChoice {
     dashboard: number | DashboardBasicType
 }
 
+export type UserTheme = 'light' | 'dark' | 'system'
+
 /** Full User model. */
 export interface UserType extends UserBaseType {
     date_joined: string
@@ -186,8 +188,7 @@ export interface UserType extends UserBaseType {
     has_social_auth: boolean
     has_seen_product_intro_for?: Record<string, boolean>
     scene_personalisation?: SceneDashboardChoice[]
-    /** Null means "sync with system". */
-    theme_mode: 'light' | 'dark' | null
+    theme_mode?: UserTheme | null
 }
 
 export interface NotificationSettings {

diff --git a/latest_migrations.manifest b/latest_migrations.manifest
@@ -5,7 +5,7 @@ contenttypes: 0002_remove_content_type_name
 ee: 0015_add_verified_properties
 otp_static: 0002_throttling
 otp_totp: 0002_auto_20190420_0723
-posthog: 0377_flatpersonoverride
+posthog: 0378_alter_user_theme_mode
 sessions: 0001_initial
 social_django: 0010_uid_db_index
-two_factor: 0007_auto_20201201_1019
+two_factor: 0007_auto_20201201_1019
diff --git a/posthog/migrations/0378_alter_user_theme_mode.py b/posthog/migrations/0378_alter_user_theme_mode.py
@@ -0,0 +1,22 @@
+# Generated by Django 3.2.19 on 2023-12-20 12:58
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("posthog", "0377_flatpersonoverride"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="user",
+            name="theme_mode",
+            field=models.CharField(
+                blank=True,
+                choices=[("light", "Light"), ("dark", "Dark"), ("system", "System")],
+                max_length=20,
+                null=True,
+            ),
+        ),
+    ]
diff --git a/posthog/models/user.py b/posthog/models/user.py
@@ -118,6 +118,7 @@ def events_column_config_default() -> Dict[str, Any]:
 class ThemeMode(models.TextChoices):
     LIGHT = "light", "Light"
     DARK = "dark", "Dark"
+    SYSTEM = "system", "System"
 
 
 class User(AbstractUser, UUIDClassicModel):