From b301f9a2ca2f79598c1ebc597c43011fdec04217 Mon Sep 17 00:00:00 2001
From: Michael Freeman <mike.freeman@summer.io>
Date: Wed, 13 Nov 2024 15:13:59 -0500
Subject: [PATCH] Handle dark mode for tooltips in docs (#60)

* Handle dark mode

* Make legend examples match
---
 docs/.vitepress/theme/custom.css | 28 ++++++++++++++++++++++++++++
 docs/legends.md                  |  9 +++++++--
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 3a9f04a..6f63033 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -2,3 +2,31 @@
   color: var(--vp-c-text-1);
   text-decoration: underline;
 }
+
+/* Handling dark mode for tooltips, legends, strokes */
+
+/* Define custom properties for dark mode */
+:root.dark {
+  --background: 0, 0%, 10%; /* near-black */
+  --border: 0, 0%, 80%; /* light gray */
+  --text-color: 0, 0%, 90%; /* light color */
+}
+.dark g[aria-label="tip"] {
+  --plot-background: hsla(var(--background)) !important;
+  --plot-border: hsla(var(--border)) !important;
+  stroke: hsla(var(--border)) !important;
+}
+
+.dark g[aria-label="frame"] rect,
+.dark rect[aria-label="frame"],
+.dark g[aria-label="y-grid"],
+.dark g[aria-label="y-grid"] > * {
+  stroke: hsla(var(--border)) !important;
+}
+.dark .dp-popover {
+  background-color: hsla(var(--background)) !important;
+}
+.dark .dp-categories-container,
+.dark .dp-category {
+  border-color: hsla(var(--border)) !important;
+}
diff --git a/docs/legends.md b/docs/legends.md
index 1da40e3..8544318 100644
--- a/docs/legends.md
+++ b/docs/legends.md
@@ -12,7 +12,12 @@ click on a legend item, all other items will be hidden.
 
 ```js
 // Click on the legend to toggle visibility
-duckPlot.table("stocks").x("Date").y("High").color("Symbol").mark("line");
+duckPlot
+  .table("stocks")
+  .x("Date")
+  .y(["High", "Low"])
+  .color("Symbol")
+  .mark("line");
 ```
 
 :::
@@ -27,7 +32,7 @@ interactiveLegend: false})`.
 duckPlot
   .table("stocks")
   .x("Date")
-  .y("High")
+  .y(["High", "Low"])
   .color("Symbol")
   .mark("line")
   .config({