From 83acbea1b06a35b5ee9fae43539f83dccccbdcaf Mon Sep 17 00:00:00 2001
From: Michael Taranto <michaeltaranto@users.noreply.github.com>
Date: Tue, 30 Jul 2024 10:22:14 +1000
Subject: [PATCH] site: Fix previews theme overrides (#1545)

---
 site/src/App/DocNavigation/DocDetails.tsx   | 49 +++++++++------------
 site/src/App/DocNavigation/DocExample.tsx   | 35 +++++++--------
 site/src/App/ThemeSetting/ThemedExample.tsx |  6 ++-
 3 files changed, 42 insertions(+), 48 deletions(-)

diff --git a/site/src/App/DocNavigation/DocDetails.tsx b/site/src/App/DocNavigation/DocDetails.tsx
index 57ec3374dec..3830f0c4fa0 100644
--- a/site/src/App/DocNavigation/DocDetails.tsx
+++ b/site/src/App/DocNavigation/DocDetails.tsx
@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
 import {
   Stack,
-  BraidProvider,
   List,
   TextLink,
   Secondary,
@@ -10,12 +9,10 @@ import {
 import { PlayroomStateProvider } from 'braid-src/lib/playroom/playroomState';
 import { LinkableHeading } from '@braid-design-system/docs-ui';
 import { PageTitle } from '../Seo/PageTitle';
-import { useThemeSettings } from '../ThemeSetting';
 import { DocsContext } from './DocNavigation';
 import { DocExample } from './DocExample';
 
 export const DocDetails = () => {
-  const { theme } = useThemeSettings();
   const { docs, docsName } = useContext(DocsContext);
 
   return docs ? (
@@ -23,16 +20,14 @@ export const DocDetails = () => {
       <PageTitle title={docsName} />
       <Stack space="xxlarge">
         {'Example' in docs && docs.Example ? (
-          <BraidProvider styleBody={false} theme={theme}>
-            <PlayroomStateProvider>
-              <DocExample
-                id={`${docsName}_example`}
-                Example={docs.Example}
-                background={docs.examplebackground}
-                showCodeByDefault={docs.category === 'Logic'}
-              />
-            </PlayroomStateProvider>
-          </BraidProvider>
+          <PlayroomStateProvider>
+            <DocExample
+              id={`${docsName}_example`}
+              Example={docs.Example}
+              background={docs.examplebackground}
+              showCodeByDefault={docs.category === 'Logic'}
+            />
+          </PlayroomStateProvider>
         ) : null}
 
         {docs.description ? (
@@ -72,21 +67,19 @@ export const DocDetails = () => {
             ) : null}
             {example.description ?? null}
             {example.code || example.Example ? (
-              <BraidProvider styleBody={false} theme={theme}>
-                <PlayroomStateProvider>
-                  <DocExample
-                    id={String(index)}
-                    code={example.code}
-                    Example={example.Example}
-                    Container={example.Container}
-                    background={example.background}
-                    showCodeByDefault={
-                      example.showCodeByDefault || example.Example === undefined
-                    }
-                    playroom={example.playroom}
-                  />
-                </PlayroomStateProvider>
-              </BraidProvider>
+              <PlayroomStateProvider>
+                <DocExample
+                  id={String(index)}
+                  code={example.code}
+                  Example={example.Example}
+                  Container={example.Container}
+                  background={example.background}
+                  showCodeByDefault={
+                    example.showCodeByDefault || example.Example === undefined
+                  }
+                  playroom={example.playroom}
+                />
+              </PlayroomStateProvider>
             ) : null}
           </Stack>
         ))}
diff --git a/site/src/App/DocNavigation/DocExample.tsx b/site/src/App/DocNavigation/DocExample.tsx
index 11b2e8d8b91..d69b99c53fa 100644
--- a/site/src/App/DocNavigation/DocExample.tsx
+++ b/site/src/App/DocNavigation/DocExample.tsx
@@ -1,10 +1,9 @@
 import React, { type ReactNode } from 'react';
-import { BraidProvider, Stack } from 'braid-src/lib/components';
+import { Stack } from 'braid-src/lib/components';
 import { useSourceFromExample } from '../useSourceFromExample/useSourceFromExample';
 import type { ComponentExample } from '../../types';
 import Code from '../Code/Code';
 import { ThemedExample } from '../ThemeSetting';
-import docsTheme from 'braid-src/entries/themes/docs';
 
 const DefaultContainer = ({ children }: { children: ReactNode }) => (
   <>{children}</>
@@ -34,22 +33,20 @@ export const DocExample = ({
   });
 
   return (
-    <BraidProvider styleBody={false} theme={docsTheme}>
-      <Stack space={background === false ? 'medium' : 'xxsmall'}>
-        {value ? (
-          <ThemedExample
-            background={background || undefined}
-            transparent={background === false}
-          >
-            <Container>{value}</Container>
-          </ThemedExample>
-        ) : null}
-        {code !== false && codeAsString ? (
-          <Code collapsedByDefault={!showCodeByDefault} playroom={playroom}>
-            {codeAsString}
-          </Code>
-        ) : null}
-      </Stack>
-    </BraidProvider>
+    <Stack space={background === false ? 'medium' : 'xxsmall'}>
+      {value ? (
+        <ThemedExample
+          background={background || undefined}
+          transparent={background === false}
+        >
+          <Container>{value}</Container>
+        </ThemedExample>
+      ) : null}
+      {code !== false && codeAsString ? (
+        <Code collapsedByDefault={!showCodeByDefault} playroom={playroom}>
+          {codeAsString}
+        </Code>
+      ) : null}
+    </Stack>
   );
 };
diff --git a/site/src/App/ThemeSetting/ThemedExample.tsx b/site/src/App/ThemeSetting/ThemedExample.tsx
index c0e3daebcd0..7380c6c3853 100644
--- a/site/src/App/ThemeSetting/ThemedExample.tsx
+++ b/site/src/App/ThemeSetting/ThemedExample.tsx
@@ -23,7 +23,11 @@ export function ThemedExample({
     <Box opacity={!ready ? 0 : undefined} transition="fast">
       <BraidProvider styleBody={false} theme={theme}>
         <Box
-          background={darkCanvas ? 'customDark' : undefined}
+          background={
+            darkCanvas
+              ? 'customDark'
+              : { lightMode: 'customLight', darkMode: 'customDark' }
+          }
           borderRadius="large"
         >
           <Box