diff --git a/skrub/_reporting/_data/templates/base.css b/skrub/_reporting/_data/templates/base.css
index d0d913721..3eef96fad 100644
--- a/skrub/_reporting/_data/templates/base.css
+++ b/skrub/_reporting/_data/templates/base.css
@@ -28,24 +28,110 @@
     --radius: var(--space-s);
     --line-height: 1.5;
 
+    --blue: #3584e4;
+    --darkblue: #0f4e9b;
     --lightgreen: #eafaea;
     --mediumgreen: #d6f5d6;
     --darkgreen: 	#c1f0c1;
     --verydarkgreen: #84e184;
     --shadowgreen: #9fce9f;
-
     --lightyellow: #ffffaa;
-
     --darkg: #555555;
     --mediumg: #d0d0d0;
     --lightg: #f0f0f0;
-
     --darkred: #a32929;
     --red: #dd0000;
 
+    --color-background: white;
+    --color-text: black;
+    --color-shadow: 0deg 0% 63%;
+    --color-muted-text: var(--darkg);
+    --color-keyboard-text: #444444;
+    --color-keyboard-border: #cccccc;
+    --color-keyboard-shadow: #bbbbbb;
+    --color-ok: green;
+    --color-warning: #ff6600;
+    --color-critical: var(--red);
+    --color-critical-muted: var(--darkred);
+    --color-important-note-background: var(--lightgreen);
+    --color-strong-border: #aaa;
+    --color-table-border: #cbcbcb;
+    --color-table-head-bg: #e0e0e0;
+    --color-table-head-text: black;
+    --color-table-stripe-1: #f2f2f2;
+    --color-button: #e0e0e0;
+    --color-button-hover: #eee;
+    --color-button-active: #ccc;
+    --color-toggletip-button-bg: var(--blue);
+    --color-toggletip-button-border: var(--darkblue);
+    --color-toggletip-button-text: white;
+    --color-card-header: var(--lightg);
+
+    --color-active-column-1: var(--lightgreen);
+    --color-active-column-2: var(--mediumgreen);
+    --color-active-column-3: var(--darkgreen);
+    --color-active-cell: var(--lightyellow);
+
+
+    --color-sample-tab-card-header: var(--verydarkgreen);
+    --color-sample-tab-card-button: var(--darkgreen);
+    --color-sample-tab-card-button-hover: var(--verydarkgreen);
+    --color-sample-tab-card-button-active: var(--shadowgreen);
+    --color-sample-tab-card-border: var(--shadowgreen);
+    --color-selected-tab: var(--color-background);
+
     --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, "DejaVu Sans Mono", Liberation Mono, monospace;
 }
 
+@media (prefers-color-scheme: dark)
+{
+:host {
+    --color-background: #222233;
+    --color-text: #fcfcfc;
+    --color-muted-text: #f0f0f6;
+    --color-keyboard-text: var(--color-muted-text);
+    --color-keyboard-border: var(--color-muted-text);
+    --color-keyboard-shadow: var(--color-muted-text);
+    --color-shadow: transparent;
+    --color-ok: var(--mediumgreen);
+    --color-warning: #ff6600;
+    --color-critical: var(--red);
+    --color-important-note-background: var(--color-active-column-2);
+    --color-strong-border: var(--color-text);
+    --color-table-border: #a0a0a6;
+    --color-table-head-bg: #444455;
+    --color-table-head-text: var(--color-text);
+    --color-table-stripe-1: #333344;
+    --color-button: #444455;
+    --color-button-hover: #333344;
+    --color-button-active: #555566;
+    --color-toggletip-button-bg: var(--blue);
+    --color-toggletip-button-border: var(--darkblue);
+    --color-toggletip-button-text: white;
+    --color-card-header: var(--color-table-head-bg);
+
+    --color-active-column-3: #634675;
+    --color-active-column-2: #7d5f9f;
+    --color-active-column-1: #9979bd;
+    --color-active-cell: #004e55;
+
+    --color-sample-tab-card-header: #634675;
+    --color-sample-tab-card-button: #7d5f9f;
+    --color-sample-tab-card-button-hover: #7d5f9f;
+    --color-sample-tab-card-button-active: #7d5f9f;
+    --color-sample-tab-card-border: #9979bd;
+    --color-selected-tab: var(--color-background);
+}
+
+
+}
+
+svg {
+    /* filter: invert(); */
+    fill: var(--color-text);
+}
+
+
 :host {
     font-size: var(--text-m);
     line-height: var(--line-height);
@@ -56,29 +142,42 @@
     box-sizing: border-box;
 }
 
-/* The report is in a shadow DOM so outside selectors don't reach it but properties */
-/* can still be inherited from a parent element. We make sure it has black text on */
-/* a white background otherwise eg a dark mode in the page could make parts of it */
-/* unreadable. */
-
 #report {
-    background: white;
-    color: black;
-    color-scheme: only light;
+    background: var(--color-background);
+    color: var(--color-text);
+    color-scheme: light dark;
     border-radius: var(--radius, 0);
     max-width: max-content;
 }
 
 
-
 h1 {
     font-size: var(--text-xl);
 }
 
+button {
+    background: var(--color-button);
+    border: 1px solid var(--color-text);
+    border-radius: var(--radius);
+    padding: var(--space-s) var(--space-m);
+}
+
+button:hover {
+    background: var(--color-button-hover);
+}
+
+button:active {
+    background: var(--color-button-active);
+}
+
 button > * {
     pointer-events: none;
 }
 
+select {
+    background: var(--color-button);
+}
+
 input[type="checkbox"] {
     height: var(--checkbox-size);
     width: var(--checkbox-size);
@@ -220,7 +319,7 @@ dd {
 }
 
 .shrinkable-text {
-    flex-basis: 20rem;
+    flex-basis: 20em;
     flex-grow: 1;
 }
 
@@ -274,25 +373,24 @@ dd {
 }
 
 .ok {
-    color: green;
+    color: var(--color-ok);
 }
 
 .warning {
-    color: #ff6600;
+    color: var(--color-warning);
 }
 
 .critical {
-    color: var(--red);
+    color: var(--color-critical);
 }
 
 .box-shadow {
-    --shadow-color: 0deg 0% 63%;
 
     box-shadow:
-    0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.36),
-    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.36),
-    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.36),
-    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.36);
+    0.3px 0.5px 0.7px hsl(var(--color-shadow) / 0.36),
+    0.8px 1.6px 2px -0.8px hsl(var(--color-shadow) / 0.36),
+    2.1px 4.1px 5.2px -1.7px hsl(var(--color-shadow) / 0.36),
+    5px 10px 12.6px -2.5px hsl(var(--color-shadow) / 0.36);
 }
 
 /* Misc tweaks */
@@ -319,7 +417,7 @@ dd {
 }
 
 .important-note {
-    background-color: var(--lightgreen);
+    background-color: var(--color-important-note-background);
     padding: var(--space-m);
     border-radius: var(--radius);
 }
diff --git a/skrub/_reporting/_data/templates/column-summaries.css b/skrub/_reporting/_data/templates/column-summaries.css
index 6314734fe..5a25e3711 100644
--- a/skrub/_reporting/_data/templates/column-summaries.css
+++ b/skrub/_reporting/_data/templates/column-summaries.css
@@ -58,7 +58,7 @@
 
     padding: var(--space-m);
     margin-block-end: var(--space-m);
-    background-color: var(--header-color, var(--lightg));
+    background-color: var(--color-card-header);
     border-block-end: var(--border-s) solid var(--mediumg);
 }
 
@@ -124,13 +124,13 @@
 
 .columns-in-sample-tab .card-header {
     position: relative;
-    background-color: var(--darkgreen);
-    border-block-end: var(--border-s) solid var(--shadowgreen);
+    background-color: var(--color-sample-tab-card-header);
+    border-block-end: var(--border-s) solid var(--color-sample-tab-card-border);
     padding-right: calc(var(--button-s) + var(--space-m));
 }
 
 .columns-in-sample-tab .card {
-    border-color: var(--shadowgreen);
+    border-color: var(--color-sample-tab-card-border);
 }
 
 /* Button for closing the card / deselecting the column in the table */
@@ -142,7 +142,7 @@
     padding: var(--space-s);
     border: none;
     border-radius: var(--radius);
-    background: var(--darkgreen);
+    background: var(--color-sample-tab-card-button);
 
     position: absolute;
     top: var(--space-m);
@@ -150,5 +150,9 @@
 }
 
 .card .close-card-button:hover {
-    background: var(--verydarkgreen);
+    background: var(--color-sample-tab-card-button-hover);
+}
+
+.card .close-card-button:active {
+    background: var(--color-sample-tab-card-button-active);
 }
diff --git a/skrub/_reporting/_data/templates/copybutton.css b/skrub/_reporting/_data/templates/copybutton.css
index a06107617..da03f3dae 100644
--- a/skrub/_reporting/_data/templates/copybutton.css
+++ b/skrub/_reporting/_data/templates/copybutton.css
@@ -46,15 +46,15 @@
 }
 
 .copybutton {
-    background: #e0e0e0;
+    background: var(--color-button);
 }
 
 .copybutton:hover {
-    background: #eee;
+    background: var(--color-button-hover);
 }
 
 .copybutton:active {
-    background: #cccccc;
+    background: var(--color-button-active);
 }
 
 .copybutton:not([data-show-checkmark]) > :not(:first-child) {
@@ -67,8 +67,8 @@
 
 .copied-message {
     font-size: var(--text-s);
-    background-color: black;
-    color: white;
+    background-color: var(--color-text);
+    color: var(--color-background);
     padding: var(--space-s);
     border-radius: var(--radius);
     position: absolute;
@@ -83,7 +83,7 @@
 }
 
 [data-shows-placeholder] {
-    color: #777777;
+    color: var(--color-muted-text);
 }
 
 .table-bar .box {
diff --git a/skrub/_reporting/_data/templates/dataframe-sample.css b/skrub/_reporting/_data/templates/dataframe-sample.css
index e4f200425..96f1084ff 100644
--- a/skrub/_reporting/_data/templates/dataframe-sample.css
+++ b/skrub/_reporting/_data/templates/dataframe-sample.css
@@ -27,19 +27,19 @@
 }
 
 tbody tr {
-    --active-column-color: var(--lightgreen);
+    --active-column-color: var(--color-active-column-1);
 }
 
 tbody tr:nth-child(2n -1) {
-    --active-column-color: var(--mediumgreen);
+    --active-column-color: var(--color-active-column-2);
 }
 
 thead {
-    --active-column-color: var(--darkgreen);
+    --active-column-color: var(--color-active-column-3);
 }
 
 .table-with-selectable-cells th[data-role="padding"]{
-    background-color: white;
+    background-color: var(--color-background);
     border: none;
 }
 
@@ -68,33 +68,29 @@ thead {
 
 .table-with-selectable-cells th[data-role="index-level-name"],
 .table-with-selectable-cells th[data-role="index-level-value"]{
-    background-color: white;
-    border: 1px solid var(--mediumg);
+    background-color: var(--color-background);
+    border: 1px solid var(--color-table-border);
     text-align: right;
 }
 
 .table-with-selectable-cells th[data-role="dataframe-data"]{}
 
 .table-cell[data-is-active] {
-    --active-column-color: var(--lightyellow);
+    --active-column-color: var(--color-active-cell);
 }
 
 table:not(:focus-within):not(:has(:active)) .table-cell[data-is-active] {
-    outline: var(--border-m) dotted black;
+    outline: var(--border-m) dotted;
 }
 
 .table-cell[data-is-active]:focus {
     outline-width: var(--border-m);
     outline-style: solid;
-    outline-color: Highlight;
-    outline-color: -webkit-focus-ring-color;
 }
 
 #report .table-cell[data-is-active][data-just-copied]:focus {
     outline-width: var(--border-m);
     outline-style: dashed;
-    outline-color: Highlight;
-    outline-color: -webkit-focus-ring-color;
 }
 
 
@@ -166,10 +162,10 @@ table:not(:focus-within):not(:has(:active)) .table-cell[data-is-active] {
     font-family: var(--fontStack-monospace);
     padding: 0 var(--space-m);
     line-height: 1.8;
-    color: #444444;
-    border: var(--border-s) solid #cccccc;
-    border-bottom: var(--border-s) solid #bbbbbb;
-    box-shadow: inset 0 calc(-1 * var(--border-s)) 0 #bbbbbb;
+    color: var(--color-keyboard-text);
+    border: var(--border-s) solid var(--color-keyboard-border);
+    border-bottom: var(--border-s) solid var(--color-keyboard-shadow);
+    box-shadow: inset 0 calc(-1 * var(--border-s)) 0 var(--color-keyboard-shadow);
     border-radius: 0.2em;
     min-width: 1em;
     text-align: center;
diff --git a/skrub/_reporting/_data/templates/pure-3.0.0/tables-min.css b/skrub/_reporting/_data/templates/pure-3.0.0/tables-min.css
deleted file mode 100644
index cc516cba4..000000000
--- a/skrub/_reporting/_data/templates/pure-3.0.0/tables-min.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/*!
-Pure v3.0.0
-Copyright 2013 Yahoo!
-Licensed under the BSD License.
-https://github.com/pure-css/pure/blob/master/LICENSE
-*/
-.pure-table{border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #cbcbcb}.pure-table caption{color:#000;font:italic 85%/1 arial,sans-serif;padding:1em 0;text-align:center}.pure-table td,.pure-table th{border-left:1px solid #cbcbcb;border-width:0 0 0 1px;font-size:inherit;margin:0;overflow:visible;padding:.5em 1em}.pure-table thead{background-color:#e0e0e0;color:#000;text-align:left;vertical-align:bottom}.pure-table td{background-color:transparent}.pure-table-odd td{background-color:#f2f2f2}.pure-table-striped tr:nth-child(2n-1) td{background-color:#f2f2f2}.pure-table-bordered td{border-bottom:1px solid #cbcbcb}.pure-table-bordered tbody>tr:last-child>td{border-bottom-width:0}.pure-table-horizontal td,.pure-table-horizontal th{border-width:0 0 1px 0;border-bottom:1px solid #cbcbcb}.pure-table-horizontal tbody>tr:last-child>td{border-bottom-width:0}
diff --git a/skrub/_reporting/_data/templates/report.css b/skrub/_reporting/_data/templates/report.css
index 01ddc0e84..d2aed3bb4 100644
--- a/skrub/_reporting/_data/templates/report.css
+++ b/skrub/_reporting/_data/templates/report.css
@@ -1,7 +1,7 @@
 {% include "pure-3.0.0/base-min.css" %}
-{% include "pure-3.0.0/tables-min.css" %}
 
 {% include "base.css" %}
+{% include "tables.css" %}
 {% include "copybutton.css" %}
 {% include "column-summaries.css" %}
 {% include "dataframe-sample.css" %}
diff --git a/skrub/_reporting/_data/templates/standalone-report.css b/skrub/_reporting/_data/templates/standalone-report.css
index f4b3c3254..66d4b8c51 100644
--- a/skrub/_reporting/_data/templates/standalone-report.css
+++ b/skrub/_reporting/_data/templates/standalone-report.css
@@ -1,7 +1,16 @@
 :root {
     --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    --color-background: white;
 }
 
+@media (prefers-color-scheme: dark){
+    :root {
+        --color-background: #222233;
+    }
+}
+
+
 body {
     font-family: var(--fontStack-sansSerif);
+    background: var(--color-background);
 }
diff --git a/skrub/_reporting/_data/templates/summary-statistics.css b/skrub/_reporting/_data/templates/summary-statistics.css
index d74d6dffc..5fc468f81 100644
--- a/skrub/_reporting/_data/templates/summary-statistics.css
+++ b/skrub/_reporting/_data/templates/summary-statistics.css
@@ -50,11 +50,11 @@
    others. */
 
 #report .summary-stats-table tr > td:nth-child(2) {
-    background: white;
+    background: var(--color-background);
 }
 
 #report .summary-stats-table tr > th:nth-child(2) {
-    background: #e0e0e0;
+    background: var(--color-table-head-bg);
 }
 
 #report th.sort-button-group-wrapper {
@@ -84,9 +84,9 @@
     height: 100%;
     flex-grow: 1;
     border-radius: 0;
-    border: var(--border-s) solid #aaa;
-    background: #e0e0e0;
-    color: #222;
+    border: var(--border-s) solid var(--color-strong-border);
+    background: var(--color-button);
+    color: var(--color-muted-text);
     padding: var(--space-s);
 }
 
@@ -99,14 +99,14 @@
 }
 
 .sort-button:hover {
-    background: #eeeeee;
+    background: var(--color-button-hover);
 }
 
 .sort-button:active {
-    background: #cccccc;
+    background: var(--color-button-active);
 }
 
 .sort-button[data-is-active]{
-    background: var(--lightgreen);
-    color: black;
+    background: var(--color-active-column-2);
+    color: var(--color-text);
 }
diff --git a/skrub/_reporting/_data/templates/tables.css b/skrub/_reporting/_data/templates/tables.css
new file mode 100644
index 000000000..8cc73e401
--- /dev/null
+++ b/skrub/_reporting/_data/templates/tables.css
@@ -0,0 +1,48 @@
+.pure-table {
+    border-collapse: collapse;
+    border-spacing: 0;
+    empty-cells: show;
+    border: 1px solid var(--color-table-border);
+}
+
+
+.pure-table td,
+.pure-table th {
+    border-left: 1px solid var(--color-table-border);
+    border-width: 0 0 0 1px;
+    font-size: inherit;
+    margin: 0;
+    overflow: visible;
+    padding: 0.5em 1em;
+}
+
+.pure-table thead {
+    background-color: var(--color-table-head-bg);
+    color: var(--color-table-head-text);
+    text-align: left;
+    vertical-align: bottom;
+}
+
+.pure-table td {
+    background-color: transparent;
+}
+
+.pure-table-striped tr:nth-child(2n-1) td {
+    background-color: var(--color-table-stripe-1);
+}
+
+.pure-table-bordered td {
+    border-bottom: 1px solid var(--color-table-border);
+}
+.pure-table-bordered tbody > tr:last-child > td {
+    border-bottom-width: 0;
+}
+
+.pure-table-horizontal td,
+.pure-table-horizontal th {
+    border-width: 0 0 1px 0;
+    border-bottom: 1px solid var(--color-table-border);
+}
+.pure-table-horizontal tbody > tr:last-child > td {
+    border-bottom-width: 0;
+}
diff --git a/skrub/_reporting/_data/templates/tabs.css b/skrub/_reporting/_data/templates/tabs.css
index 9edf6d317..bbbe468b8 100644
--- a/skrub/_reporting/_data/templates/tabs.css
+++ b/skrub/_reporting/_data/templates/tabs.css
@@ -32,7 +32,7 @@
     margin-top: var(--border-m);
 }
 
-.tab {
+button.tab {
     display: flex;
     align-items: center;
     column-gap: var(--space-s);
@@ -44,9 +44,8 @@
     padding-bottom: calc(var(--space-s) + var(--border-s));
     font-size: var(--space-l);
     background-color: transparent;
-    --color-muted: var(--darkg);
     --color-default: inherit;
-    color: var(--color-muted);
+    color: var(--color-muted-text);
 }
 
 .tab:hover {
@@ -55,7 +54,7 @@
 
 .tab[data-is-selected] {
     border-color: var(--darkg);
-    background-color: white;
+    background-color: var(--color-selected-tab);
     color: var(--color-default);
 }
 
@@ -75,8 +74,8 @@
 }
 
 .tab-list .tab[data-has-warning] {
-    --color-muted: var(--darkred);
-    --color-default: var(--red);
+    --color-muted-text: var(--color-critical-muted);
+    --color-default: var(--color-critical);
 
 }
 
diff --git a/skrub/_reporting/_data/templates/toggletip.css b/skrub/_reporting/_data/templates/toggletip.css
index 0b2b21ab5..ed305c220 100644
--- a/skrub/_reporting/_data/templates/toggletip.css
+++ b/skrub/_reporting/_data/templates/toggletip.css
@@ -4,20 +4,18 @@
 
 .toggletip {
     display: inline-block;
-    --blue: #3584e4;
-    --darkblue: #0f4e9b;
     --buttonheight: var(--text-xl);
 }
 
 .toggletip > button {
     height: var(--buttonheight);
     width: var(--buttonheight);
-    background-color: var(--blue);
-    text-shadow: 0px 0px 1px var(--darkblue);
+    background-color: var(--color-toggletip-button-bg);
+    text-shadow: 0px 0px 1px var(--color-toggletip-button-border);
     font-family: var(--fontStack-monospace);
     font-weight: bold;
-    color: white;
-    border: var(--border-s) solid var(--darkblue);
+    color: var(--color-toggletip-button-text);
+    border: var(--border-s) solid var(--color-toggletip-button-border);
     border-radius: 50%;
     margin: 0;
     padding: none;
@@ -31,8 +29,8 @@
     width: calc(min(50ch, 100% - var(--buttonheight)));
     min-width: min-content;
     padding: var(--space-l);
-    background: white;
-    border: var(--border-m) solid var(--blue);
+    background: var(--color-background);
+    border: var(--border-m) solid var(--color-toggletip-button-bg);
     border-radius: var(--radius);
     z-index: 2;
     visibility: hidden;
@@ -46,6 +44,6 @@
 }
 
 .toggletip > button:is(:focus, :active) {
-    outline: var(--border-m) solid var(--blue);
+    outline: var(--border-m) solid var(--color-toggletip-button-bg);
     outline-offset: var(--border-m);
 }
diff --git a/skrub/_reporting/_plotting.py b/skrub/_reporting/_plotting.py
index f8f36143d..a9f35c6b1 100644
--- a/skrub/_reporting/_plotting.py
+++ b/skrub/_reporting/_plotting.py
@@ -69,6 +69,7 @@ def plot_with_config(*args, **kwargs):
 def _despine(ax):
     ax.spines["top"].set_visible(False)
     ax.spines["right"].set_visible(False)
+    ax.set_facecolor("none")
 
 
 def _to_em(pt_match):
@@ -85,6 +86,7 @@ def _serialize(fig):
     fig.savefig(buffer, format="svg", bbox_inches="tight")
     out = buffer.getvalue().decode("UTF-8")
     out = re.sub(r'(width|height)="([0-9.]+)pt"', _to_em, out)
+    out = re.sub(r"#000000", "var(--color-text)", out)
     plt.close(fig)
     return out