Background color scheme

app/routes/home.tsx

@@ -14,7 +14,7 @@ type Row = Record<string, number>;
 
 type PlotType = "scatter" | "surface";
 
-type ThemeScheme = "light" | "dark" | "transparent";
+type ThemeScheme = "light" | "dark" | "transparentBlack" | "transparentWhite";
 
 const THEME_SCHEMES: Record<
   ThemeScheme,
@@ -31,16 +31,23 @@ const THEME_SCHEMES: Record<
     plotBg: "#0b0d12",
     fontColor: "#cfd3ff",
     gridColor: "rgba(148, 163, 184, 0.25)",
-    mainClass: "bg-[#0b0d12]",
+    mainClass: "bg-neutral-950",
   },
   light: {
     paperBg: "#f8fafc",
     plotBg: "#f8fafc",
     fontColor: "#1e293b",
-    gridColor: "rgba(148, 163, 184, 0.5)",
+    gridColor: "rgba(0, 0, 0, 0.25)",
     mainClass: "bg-slate-100",
   },
-  transparent: {
+  transparentBlack: {
+    paperBg: "rgba(0,0,0,0)",
+    plotBg: "rgba(0,0,0,0)",
+    fontColor: "#475569",
+    gridColor: "rgba(0, 0, 0, 0.25)",
+    mainClass: "bg-transparent",
+  },
+  transparentWhite: {
     paperBg: "rgba(0,0,0,0)",
     plotBg: "rgba(0,0,0,0)",
     fontColor: "#475569",
@@ -374,7 +381,8 @@ export default function Home() {
           >
             <option value="dark">Dark</option>
             <option value="light">Light</option>
-            <option value="transparent">Transparent</option>
+            <option value="transparentBlack">Transparent Black Grid</option>
+            <option value="transparentWhite">Transparent White Grid</option>
           </select>
         </Control>