Apply dark mode

Author: forman

chartlets.js/CHANGES.md

@@ -1,3 +1,7 @@
+## Version 0.0.30 (in development)
+
+* The `Plot` component now respects the current MUI theme mode `"dark"`. (#XX)
+
 ## Version 0.0.29 (from 2024/11/26)
 
 * Resolved warnings that appeared when using Vega charts.

chartlets.js/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "chartlets",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "description": "An experimental library for integrating interactive charts into existing JavaScript applications.",
   "type": "module",
   "files": [

chartlets.js/package.json

@@ -1,9 +1,10 @@
 import { VegaLite } from "react-vega";
+import type { TopLevelSpec } from "vega-lite";
+import { useTheme } from "@mui/material";
 
 import { type ComponentState } from "@/lib/types/state/component";
 import type { ComponentProps } from "@/lib/component/Component";
 import { useSignalListeners } from "@/lib/hooks";
-import type { TopLevelSpec } from "vega-lite";
 
 interface PlotState extends ComponentState {
   chart?:
@@ -14,6 +15,7 @@ interface PlotState extends ComponentState {
 interface PlotProps extends ComponentProps, PlotState {}
 
 export function Plot({ type, id, style, chart, onChange }: PlotProps) {
+  const muiTheme = useTheme();
   const signalListeners = useSignalListeners(chart, type, id, onChange);
 
   if (!chart) {
@@ -22,6 +24,7 @@ export function Plot({ type, id, style, chart, onChange }: PlotProps) {
 
   return (
     <VegaLite
+      theme={muiTheme.palette.mode === "dark" ? "dark" : undefined}
       spec={chart}
       style={style}
       signalListeners={signalListeners}