diff --git a/src/nbsphinx.py b/src/nbsphinx.py
index 39ef8366..8285db53 100644
--- a/src/nbsphinx.py
+++ b/src/nbsphinx.py
@@ -656,26 +656,18 @@
 }
 
 /* Some additional styling taken form the Jupyter notebook CSS */
-.jp-RenderedHTMLCommon table,
-div.rendered_html table {
+:is(.jp-RenderedHTMLCommon, div.rendered_html) table {
   border: none;
   border-collapse: collapse;
   border-spacing: 0;
-  color: black;
   font-size: 12px;
   table-layout: fixed;
 }
-.jp-RenderedHTMLCommon thead,
-div.rendered_html thead {
+:is(.jp-RenderedHTMLCommon, div.rendered_html) thead {
   border-bottom: 1px solid black;
   vertical-align: bottom;
 }
-.jp-RenderedHTMLCommon tr,
-.jp-RenderedHTMLCommon th,
-.jp-RenderedHTMLCommon td,
-div.rendered_html tr,
-div.rendered_html th,
-div.rendered_html td {
+:is(.jp-RenderedHTMLCommon, div.rendered_html) :is(tr, th, td) {
   text-align: right;
   vertical-align: middle;
   padding: 0.5em 0.5em;
@@ -684,16 +676,29 @@
   max-width: none;
   border: none;
 }
-.jp-RenderedHTMLCommon th,
-div.rendered_html th {
+:is(.jp-RenderedHTMLCommon, div.rendered_html) th {
   font-weight: bold;
 }
-.jp-RenderedHTMLCommon tbody tr:nth-child(odd),
-div.rendered_html tbody tr:nth-child(odd) {
-  background: #f5f5f5;
+@media (prefers-color-scheme: light) {
+  body:not([data-theme="dark"]) {
+    --nbsphinx-table-row-odd-bg: #f5f5f5;
+  }
 }
-.jp-RenderedHTMLCommon tbody tr:hover,
-div.rendered_html tbody tr:hover {
+@media (prefers-color-scheme: dark) {
+  body:not([data-theme="light"]) {
+    --nbsphinx-table-row-odd-bg: rgba(255, 255, 255, .1);
+  }
+}
+body[data-theme="light"]) {
+  --nbsphinx-table-row-odd-bg: #f5f5f5;
+}
+body[data-theme="dark"] {
+  --nbsphinx-table-row-odd-bg: rgba(255, 255, 255, .1);
+}
+:is(.jp-RenderedHTMLCommon, div.rendered_html) tbody tr:nth-child(odd) {
+  background: var(--nbsphinx-table-row-odd-bg);
+}
+:is(.jp-RenderedHTMLCommon, div.rendered_html) tbody tr:hover {
   background: rgba(66, 165, 245, 0.2);
 }
 """