fix plot image in dark mode

flatironinstitute · Feb 13, 2024 · ec78b73 · ec78b73
1 parent 7f9ebbb
commit ec78b73
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/flatfront/src/components/DownloadPlotButton.tsx b/flatfront/src/components/DownloadPlotButton.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { toPng } from "html-to-image";
 import { Button } from "./ui/button";
+import { useIsDarkMode } from "./DarkModeToggle";
 
 export function DownloadPlotButton({
   plotRef: ref,
@@ -9,14 +10,15 @@ export function DownloadPlotButton({
   plotRef: React.RefObject<HTMLDivElement>;
   imageName: string;
 }) {
+  const is_dark_mode = useIsDarkMode();
   const on_click = React.useCallback(() => {
     if (ref.current === null) {
       return;
     }
     toPng(ref.current, {
       pixelRatio: 2,
       cacheBust: true,
-      backgroundColor: `white`
+      backgroundColor: is_dark_mode ? `black` : `white`
     })
       .then((dataUrl) => {
         const link = document.createElement("a");