fix: moved our theme switching from theme= to class= based

.storybook/decorators/withTheme.tsx

@@ -6,8 +6,9 @@ import type { Decorator } from '@storybook/react'
 export const withTheme: Decorator = (Story, context) => {
     const theme = context.globals.theme
 
-    // set the theme
-    document.body.setAttribute('theme', theme === 'dark' ? 'dark' : 'light')
+    // Update class instead of attribute
+    document.body.classList.remove('theme-light', 'theme-dark')
+    document.body.classList.add(theme === 'dark' ? 'theme-dark' : 'theme-light')
 
     return <Story />
 }

.storybook/preview.tsx

@@ -110,10 +110,17 @@ const preview: Preview = {
                 </>
             ),
         },
+        backgrounds: {
+            default: 'light',
+            values: [
+                { name: 'light', value: 'var(--bg-light)' },
+                { name: 'dark', value: 'var(--bg-3000-dark)' }
+            ]
+        }
     },
     globalTypes: {
         theme: {
-            description: '',
+            description: 'Global theme for components',
             defaultValue: 'light',
             toolbar: {
                 title: 'Theme',

frontend/src/layout/navigation-3000/Navigation.scss

@@ -187,7 +187,7 @@
     // Hidden when the sidebar is closed
     border-right: min(1px, var(--sidebar-width)) solid transparent;
 
-    [theme='dark'] & {
+    .theme-dark & {
         --sidebar-background: var(--accent-3000);
     }
 
@@ -360,7 +360,7 @@
     flex-shrink: 0;
     min-height: var(--accordion-row-height);
 
-    [theme='dark'] & {
+    .theme-dark & {
         --accordion-header-background: var(--bg-3000);
     }
 

frontend/src/lib/hooks/useThemedHtml.ts

@@ -17,7 +17,8 @@ export function useThemedHtml(overflowHidden = true): void {
             document.head.removeChild(oldStyle)
         }
 
-        document.body.setAttribute('theme', isDarkModeOn ? 'dark' : 'light')
+        document.body.classList.remove('theme-light', 'theme-dark')
+        document.body.classList.add(isDarkModeOn ? 'theme-dark' : 'theme-light')
 
         if (customCss) {
             const newStyle = document.createElement('style')

frontend/src/scenes/themes/CustomCssScene.tsx

@@ -18,7 +18,7 @@ const TRON_THEME = `:root {
     --radius: 0px;
 }
 
-body[theme=dark] {
+.theme-dark {
     --border: rgba(0, 255, 1, 0.5);
     --link: #00FF01;
     --border-bold: #00FF01;
@@ -49,7 +49,7 @@ const BARBIE_THEME = `:root {
     --radius: 16px;
 }
 
-body[theme=light] {
+.theme-light {
     --border: rgba(255, 105, 180, 0.5);
     --border-3000: #ff409f;
     --link: #E306AD;

frontend/src/styles/global.scss

@@ -648,11 +648,11 @@ body {
     touch-action: manipulation; // Disable double-tap-to-zoom on mobile, making taps slightly snappier
     background: var(--bg-3000);
 
-    &[theme='light'] {
+    &.theme-light {
         @include light-mode-3000-variables;
     }
 
-    &[theme='dark'] {
+    &.theme-dark {
         // Semantic colors (Dark mode) WIP
         --content-primary: var(--neutral-cool-100);
         --content-warning: var(--orange-300);

frontend/src/toolbar/Toolbar.stories.tsx

@@ -2,7 +2,7 @@ import '~/styles'
 import '~/toolbar/styles.scss'
 
 import { Meta, StoryFn } from '@storybook/react'
-import { useActions, useMountedLogic } from 'kea'
+import { useActions, useMountedLogic, useValues } from 'kea'
 import { useEffect } from 'react'
 
 import { useStorybookMocks } from '~/mocks/browser'
@@ -89,13 +89,17 @@ const BasicTemplate: StoryFn<ToolbarStoryProps> = (props) => {
     const theToolbarLogic = toolbarLogic()
 
     const { setVisibleMenu, setDragPosition, toggleMinimized, toggleTheme } = useActions(theToolbarLogic)
+    const { theme: currentTheme } = useValues(theToolbarLogic)
 
     useEffect(() => {
         setDragPosition(50, 50)
         setVisibleMenu(props.menu || 'none')
         toggleMinimized(props.minimized ?? false)
-        toggleTheme(props.theme || 'light')
-    }, [Object.values(props)])
+
+        if (props.theme && props.theme !== currentTheme) {
+            toggleTheme()
+        }
+    }, [props.menu, props.minimized, props.theme])
 
     return (
         <div className="min-h-[32rem]">

frontend/src/toolbar/ToolbarContainer.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { useValues } from 'kea'
 import { Fade } from 'lib/components/Fade/Fade'
 import { FloatingContainerContext } from 'lib/hooks/useFloatingContainerContext'
@@ -13,20 +14,17 @@ import { toolbarConfigLogic } from './toolbarConfigLogic'
 export function ToolbarContainer(): JSX.Element {
     const { buttonVisible } = useValues(toolbarConfigLogic)
     const { theme } = useValues(toolbarLogic)
-
-    // KLUDGE: if we put theme directly on the div then
-    // linting and typescript complain about it not being
-    // a valid attribute. So we put it in a variable and
-    // spread it in. 🤷‍
-    const themeProps = { theme }
-
     const ref = useRef<HTMLDivElement | null>(null)
 
     return (
         <Fade visible={buttonVisible} className="toolbar-global-fade-container ph-no-capture">
             <Elements />
             <ToolbarFixedZones />
-            <div id="button-toolbar" ref={ref} className="ph-no-capture" {...themeProps}>
+            <div
+                id="button-toolbar"
+                ref={ref}
+                className={clsx('ph-no-capture', theme === 'dark' ? 'theme-dark' : 'theme-light')}
+            >
                 <FloatingContainerContext.Provider value={ref}>
                     <Toolbar />
                 </FloatingContainerContext.Provider>

frontend/src/toolbar/bar/Toolbar.scss

@@ -33,7 +33,7 @@
         z-index: 2147483020;
     }
 
-    &[theme='dark'] {
+    &.theme-dark {
         // override the mark value so that feature flag overrides are visible _and legible_ in dark mode
         --mark: var(--secondary-3000-hover-dark);
 

tailwind.config.js

@@ -102,6 +102,7 @@ const config = {
         },
     },
     plugins: [require('@tailwindcss/container-queries')],
+    darkMode: 'class',
 }
 
 module.exports = config