feat(onboarding): Dark mode

.storybook/decorators/withTheme.tsx

@@ -1,13 +1,20 @@
 import type { Decorator } from '@storybook/react'
+import { useActions } from 'kea'
+import { useEffect } from 'react'
+import { userLogic } from 'scenes/userLogic'
 
 /** Global story decorator that is used by the theming control to
  * switch between themes.
  */
 export const withTheme: Decorator = (Story, context) => {
     const theme = context.globals.theme
 
-    // set the theme
-    document.body.setAttribute('theme', theme === 'dark' ? 'dark' : 'light')
+    const { __testOnlyOverrideThemeFromCookie } = useActions(userLogic)
+
+    useEffect(() => {
+        document.body.setAttribute('theme', theme)
+        __testOnlyOverrideThemeFromCookie(theme)
+    }, [theme])
 
     return <Story />
 }

.storybook/test-runner.ts

@@ -3,10 +3,10 @@ import { getStoryContext, TestRunnerConfig, TestContext, waitForPageReady } from
 import type { Locator, Page, LocatorScreenshotOptions } from '@playwright/test'
 import type { Mocks } from '~/mocks/utils'
 import { StoryContext } from '@storybook/csf'
+import { UserTheme } from '~/types'
 
 // 'firefox' is technically supported too, but as of June 2023 it has memory usage issues that make is unusable
 type SupportedBrowserName = 'chromium' | 'webkit'
-type SnapshotTheme = 'light' | 'dark'
 
 // Extend Storybook interface `Parameters` with Chromatic parameters
 declare module '@storybook/types' {
@@ -44,7 +44,7 @@ declare module '@storybook/types' {
     }
 
     interface Globals {
-        theme: SnapshotTheme
+        theme: UserTheme
     }
 }
 
@@ -116,7 +116,7 @@ async function expectStoryToMatchSnapshot(
         page: Page,
         context: TestContext,
         browser: SupportedBrowserName,
-        theme: SnapshotTheme,
+        theme: UserTheme,
         targetSelector?: string
     ) => Promise<void>
     if (storyContext.parameters?.layout === 'fullscreen') {
@@ -129,7 +129,8 @@ async function expectStoryToMatchSnapshot(
         check = expectStoryToMatchComponentSnapshot
     }
 
-    await waitForPageReady(page)
+   await waitForPageReady(page)
+
     await page.evaluate((layout: string) => {
         // Stop all animations for consistent snapshots, and adjust other styles
         document.body.classList.add('storybook-test-runner')
@@ -152,26 +153,26 @@ async function expectStoryToMatchSnapshot(
         Array.from(document.querySelectorAll('img')).every((i: HTMLImageElement) => i.complete)
     )
 
-    // snapshot light theme
+    // Light theme snapshot
     await page.evaluate(() => {
         document.body.setAttribute('theme', 'light')
+        window.__testOnlyOverrideThemeFromCookie('light')
     })
-
     await check(page, context, browser, 'light', storyContext.parameters?.testOptions?.snapshotTargetSelector)
 
-    // snapshot dark theme
-    await page.evaluate(() => {
+    // Dark theme snapshot
+    await page.evaluate(() =>  {
         document.body.setAttribute('theme', 'dark')
+        window.__testOnlyOverrideThemeFromCookie('dark')
     })
-
     await check(page, context, browser, 'dark', storyContext.parameters?.testOptions?.snapshotTargetSelector)
 }
 
 async function expectStoryToMatchViewportSnapshot(
     page: Page,
     context: TestContext,
     browser: SupportedBrowserName,
-    theme: SnapshotTheme
+    theme: UserTheme
 ): Promise<void> {
     await expectLocatorToMatchStorySnapshot(page, context, browser, theme)
 }
@@ -180,7 +181,7 @@ async function expectStoryToMatchSceneSnapshot(
     page: Page,
     context: TestContext,
     browser: SupportedBrowserName,
-    theme: SnapshotTheme
+    theme: UserTheme
 ): Promise<void> {
     // If the `main` element isn't present, let's use `body` - this is needed in logged-out screens.
     // We use .last(), because the order of selector matches is based on the order of elements in the DOM,
@@ -192,7 +193,7 @@ async function expectStoryToMatchComponentSnapshot(
     page: Page,
     context: TestContext,
     browser: SupportedBrowserName,
-    theme: SnapshotTheme,
+    theme: UserTheme,
     targetSelector: string = '#storybook-root'
 ): Promise<void> {
     await page.evaluate(() => {
@@ -228,7 +229,7 @@ async function expectLocatorToMatchStorySnapshot(
     locator: Locator | Page,
     context: TestContext,
     browser: SupportedBrowserName,
-    theme: SnapshotTheme,
+    theme: UserTheme,
     options?: LocatorScreenshotOptions
 ): Promise<void> {
     const image = await locator.screenshot({ ...options })