feat: custom themes

frontend/src/layout/GlobalModals.tsx

@@ -12,6 +12,7 @@ import { CreateProjectModal } from 'scenes/project/CreateProjectModal'
 import { SessionPlayerModal } from 'scenes/session-recordings/player/modal/SessionPlayerModal'
 import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { InviteModal } from 'scenes/settings/organization/InviteModal'
+import { PreviewingCustomCssModal } from 'scenes/themes/PreviewingCustomCssModal'
 import { userLogic } from 'scenes/userLogic'
 
 import type { globalModalsLogicType } from './GlobalModalsType'
@@ -70,6 +71,7 @@ export function GlobalModals(): JSX.Element {
             <ConfirmUpgradeModal />
             <TimeSensitiveAuthenticationModal />
             <SessionPlayerModal />
+            <PreviewingCustomCssModal />
             {user && user.organization?.enforce_2fa && !user.is_2fa_enabled && (
                 <LemonModal title="Set up 2FA" closable={false}>
                     <p>

frontend/src/layout/navigation-3000/themeLogic.ts

@@ -1,4 +1,4 @@
-import { actions, connect, events, kea, path, reducers, selectors } from 'kea'
+import { actions, connect, events, kea, listeners, path, reducers, selectors } from 'kea'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { sceneLogic } from 'scenes/sceneLogic'
@@ -15,6 +15,9 @@ export const themeLogic = kea<themeLogicType>([
     actions({
         syncDarkModePreference: (darkModePreference: boolean) => ({ darkModePreference }),
         setTheme: (theme: string | null) => ({ theme }),
+        saveCustomCss: true,
+        setPersistedCustomCss: (css: string | null) => ({ css }),
+        setPreviewingCustomCss: (css: string | null) => ({ css }),
     }),
     reducers({
         darkModeSystemPreference: [
@@ -30,6 +33,20 @@ export const themeLogic = kea<themeLogicType>([
                 setTheme: (_, { theme }) => theme,
             },
         ],
+        persistedCustomCss: [
+            null as string | null,
+            { persist: true },
+            {
+                setPersistedCustomCss: (_, { css }) => css,
+            },
+        ],
+        previewingCustomCss: [
+            null as string | null,
+            { persist: true },
+            {
+                setPreviewingCustomCss: (_, { css }) => css,
+            },
+        ],
     }),
     selectors({
         theme: [
@@ -43,6 +60,14 @@ export const themeLogic = kea<themeLogicType>([
                 )
             },
         ],
+        customCssEnabled: [
+            (s) => [s.featureFlags],
+            (featureFlags): boolean => !!featureFlags[FEATURE_FLAGS.CUSTOM_CSS_THEMES],
+        ],
+        customCss: [
+            (s) => [s.persistedCustomCss, s.previewingCustomCss],
+            (persistedCustomCss, previewingCustomCss): string | null => previewingCustomCss || persistedCustomCss,
+        ],
         isDarkModeOn: [
             (s) => [s.themeMode, s.darkModeSystemPreference, sceneLogic.selectors.sceneConfig, s.theme],
             (themeMode, darkModeSystemPreference, sceneConfig, theme) => {
@@ -70,6 +95,12 @@ export const themeLogic = kea<themeLogicType>([
             },
         ],
     }),
+    listeners(({ values, actions }) => ({
+        saveCustomCss() {
+            actions.setPersistedCustomCss(values.previewingCustomCss)
+            actions.setPreviewingCustomCss(null)
+        },
+    })),
     events(({ cache, actions }) => ({
         afterMount() {
             cache.prefersColorSchemeMedia = window.matchMedia('(prefers-color-scheme: dark)')

frontend/src/lib/components/CommandPalette/commandPaletteLogic.tsx

@@ -23,6 +23,7 @@ import {
     IconLive,
     IconNight,
     IconNotebook,
+    IconPalette,
     IconPeople,
     IconPeopleFilled,
     IconPieChart,
@@ -858,6 +859,11 @@ export const commandPaletteLogic = kea<commandPaletteLogicType>([
                                     actions.updateUser({ theme_mode: 'system' })
                                 },
                             },
+                            {
+                                icon: IconPalette,
+                                display: 'Add custom CSS',
+                                executor: () => push(urls.customCss()),
+                            },
                         ],
                     }),
                 },

frontend/src/lib/constants.tsx

@@ -231,6 +231,7 @@ export const FEATURE_FLAGS = {
     CUSTOM_CHANNEL_TYPE_RULES: 'custom-channel-type-rules', // owner: @robbie-c #team-web-analytics
     SELF_SERVE_CREDIT_OVERRIDE: 'self-serve-credit-override', // owner: @zach
     EXPERIMENTS_MIGRATION_DISABLE_UI: 'experiments-migration-disable-ui', // owner: @jurajmajerik #team-experiments
+    CUSTOM_CSS_THEMES: 'custom-css-themes', // owner: @daibhin
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

frontend/src/lib/hooks/useThemedHtml.ts

@@ -6,16 +6,33 @@ import { sceneLogic } from 'scenes/sceneLogic'
 import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 
 export function useThemedHtml(overflowHidden = true): void {
-    const { isDarkModeOn } = useValues(themeLogic)
+    const { isDarkModeOn, customCss } = useValues(themeLogic)
     const { sceneConfig } = useValues(sceneLogic)
 
+    const CUSTOM_THEME_STYLES_ID = 'ph-custom-theme-styles'
+
     useEffect(() => {
+        const oldStyle = document.getElementById(CUSTOM_THEME_STYLES_ID)
+        if (oldStyle) {
+            document.head.removeChild(oldStyle)
+        }
+
         document.body.setAttribute('theme', isDarkModeOn ? 'dark' : 'light')
+
+        if (customCss) {
+            const newStyle = document.createElement('style')
+            newStyle.id = CUSTOM_THEME_STYLES_ID
+            newStyle.appendChild(document.createTextNode(customCss))
+            document.head.appendChild(newStyle)
+        }
+    }, [isDarkModeOn, customCss])
+
+    useEffect(() => {
         // overflow-hidden since each area handles scrolling individually (e.g. navbar, scene, side panel)
         if (overflowHidden) {
             document.body.classList.add('overflow-hidden')
         }
-    }, [isDarkModeOn])
+    }, [overflowHidden])
 
     useEffect(() => {
         // Add a theme-color meta tag to the head to change the address bar color on browsers that support it

frontend/src/scenes/appScenes.ts

@@ -37,6 +37,7 @@ export const appScenes: Record<Scene, () => any> = {
     [Scene.ErrorTrackingGroup]: () => import('./error-tracking/ErrorTrackingGroupScene'),
     [Scene.Surveys]: () => import('./surveys/Surveys'),
     [Scene.Survey]: () => import('./surveys/Survey'),
+    [Scene.CustomCss]: () => import('./themes/CustomCssScene'),
     [Scene.SurveyTemplates]: () => import('./surveys/SurveyTemplates'),
     [Scene.DataModel]: () => import('./data-model/DataModelScene'),
     [Scene.DataWarehouse]: () => import('./data-warehouse/external/DataWarehouseExternalScene'),

frontend/src/scenes/sceneTypes.ts

@@ -26,6 +26,7 @@ export enum Scene {
     ReplaySingle = 'ReplaySingle',
     ReplayPlaylist = 'ReplayPlaylist',
     ReplayFilePlayback = 'ReplayFilePlayback',
+    CustomCss = 'CustomCss',
     PersonsManagement = 'PersonsManagement',
     Person = 'Person',
     PipelineNodeNew = 'PipelineNodeNew',

frontend/src/scenes/scenes.ts

@@ -131,6 +131,10 @@ export const sceneConfigurations: Record<Scene, SceneConfig> = {
         activityScope: ActivityScope.REPLAY,
         defaultDocsPath: '/docs/session-replay',
     },
+    [Scene.CustomCss]: {
+        projectBased: true,
+        name: 'Custom CSS',
+    },
     [Scene.ReplayPlaylist]: {
         projectBased: true,
         name: 'Replay playlist',
@@ -539,6 +543,7 @@ export const routes: Record<string, Scene> = {
     [urls.pipeline(':tab')]: Scene.Pipeline,
     [urls.pipelineNode(':stage', ':id', ':nodeTab')]: Scene.PipelineNode,
     [urls.pipelineNode(':stage', ':id')]: Scene.PipelineNode,
+    [urls.customCss()]: Scene.CustomCss,
     [urls.groups(':groupTypeIndex')]: Scene.PersonsManagement,
     [urls.group(':groupTypeIndex', ':groupKey', false)]: Scene.Group,
     [urls.group(':groupTypeIndex', ':groupKey', false, ':groupTab')]: Scene.Group,

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

@@ -1,22 +1,39 @@
-import { IconDay, IconLaptop, IconNight } from '@posthog/icons'
-import { LemonSelect, LemonSelectProps } from '@posthog/lemon-ui'
+import { IconDay, IconLaptop, IconNight, IconPalette } from '@posthog/icons'
+import { LemonSelect, LemonSelectOptions, LemonSelectProps } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { router } from 'kea-router'
+import { urls } from 'scenes/urls'
 import { userLogic } from 'scenes/userLogic'
 
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
+
 export function ThemeSwitcher({
     onlyLabel,
     ...props
 }: Partial<LemonSelectProps<any>> & { onlyLabel?: boolean }): JSX.Element {
     const { themeMode } = useValues(userLogic)
     const { updateUser } = useActions(userLogic)
+    const { customCssEnabled } = useValues(themeLogic)
 
-    return (
-        <LemonSelect
-            options={[
+    const themeOptions: LemonSelectOptions<string> = [
+        {
+            options: [
                 { icon: <IconDay />, value: 'light', label: 'Light mode' },
                 { icon: <IconNight />, value: 'dark', label: 'Dark mode' },
                 { icon: <IconLaptop />, value: 'system', label: `Sync with system` },
-            ]}
+            ],
+        },
+    ]
+
+    if (customCssEnabled) {
+        themeOptions.push({
+            options: [{ icon: <IconPalette />, value: 'custom', label: 'Edit custom CSS' }],
+        })
+    }
+
+    return (
+        <LemonSelect
+            options={themeOptions}
             value={themeMode}
             renderButtonContent={(leaf) => {
                 const labelText = leaf ? leaf.label : 'Sync with system'
@@ -31,7 +48,13 @@ export function ThemeSwitcher({
                     </>
                 )
             }}
-            onChange={(value) => updateUser({ theme_mode: value })}
+            onChange={(value) => {
+                if (value === 'custom') {
+                    router.actions.push(urls.customCss())
+                } else {
+                    updateUser({ theme_mode: value })
+                }
+            }}
             dropdownPlacement="right-start"
             dropdownMatchSelectWidth={false}
             {...props}

frontend/src/scenes/themes/CustomCssScene.tsx

@@ -0,0 +1,132 @@
+import { LemonButton, Link } from '@posthog/lemon-ui'
+import { useActions, useValues } from 'kea'
+import { router } from 'kea-router'
+import { PageHeader } from 'lib/components/PageHeader'
+import { CodeEditor } from 'lib/monaco/CodeEditor'
+import { useEffect } from 'react'
+import { SceneExport } from 'scenes/sceneTypes'
+
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
+
+import { urls } from '../urls'
+
+export const scene: SceneExport = {
+    component: CustomCssScene,
+}
+
+const TRON_THEME = `:root {
+    --radius: 0px;
+}
+
+body[theme=dark] {
+    --border: rgba(0, 255, 1, 0.5);
+    --link: #00FF01;
+    --border-bold: #00FF01;
+    --bg-3000: #111;
+    --glass-bg-3000: #111;
+    --bg-light: #222;
+    --bg-table: #222;
+    --muted-3000: #0EA70E;
+    --primary-3000: #00FF01;
+    --primary-3000-hover: #00FF01;
+    --primary-alt-highlight: rgba(0, 255, 1, 0.1);
+    --text-3000: #00FF01;
+    --accent-3000: #222;
+    --glass-border-3000: rgba(0,0,0,.3);
+    --font-title: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+
+    --primary-3000-frame-bg-light: #00FF01;
+    --primary-3000-button-bg: #00FF01;
+    --primary-3000-button-border: #00FF01;
+    --text-secondary-3000: #00FF01;
+}
+
+.TopBar3000__content {
+	border-bottom: solid 1px #00FF01;
+}`
+
+const BARBIE_THEME = `:root {
+    --radius: 16px;
+}
+
+body[theme=light] {
+    --border: rgba(255, 105, 180, 0.5);
+    --border-3000: #ff409f;
+    --link: #E306AD;
+    --border-bold: rgba(255, 105, 180, 0.8);
+    --bg-3000: #FED9E9;
+    --glass-bg-3000: rgba(255, 192, 203, 0.8);
+    --bg-light: #FFF0F5;
+    --bg-table: #F8BBD0;
+    --muted-3000: #E306AD;
+    --primary-3000: #FF69B4;
+    --primary-3000-hover: #FF1493;
+    --primary-alt-highlight: rgba(255, 105, 180, 0.1);
+    --text-3000: #ed3993;
+    --text-3000-light: #58003f;
+    --accent-3000: #FEBDE2;
+    --glass-border-3000: rgba(245, 145, 199, 0.3);
+
+    --primary-3000-frame-bg-light: #F18DBC;
+    --primary-3000-button-bg: #FF69B4;
+    --primary-3000-button-border: #FF1493;
+    --primary-3000-button-border-hover: #db097b;
+    --text-secondary-3000: #FFB6C1;
+
+    --secondary-3000-button-border: #FF1493;
+    --secondary-3000-frame-bg-light: #F7B9D7;
+    --secondary-3000-button-border-hover: #d40b76;
+}`
+
+export function CustomCssScene(): JSX.Element {
+    const { persistedCustomCss, previewingCustomCss } = useValues(themeLogic)
+    const { saveCustomCss, setPreviewingCustomCss } = useActions(themeLogic)
+
+    useEffect(() => {
+        setPreviewingCustomCss(previewingCustomCss || persistedCustomCss || '')
+    }, [])
+
+    const onPreview = (): void => {
+        router.actions.push(urls.projectHomepage())
+    }
+
+    return (
+        <div className="flex flex-col space-y-2">
+            <PageHeader
+                buttons={
+                    <>
+                        <LemonButton type="secondary" onClick={onPreview}>
+                            Preview
+                        </LemonButton>
+                        <LemonButton
+                            type="primary"
+                            onClick={() => {
+                                saveCustomCss()
+                                router.actions.push(urls.projectHomepage())
+                            }}
+                        >
+                            Save and set
+                        </LemonButton>
+                    </>
+                }
+            />
+            <p>
+                You can add custom CSS to change the style of your PostHog instance. If you need some inspiration try
+                our templates: <Link onClick={() => setPreviewingCustomCss(TRON_THEME)}>Tron</Link>,{' '}
+                <Link onClick={() => setPreviewingCustomCss(BARBIE_THEME)}>Barbie</Link>
+            </p>
+            <CodeEditor
+                className="border"
+                language="css"
+                value={previewingCustomCss || ''}
+                onChange={(v) => setPreviewingCustomCss(v ?? null)}
+                height={600}
+                options={{
+                    minimap: {
+                        enabled: false,
+                    },
+                }}
+            />
+        </div>
+    )
+}