CSS: workaround ipywidgets dark mode issues (#15)

* css: workaround ipywidgets dark mode issues

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* more tweaks and fixes

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* typo

* bring some margin again

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: benbovy

docs/_static/style.css

@@ -1,9 +1,36 @@
 .xr-wrap {
+  /* workaround when (ipy)widgets are present in output cells
+   * https://github.com/xarray-contrib/xarray-indexes/issues/14
+   * only rely on pydata-sphinx-theme variables here!
+  */
+  --xr-font-color0: var(--pst-color-text-base);
+  --xr-font-color2: var(--pst-color-text-base);
+  --xr-font-color3: var(--pst-color-text-base);
+  --xr-border-color: hsl(from var(--pst-color-text-base) h s calc(l + 40));
+  --xr-disabled-color: hsl(from var(--pst-color-text-base) h s calc(l + 40));
+  --xr-background-color: var(--pst-color-on-background);
+  --xr-background-color-row-even: hsl(
+    from var(--pst-color-on-background) h s calc(l - 5)
+  );
+  --xr-background-color-row-odd: hsl(
+    from var(--pst-color-on-background) h s calc(l - 15)
+  );
+
   font-size: 0.85em;
   margin-left: 1.25em;
-  padding-left: 1.25em;
-  border-left: thin var(--color-foreground-muted) solid;
 }
+
+html[data-theme="dark"] .xr-wrap {
+  --xr-border-color: hsl(from var(--pst-color-text-base) h s calc(l - 40));
+  --xr-disabled-color: hsl(from var(--pst-color-text-base) h s calc(l - 40));
+  --xr-background-color-row-even: hsl(
+    from var(--pst-color-on-background) h s calc(l + 5)
+  );
+  --xr-background-color-row-odd: hsl(
+    from var(--pst-color-on-background) h s calc(l + 15)
+  );
+}
+
 .xr-array-wrap,
 .xr-var-data,
 .xr-var-preview {