diff --git a/doc/whats-new.rst b/doc/whats-new.rst
index 2b1e1c354eb..6f467f22dca 100644
--- a/doc/whats-new.rst
+++ b/doc/whats-new.rst
@@ -107,6 +107,8 @@ Deprecations
 Bug Fixes
 ~~~~~~~~~
 
+- Fix dark mode detection in VS Code by adding VS Code CSS variable support to the HTML representation CSS. (:pull:`11284`).
+  By `Maksymilian Wasilewski <https://github.com/maksmondeo>`_.
 - Allow writing ``StringDType`` variables to netCDF files (:issue:`11199`).
   By `Kristian Kollsgård <https://github.com/kkollsga>`_.
 - Fix ``Source`` link in api docs (:pull:`11187`)
diff --git a/xarray/static/css/style.css b/xarray/static/css/style.css
index 61476e2f770..b9fe53b5071 100644
--- a/xarray/static/css/style.css
+++ b/xarray/static/css/style.css
@@ -2,36 +2,54 @@
 
 :root {
   --xr-font-color0: var(
-    --jp-content-font-color0,
-    var(--pst-color-text-base rgba(0, 0, 0, 1))
+    --vscode-editor-foreground,
+    var(--jp-content-font-color0, var(--pst-color-text-base, rgba(0, 0, 0, 1)))
   );
   --xr-font-color2: var(
-    --jp-content-font-color2,
-    var(--pst-color-text-base, rgba(0, 0, 0, 0.54))
+    --vscode-descriptionForeground,
+    var(
+      --jp-content-font-color2,
+      var(--pst-color-text-base, rgba(0, 0, 0, 0.54))
+    )
   );
   --xr-font-color3: var(
-    --jp-content-font-color3,
-    var(--pst-color-text-base, rgba(0, 0, 0, 0.38))
+    --vscode-disabledForeground,
+    var(
+      --jp-content-font-color3,
+      var(--pst-color-text-base, rgba(0, 0, 0, 0.38))
+    )
   );
   --xr-border-color: var(
-    --jp-border-color2,
-    hsl(from var(--pst-color-on-background, white) h s calc(l - 10))
+    --vscode-panel-border,
+    var(
+      --jp-border-color2,
+      hsl(from var(--pst-color-on-background, white) h s calc(l - 10))
+    )
   );
   --xr-disabled-color: var(
-    --jp-layout-color3,
-    hsl(from var(--pst-color-on-background, white) h s calc(l - 40))
+    --vscode-disabledForeground,
+    var(
+      --jp-layout-color3,
+      hsl(from var(--pst-color-on-background, white) h s calc(l - 40))
+    )
   );
   --xr-background-color: var(
-    --jp-layout-color0,
-    var(--pst-color-on-background, white)
+    --vscode-editor-background,
+    var(--jp-layout-color0, var(--pst-color-on-background, white))
   );
   --xr-background-color-row-even: var(
-    --jp-layout-color1,
-    hsl(from var(--pst-color-on-background, white) h s calc(l - 5))
+    --vscode-list-hoverBackground,
+    var(
+      --jp-layout-color1,
+      hsl(from var(--pst-color-on-background, white) h s calc(l - 5))
+    )
   );
   --xr-background-color-row-odd: var(
-    --jp-layout-color2,
-    hsl(from var(--pst-color-on-background, white) h s calc(l - 15))
+    --vscode-list-inactiveSelectionBackground,
+    var(
+      --jp-layout-color2,
+      hsl(from var(--pst-color-on-background, white) h s calc(l - 15))
+    )
   );
 }
 
@@ -40,36 +58,57 @@ html[data-theme="dark"],
 body[data-theme="dark"],
 body.vscode-dark {
   --xr-font-color0: var(
-    --jp-content-font-color0,
-    var(--pst-color-text-base, rgba(255, 255, 255, 1))
+    --vscode-editor-foreground,
+    var(
+      --jp-content-font-color0,
+      var(--pst-color-text-base, rgba(255, 255, 255, 1))
+    )
   );
   --xr-font-color2: var(
-    --jp-content-font-color2,
-    var(--pst-color-text-base, rgba(255, 255, 255, 0.54))
+    --vscode-descriptionForeground,
+    var(
+      --jp-content-font-color2,
+      var(--pst-color-text-base, rgba(255, 255, 255, 0.54))
+    )
   );
   --xr-font-color3: var(
-    --jp-content-font-color3,
-    var(--pst-color-text-base, rgba(255, 255, 255, 0.38))
+    --vscode-disabledForeground,
+    var(
+      --jp-content-font-color3,
+      var(--pst-color-text-base, rgba(255, 255, 255, 0.38))
+    )
   );
   --xr-border-color: var(
-    --jp-border-color2,
-    hsl(from var(--pst-color-on-background, #111111) h s calc(l + 10))
+    --vscode-panel-border,
+    var(
+      --jp-border-color2,
+      hsl(from var(--pst-color-on-background, #111111) h s calc(l + 10))
+    )
   );
   --xr-disabled-color: var(
-    --jp-layout-color3,
-    hsl(from var(--pst-color-on-background, #111111) h s calc(l + 40))
+    --vscode-disabledForeground,
+    var(
+      --jp-layout-color3,
+      hsl(from var(--pst-color-on-background, #111111) h s calc(l + 40))
+    )
   );
   --xr-background-color: var(
-    --jp-layout-color0,
-    var(--pst-color-on-background, #111111)
+    --vscode-editor-background,
+    var(--jp-layout-color0, var(--pst-color-on-background, #111111))
   );
   --xr-background-color-row-even: var(
-    --jp-layout-color1,
-    hsl(from var(--pst-color-on-background, #111111) h s calc(l + 5))
+    --vscode-list-hoverBackground,
+    var(
+      --jp-layout-color1,
+      hsl(from var(--pst-color-on-background, #111111) h s calc(l + 5))
+    )
   );
   --xr-background-color-row-odd: var(
-    --jp-layout-color2,
-    hsl(from var(--pst-color-on-background, #111111) h s calc(l + 15))
+    --vscode-list-inactiveSelectionBackground,
+    var(
+      --jp-layout-color2,
+      hsl(from var(--pst-color-on-background, #111111) h s calc(l + 15))
+    )
   );
 }