Handle dark mode for tooltips in docs (#60)

* Handle dark mode * Make legend examples match
SummerForeverCo · Nov 13, 2024 · b301f9a · b301f9a
1 parent 4e66097
commit b301f9a
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 deletions.
diff --git 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
@@ -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({