From e8748159437673b9839e987d7986931db907c1f2 Mon Sep 17 00:00:00 2001
From: Benoit Bovy <benbovy@gmail.com>
Date: Mon, 26 May 2025 14:10:28 +0200
Subject: [PATCH 1/4] html repr: improve style for dropdown sections

---
 xarray/static/css/style.css | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/xarray/static/css/style.css b/xarray/static/css/style.css
index 05312c52707..614ec4c2e89 100644
--- a/xarray/static/css/style.css
+++ b/xarray/static/css/style.css
@@ -220,6 +220,7 @@ body.vscode-dark {
 .xr-var-item label,
 .xr-var-item > .xr-var-name span {
   background-color: var(--xr-background-color-row-even);
+  border-color: var(--xr-background-color-row-odd);
   margin-bottom: 0;
 }
 
@@ -231,6 +232,7 @@ body.vscode-dark {
 .xr-var-list > li:nth-child(odd) > label,
 .xr-var-list > li:nth-child(odd) > .xr-var-name span {
   background-color: var(--xr-background-color-row-odd);
+  border-color: var(--xr-background-color-row-even);
 }
 
 .xr-var-name {
@@ -280,8 +282,9 @@ body.vscode-dark {
 .xr-var-data,
 .xr-index-data {
   display: none;
-  background-color: var(--xr-background-color) !important;
-  padding-bottom: 5px !important;
+  border-top: 2px dotted var(--xr-background-color);
+  padding-bottom: 20px !important;
+  padding-top: 10px !important;
 }
 
 .xr-var-attrs-in:checked ~ .xr-var-attrs,
@@ -294,6 +297,12 @@ body.vscode-dark {
   float: right;
 }
 
+.xr-var-data > pre,
+.xr-index-data > pre,
+.xr-var-data > table > tbody > tr {
+  background-color: transparent !important;
+}
+
 .xr-var-name span,
 .xr-var-data,
 .xr-index-name div,

From 82418c19ef5fe59e4cda7ff94b17857f7b706829 Mon Sep 17 00:00:00 2001
From: Benoit Bovy <benbovy@gmail.com>
Date: Wed, 28 May 2025 10:14:32 +0200
Subject: [PATCH 2/4] add visual effect for "active" icons

---
 xarray/static/css/style.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/xarray/static/css/style.css b/xarray/static/css/style.css
index 614ec4c2e89..136b756e6d9 100644
--- a/xarray/static/css/style.css
+++ b/xarray/static/css/style.css
@@ -362,3 +362,11 @@ dl.xr-attrs {
   stroke: currentColor;
   fill: currentColor;
 }
+
+.xr-var-attrs-in:checked + label > .xr-icon-file-text2,
+.xr-var-data-in:checked + label > .xr-icon-database,
+.xr-index-data-in:checked + label > .xr-icon-database {
+  color: var(--xr-font-color0);
+  filter: drop-shadow(1px 1px 5px var(--xr-font-color2));
+  stroke-width: 0.8px;
+}

From 57d4538b689b6cdd87fb33931d7dac41a2e2b305 Mon Sep 17 00:00:00 2001
From: Benoit Bovy <benbovy@gmail.com>
Date: Wed, 28 May 2025 10:15:25 +0200
Subject: [PATCH 3/4] fix accessibility borders (avoid resize height)

---
 xarray/static/css/style.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/xarray/static/css/style.css b/xarray/static/css/style.css
index 136b756e6d9..941c3892394 100644
--- a/xarray/static/css/style.css
+++ b/xarray/static/css/style.css
@@ -80,6 +80,7 @@ body.vscode-dark {
 
 .xr-section-item input + label {
   color: var(--xr-disabled-color);
+  border: 2px solid transparent !important;
 }
 
 .xr-section-item input:enabled + label {
@@ -88,7 +89,7 @@ body.vscode-dark {
 }
 
 .xr-section-item input:focus + label {
-  border: 2px solid var(--xr-font-color0);
+  border: 2px solid var(--xr-font-color0) !important;
 }
 
 .xr-section-item input:enabled + label:hover {
@@ -222,6 +223,7 @@ body.vscode-dark {
   background-color: var(--xr-background-color-row-even);
   border-color: var(--xr-background-color-row-odd);
   margin-bottom: 0;
+  padding-top: 2px;
 }
 
 .xr-var-item > .xr-var-name:hover span {
@@ -287,6 +289,12 @@ body.vscode-dark {
   padding-top: 10px !important;
 }
 
+.xr-var-attrs-in + label,
+.xr-var-data-in + label,
+.xr-index-data-in + label {
+  padding: 0 1px;
+}
+
 .xr-var-attrs-in:checked ~ .xr-var-attrs,
 .xr-var-data-in:checked ~ .xr-var-data,
 .xr-index-data-in:checked ~ .xr-index-data {

From cb741d9a843e1e83dcc3e4c12969f906e9f2990a Mon Sep 17 00:00:00 2001
From: Benoit Bovy <benbovy@gmail.com>
Date: Wed, 28 May 2025 10:37:06 +0200
Subject: [PATCH 4/4] update whats new

---
 doc/whats-new.rst | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/doc/whats-new.rst b/doc/whats-new.rst
index a581b22f5b3..06fb5df738c 100644
--- a/doc/whats-new.rst
+++ b/doc/whats-new.rst
@@ -51,6 +51,10 @@ Bug fixes
   calculating mean in rolling for correct operations (preserve float dtypes,
   correct mean of bool arrays) (:issue:`10340`, :pull:`10341`).
   By `Kai Mühlbauer <https://github.com/kmuehlbauer>`_.
+- Improve the html ``repr`` of Xarray objects (dark mode, icons and variable attribute / data
+  dropdown sections).
+  (:pull:`10353`, :pull:`10354`)
+  By `Benoit Bovy <https://github.com/benbovy>`_.
 
 Documentation
 ~~~~~~~~~~~~~