From 56ef7b1298610c1ac70e7e91e1dcac70b01562fd Mon Sep 17 00:00:00 2001
From: Myles Scolnick <myles@marimo.io>
Date: Thu, 5 Sep 2024 16:04:08 +0200
Subject: [PATCH 1/2] Auto apply theme to mo.ui.data_explorer based on the
 notebook display theme

Fixes #2228

Update `ConnectedDataExplorerComponent` to apply dark theme based on the current display theme.

* **Import `useTheme` hook:**
  - Import `useTheme` from `frontend/src/theme/useTheme.ts`.

* **Apply dark theme:**
  - Use the `useTheme` hook to get the current theme.
  - Apply the dark theme to the `VegaLite` component if the current theme is dark.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/marimo-team/marimo/issues/2228?shareId=XXXX-XXXX-XXXX-XXXX).
---
 .../impl/data-explorer/ConnectedDataExplorerComponent.tsx     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx b/frontend/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx
index 875e6f17301..13b67e42162 100644
--- a/frontend/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx
+++ b/frontend/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx
@@ -23,6 +23,7 @@ import { ColumnSummary } from "./components/column-summary";
 import type { VegaLiteProps } from "react-vega/lib/VegaLite";
 import { useOnMount } from "@/hooks/useLifecycle";
 import type { ChartSpec } from "./state/types";
+import { useTheme } from "@/theme/useTheme"; // P7a34
 
 /**
  * @param label - a label of the table
@@ -104,6 +105,7 @@ export const DataExplorerComponent = ({
 
   const { mark } = useAtomValue(chartSpecAtom);
   const charts = useAtomValue(relatedChartSpecsAtom);
+  const { theme } = useTheme();
 
   if (error) {
     return <ErrorBanner error={error} />;
@@ -133,6 +135,7 @@ export const DataExplorerComponent = ({
           padding={PADDING}
           actions={ACTIONS}
           spec={makeResponsive(mainPlot.spec)}
+          theme={theme === "dark" ? "dark" : undefined}
         />
       </div>
     );
@@ -207,6 +210,7 @@ export const DataExplorerComponent = ({
                 key={idx}
                 actions={false}
                 spec={plot.spec}
+                theme={theme === "dark" ? "dark" : undefined}
               />
             </HorizontalCarouselItem>
           ))}

From c24e906e2804a4c5a25152339cdb5f3eb76aba32 Mon Sep 17 00:00:00 2001
From: Myles Scolnick <myles@marimo.io>
Date: Thu, 5 Sep 2024 10:04:36 -0400
Subject: [PATCH 2/2] Update ConnectedDataExplorerComponent.tsx

---
 .../impl/data-explorer/ConnectedDataExplorerComponent.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx b/frontend/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx
index 13b67e42162..1bb00c4a35a 100644
--- a/frontend/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx
+++ b/frontend/src/plugins/impl/data-explorer/ConnectedDataExplorerComponent.tsx
@@ -23,7 +23,7 @@ import { ColumnSummary } from "./components/column-summary";
 import type { VegaLiteProps } from "react-vega/lib/VegaLite";
 import { useOnMount } from "@/hooks/useLifecycle";
 import type { ChartSpec } from "./state/types";
-import { useTheme } from "@/theme/useTheme"; // P7a34
+import { useTheme } from "@/theme/useTheme";
 
 /**
  * @param label - a label of the table