diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md
index 33214cbc4..5025fd82d 100644
--- a/RELEASE_NOTES.md
+++ b/RELEASE_NOTES.md
@@ -2,6 +2,9 @@
 
 ## [Unreleased]
 
+### Added
+* Introduce `--surface-background` and `--surface-border` CSS custom properties in `fsdocs-default.css`. These decouple component surface colours (copy-code button, blockquotes, sidebar, page menu, dialogs, tooltips, API tables) from `--header-background`/`--header-border`. Both variables default to the header values, so existing themes are unaffected; themes that need a different colour for content surfaces can now override `--surface-background` and `--surface-border` independently. [#1156](https://github.com/fsprojects/FSharp.Formatting/issues/1156)
+
 ## [22.0.0] - 2026-04-03
 
 ### Fixed
diff --git a/docs/content/fsdocs-default.css b/docs/content/fsdocs-default.css
index 5e2c1261e..8bcbd12e7 100644
--- a/docs/content/fsdocs-default.css
+++ b/docs/content/fsdocs-default.css
@@ -63,7 +63,10 @@
     --header-background: light-dark(#f9fbfc, #0c1318);
     --header-border: light-dark(#e8ecf1, #3a3a42);
     --header-link-color: var(--text-color);
-    --mobile-menu-background: var(--header-background);
+    /* Surface variables — override these independently from the header */
+    --surface-background: var(--header-background);
+    --surface-border: var(--header-border);
+    --mobile-menu-background: var(--surface-background);
     --menu-color: var(--text-color);
     --menu-item-hover-background: light-dark(#eff0f1, #2c2624);
     --menu-item-hover-color: var(--menu-color);
@@ -77,16 +80,16 @@
     --scrollbar-thumb-background: #686868;
     --shadow-color: hsla(0, 0%, 0%, .1);
     --main-shadow-color: hsla(0, 0%, 0%, .025);
-    --aside-background: var(--header-background);
-    --blockquote-bacground-color: var(--header-background);
+    --aside-background: var(--surface-background);
+    --blockquote-bacground-color: var(--surface-background);
     --blockquote-color: var(--text-color);
     --on-this-page-color: var(--menu-color);
-    --page-menu-background-color: var(--header-background);
-    --page-menu-background-border-color: var(--header-border);
+    --page-menu-background-color: var(--surface-background);
+    --page-menu-background-border-color: var(--surface-border);
     --page-menu-background-hover-border-color: var(--text-color);
-    --nav-item-border-color: var(--header-border);
+    --nav-item-border-color: var(--surface-border);
     --nav-item-active-border-color: var(--text-color);
-    --dialog-background-color: var(--header-background);
+    --dialog-background-color: var(--surface-background);
     --dialog-empty-color: var(--nav-category);
     --dialog-icon-color: var(--text-color);
     --dialog-link-color: var(--link-color);
@@ -347,7 +350,7 @@ main {
         margin: 0;
 
         & li {
-            border-left: 1px solid var(--header-border);
+            border-left: 1px solid var(--surface-border);
             margin: 0;
 
             &:hover, &:focus {
@@ -468,7 +471,7 @@ main {
         padding: var(--spacing-300) var(--spacing-500);
         background-color: var(--aside-background);
         width: var(--main-menu-width);
-        border-right: 1px solid var(--header-border);
+        border-right: 1px solid var(--surface-border);
         grid-row: var(--main-menu-grid-row);
         grid-column: var(--main-menu-grid-column);
         overflow-y: auto;
@@ -731,8 +734,8 @@ pre.has-copy-button {
     top: var(--spacing-100);
     right: var(--spacing-100);
     padding: var(--spacing-50) var(--spacing-100);
-    background-color: var(--header-background);
-    border: 1px solid var(--header-border);
+    background-color: var(--surface-background);
+    border: 1px solid var(--surface-border);
     border-radius: var(--radius);
     color: var(--text-color);
     cursor: pointer;
@@ -989,7 +992,7 @@ table.pre, code, pre.fssnip {
 div.fsdocs-tip {
     background-color: var(--doc-tip-background);
     border-radius: var(--radius);
-    border: 1px solid var(--header-border);
+    border: 1px solid var(--surface-border);
     padding: var(--spacing-200);
     font-family: var(--monospace-font);
     font-variant-ligatures: none;
@@ -1070,7 +1073,7 @@ div.fsdocs-tip:popover-open {
     }
 
     & tbody td {
-        border-top: 1px solid var(--header-border);
+        border-top: 1px solid var(--surface-border);
         padding: var(--spacing-300) 0;
     }
 
@@ -1280,7 +1283,7 @@ dialog {
 
         & li {
             margin: 0;
-            border-bottom: 1px solid var(--header-border);
+            border-bottom: 1px solid var(--surface-border);
 
             &:hover {
                 & a, & a iconify-icon {