From fc6812a97054b51561e308e2e0e96b85c6b3747a Mon Sep 17 00:00:00 2001
From: Marius Andra <marius.andra@gmail.com>
Date: Wed, 27 Mar 2024 23:11:55 +0100
Subject: [PATCH 1/3] fix(3000): interface triangulator

---
 .../src/layout/navigation-3000/Navigation.tsx | 10 +++++---
 .../navigation-3000/components/Navbar.tsx     |  8 +++++-
 .../navigation-3000/sidepanel/SidePanel.tsx   |  3 +++
 .../src/layout/navigation-3000/themeLogic.ts  | 24 +++++++++++++++++-
 frontend/src/layout/navigation-3000/themes.ts | 25 +++++++++++++++++++
 .../Cards/InsightCard/InsightCard.tsx         |  4 +++
 .../components/CompactList/CompactList.tsx    | 10 +++++++-
 frontend/src/lib/constants.tsx                |  1 +
 8 files changed, 78 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/layout/navigation-3000/themes.ts

diff --git a/frontend/src/layout/navigation-3000/Navigation.tsx b/frontend/src/layout/navigation-3000/Navigation.tsx
index 507c2a9146520..da07642816cec 100644
--- a/frontend/src/layout/navigation-3000/Navigation.tsx
+++ b/frontend/src/layout/navigation-3000/Navigation.tsx
@@ -1,7 +1,7 @@
 import './Navigation.scss'
 
 import clsx from 'clsx'
-import { useMountedLogic, useValues } from 'kea'
+import { useValues } from 'kea'
 import { BillingAlertsV2 } from 'lib/components/BillingAlertsV2'
 import { CommandBar } from 'lib/components/CommandBar/CommandBar'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
@@ -27,13 +27,14 @@ export function Navigation({
     children: ReactNode
     sceneConfig: SceneConfig | null
 }): JSX.Element {
-    useMountedLogic(themeLogic)
+    const { theme } = useValues(themeLogic)
     const { mobileLayout } = useValues(navigationLogic)
     const { activeNavbarItem, mode } = useValues(navigation3000Logic)
 
     if (mode !== 'full') {
         return (
-            <div className="Navigation3000 flex-col">
+            // eslint-disable-next-line react/forbid-dom-props
+            <div className="Navigation3000 flex-col" style={theme?.mainStyle}>
                 {mode === 'minimal' ? <MinimalNavigation /> : null}
                 <main>{children}</main>
             </div>
@@ -41,7 +42,8 @@ export function Navigation({
     }
 
     return (
-        <div className={clsx('Navigation3000', mobileLayout && 'Navigation3000--mobile')}>
+        // eslint-disable-next-line react/forbid-dom-props
+        <div className={clsx('Navigation3000', mobileLayout && 'Navigation3000--mobile')} style={theme?.mainStyle}>
             <Navbar />
             <FlaggedFeature flag={FEATURE_FLAGS.POSTHOG_3000_NAV}>
                 {activeNavbarItem && <Sidebar key={activeNavbarItem.identifier} navbarItem={activeNavbarItem} />}
diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx
index a99d6def7188d..62308871fc11a 100644
--- a/frontend/src/layout/navigation-3000/components/Navbar.tsx
+++ b/frontend/src/layout/navigation-3000/components/Navbar.tsx
@@ -15,12 +15,14 @@ import { userLogic } from 'scenes/userLogic'
 
 import { navigationLogic } from '~/layout/navigation/navigationLogic'
 import { AccountPopoverOverlay } from '~/layout/navigation/TopBar/AccountPopover'
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 
 import { navigation3000Logic } from '../navigationLogic'
 import { KeyboardShortcut } from './KeyboardShortcut'
 import { NavbarButton } from './NavbarButton'
 
 export function Navbar(): JSX.Element {
+    const { theme } = useValues(themeLogic)
     const { user } = useValues(userLogic)
     const { isAccountPopoverOpen, systemStatusHealthy } = useValues(navigationLogic)
     const { closeAccountPopover, toggleAccountPopover } = useActions(navigationLogic)
@@ -34,7 +36,11 @@ export function Navbar(): JSX.Element {
     return (
         <>
             <nav className={clsx('Navbar3000', !isNavShown && 'Navbar3000--hidden')} ref={containerRef}>
-                <div className="Navbar3000__content">
+                <div
+                    className="Navbar3000__content"
+                    // eslint-disable-next-line react/forbid-dom-props
+                    style={theme?.sidebarStyle}
+                >
                     <ScrollableShadows innerClassName="Navbar3000__top" direction="vertical">
                         {navbarItems.map((section, index) => (
                             <ul key={index}>
diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
index bcad53bdc9dfb..c9ea8f6fa3bab 100644
--- a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
+++ b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.tsx
@@ -13,6 +13,7 @@ import {
     SidePanelExports,
     SidePanelExportsIcon,
 } from '~/layout/navigation-3000/sidepanel/panels/exports/SidePanelExports'
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { SidePanelTab } from '~/types'
 
 import { SidePanelActivation, SidePanelActivationIcon } from './panels/activation/SidePanelActivation'
@@ -91,6 +92,7 @@ export const SIDE_PANEL_TABS: Record<
 const DEFAULT_WIDTH = 512
 
 export function SidePanel(): JSX.Element | null {
+    const { theme } = useValues(themeLogic)
     const { visibleTabs, extraTabs } = useValues(sidePanelLogic)
     const { selectedTab, sidePanelOpen, modalMode } = useValues(sidePanelStateLogic)
     const { openSidePanel, closeSidePanel, setSidePanelAvailable } = useActions(sidePanelStateLogic)
@@ -170,6 +172,7 @@ export function SidePanel(): JSX.Element | null {
             // eslint-disable-next-line react/forbid-dom-props
             style={{
                 width: sidePanelOpenAndAvailable ? desiredWidth ?? DEFAULT_WIDTH : undefined,
+                ...(theme?.sidebarStyle ?? {}),
             }}
         >
             <Resizer {...resizerLogicProps} />
diff --git a/frontend/src/layout/navigation-3000/themeLogic.ts b/frontend/src/layout/navigation-3000/themeLogic.ts
index 95ed6f56a16d6..9e2731a995a61 100644
--- a/frontend/src/layout/navigation-3000/themeLogic.ts
+++ b/frontend/src/layout/navigation-3000/themeLogic.ts
@@ -1,16 +1,20 @@
 import { actions, connect, events, kea, path, reducers, selectors } from 'kea'
+import { FEATURE_FLAGS } from 'lib/constants'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { sceneLogic } from 'scenes/sceneLogic'
 import { userLogic } from 'scenes/userLogic'
 
 import type { themeLogicType } from './themeLogicType'
+import { Theme, themes } from './themes'
 
 export const themeLogic = kea<themeLogicType>([
     path(['layout', 'navigation-3000', 'themeLogic']),
     connect({
-        values: [userLogic, ['themeMode']],
+        values: [userLogic, ['themeMode'], featureFlagLogic, ['featureFlags']],
     }),
     actions({
         syncDarkModePreference: (darkModePreference: boolean) => ({ darkModePreference }),
+        setTheme: (theme: string | null) => ({ theme }),
     }),
     reducers({
         darkModeSystemPreference: [
@@ -19,8 +23,26 @@ export const themeLogic = kea<themeLogicType>([
                 syncDarkModePreference: (_, { darkModePreference }) => darkModePreference,
             },
         ],
+        selectedTheme: [
+            null as string | null,
+            { persist: true },
+            {
+                setTheme: (_, { theme }) => theme,
+            },
+        ],
     }),
     selectors({
+        theme: [
+            (s) => [s.selectedTheme, s.featureFlags],
+            (selectedTheme, featureFlags): Theme | null => {
+                const flagVariant = featureFlags[FEATURE_FLAGS.THEME]
+                return (
+                    (selectedTheme ? themes.find((theme) => theme.id === selectedTheme) : null) ??
+                    (typeof flagVariant === 'string' ? themes.find((theme) => theme.id === flagVariant) : null) ??
+                    null
+                )
+            },
+        ],
         isDarkModeOn: [
             (s) => [s.themeMode, s.darkModeSystemPreference, sceneLogic.selectors.sceneConfig],
             (themeMode, darkModeSystemPreference, sceneConfig) => {
diff --git a/frontend/src/layout/navigation-3000/themes.ts b/frontend/src/layout/navigation-3000/themes.ts
new file mode 100644
index 0000000000000..4278c2afdd9a1
--- /dev/null
+++ b/frontend/src/layout/navigation-3000/themes.ts
@@ -0,0 +1,25 @@
+export interface Theme {
+    id: string
+    name: string
+    sidebarStyle?: React.CSSProperties
+    mainStyle?: React.CSSProperties
+    boxStyle?: React.CSSProperties
+}
+
+export const themes: Theme[] = [
+    {
+        id: 'bleachedTom',
+        name: 'Hi, My name is Tom, and I am the light.',
+        sidebarStyle: {
+            background:
+                'linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),url(https://www.shutterstock.com/image-photo/soft-wave-blue-ocean-on-600nw-396969259.jpg)',
+        },
+        mainStyle: {
+            background:
+                'linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),url(https://pbs.twimg.com/profile_images/1237550450/mstom_400x400.jpg)',
+        },
+        boxStyle: {
+            background: 'linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7))',
+        },
+    },
+]
diff --git a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
index 338c53bb14401..084371830fa99 100644
--- a/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
+++ b/frontend/src/lib/components/Cards/InsightCard/InsightCard.tsx
@@ -28,6 +28,7 @@ import { Paths } from 'scenes/paths/Paths'
 import { RetentionContainer } from 'scenes/retention/RetentionContainer'
 import { ActionsHorizontalBar, ActionsLineGraph, ActionsPie } from 'scenes/trends/viz'
 
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
 import { dataNodeLogic, DataNodeLogicProps } from '~/queries/nodes/DataNode/dataNodeLogic'
 import { filtersToQueryNode } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
 import { insightVizDataCollectionId, insightVizDataNodeKey } from '~/queries/nodes/InsightViz/InsightViz'
@@ -259,6 +260,7 @@ function InsightCardInternal(
     }: InsightCardProps,
     ref: React.Ref<HTMLDivElement>
 ): JSX.Element {
+    const { theme } = useValues(themeLogic)
     const insightLogicProps: InsightLogicProps = {
         dashboardItemId: insight.short_id,
         dashboardId: dashboardId,
@@ -298,6 +300,8 @@ function InsightCardInternal(
             className={clsx('InsightCard border', highlighted && 'InsightCard--highlighted', className)}
             data-attr="insight-card"
             {...divProps}
+            // eslint-disable-next-line react/forbid-dom-props
+            style={{ ...(divProps?.style ?? {}), ...(theme?.boxStyle ?? {}) }}
             ref={ref}
         >
             <BindLogic logic={insightLogic} props={insightLogicProps}>
diff --git a/frontend/src/lib/components/CompactList/CompactList.tsx b/frontend/src/lib/components/CompactList/CompactList.tsx
index 276c33dd78b36..3d66e898e185f 100644
--- a/frontend/src/lib/components/CompactList/CompactList.tsx
+++ b/frontend/src/lib/components/CompactList/CompactList.tsx
@@ -1,9 +1,12 @@
 import './CompactList.scss'
 
+import { useValues } from 'kea'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
 
+import { themeLogic } from '~/layout/navigation-3000/themeLogic'
+
 import { EmptyMessage, EmptyMessageProps } from '../EmptyMessage/EmptyMessage'
 
 interface CompactListProps {
@@ -23,8 +26,13 @@ export function CompactList({
     emptyMessage,
     renderRow,
 }: CompactListProps): JSX.Element {
+    const { theme } = useValues(themeLogic)
     return (
-        <div className="CompactList">
+        <div
+            className="CompactList"
+            // eslint-disable-next-line react/forbid-dom-props
+            style={theme?.boxStyle}
+        >
             <div className="CompactList__header">
                 <h3 className="px-2 truncate" title={title}>
                     {title}
diff --git a/frontend/src/lib/constants.tsx b/frontend/src/lib/constants.tsx
index 391c13b50a213..40c81e3f6279e 100644
--- a/frontend/src/lib/constants.tsx
+++ b/frontend/src/lib/constants.tsx
@@ -214,6 +214,7 @@ export const FEATURE_FLAGS = {
     SUBSCRIBE_FROM_PAYGATE: 'subscribe-from-paygate', // owner: #team-growth
     REVERSE_PROXY_ONBOARDING: 'reverse-proxy-onboarding', // owner: @zlwaterfield
     SESSION_REPLAY_MOBILE_ONBOARDING: 'session-replay-mobile-onboarding', // owner: #team-replay
+    THEME: 'theme', // owner: @aprilfools
 } as const
 export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS]
 

From 9efca1e25717e4e7da172582b3d5d75eb3b9eebd Mon Sep 17 00:00:00 2001
From: Marius Andra <marius.andra@gmail.com>
Date: Wed, 27 Mar 2024 23:16:51 +0100
Subject: [PATCH 2/3] more bleach

---
 frontend/src/layout/navigation-3000/themeLogic.ts | 7 +++++--
 frontend/src/layout/navigation-3000/themes.ts     | 2 ++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/layout/navigation-3000/themeLogic.ts b/frontend/src/layout/navigation-3000/themeLogic.ts
index 9e2731a995a61..c4d0737a5362a 100644
--- a/frontend/src/layout/navigation-3000/themeLogic.ts
+++ b/frontend/src/layout/navigation-3000/themeLogic.ts
@@ -44,8 +44,11 @@ export const themeLogic = kea<themeLogicType>([
             },
         ],
         isDarkModeOn: [
-            (s) => [s.themeMode, s.darkModeSystemPreference, sceneLogic.selectors.sceneConfig],
-            (themeMode, darkModeSystemPreference, sceneConfig) => {
+            (s) => [s.themeMode, s.darkModeSystemPreference, sceneLogic.selectors.sceneConfig, s.theme],
+            (themeMode, darkModeSystemPreference, sceneConfig, theme) => {
+                if (theme) {
+                    return !!theme?.dark
+                }
                 // NOTE: Unauthenticated users always get the light mode until we have full support across onboarding flows
                 if (
                     sceneConfig?.layout === 'plain' ||
diff --git a/frontend/src/layout/navigation-3000/themes.ts b/frontend/src/layout/navigation-3000/themes.ts
index 4278c2afdd9a1..c53b53bf5191d 100644
--- a/frontend/src/layout/navigation-3000/themes.ts
+++ b/frontend/src/layout/navigation-3000/themes.ts
@@ -1,6 +1,7 @@
 export interface Theme {
     id: string
     name: string
+    dark?: boolean
     sidebarStyle?: React.CSSProperties
     mainStyle?: React.CSSProperties
     boxStyle?: React.CSSProperties
@@ -10,6 +11,7 @@ export const themes: Theme[] = [
     {
         id: 'bleachedTom',
         name: 'Hi, My name is Tom, and I am the light.',
+        dark: false,
         sidebarStyle: {
             background:
                 'linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),url(https://www.shutterstock.com/image-photo/soft-wave-blue-ocean-on-600nw-396969259.jpg)',

From 4908430a4e5bd0daa2b1b3de291be7774e59ec67 Mon Sep 17 00:00:00 2001
From: Marius Andra <marius.andra@gmail.com>
Date: Wed, 27 Mar 2024 23:26:18 +0100
Subject: [PATCH 3/3] developers

---
 frontend/src/layout/navigation-3000/themes.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/frontend/src/layout/navigation-3000/themes.ts b/frontend/src/layout/navigation-3000/themes.ts
index c53b53bf5191d..c2577fd24fecc 100644
--- a/frontend/src/layout/navigation-3000/themes.ts
+++ b/frontend/src/layout/navigation-3000/themes.ts
@@ -24,4 +24,20 @@ export const themes: Theme[] = [
             background: 'linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7))',
         },
     },
+    {
+        id: 'developers',
+        name: 'Developers, Developers, Developers, Developers',
+        dark: false,
+        sidebarStyle: {
+            background:
+                'linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),url(https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExOWM2eDhveXRrNTJrdGZ5bmdhaGJrZWNqczFiZzUzMXF5aXc5azljNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/2yuiXIlW8TwY2raAPB/giphy-downsized-large.gif)',
+        },
+        mainStyle: {
+            background:
+                'linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)),url(https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExa3ljdm5mczV3dnQza3lqY3E1czEyd3J0d3A4ZmtqbGE3a2JybTJlMyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/l3q2zbskZp2j8wniE/giphy-downsized-large.gif)',
+        },
+        boxStyle: {
+            background: 'linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7))',
+        },
+    },
 ]