diff --git a/examples/04-theming/08-color-combinations/.bnexample.json b/examples/04-theming/08-color-combinations/.bnexample.json
new file mode 100644
index 0000000000..0bd35957f7
--- /dev/null
+++ b/examples/04-theming/08-color-combinations/.bnexample.json
@@ -0,0 +1,8 @@
+{
+  "playground": true,
+  "docs": false,
+  "author": "",
+  "tags": ["Appearance & Styling"],
+  "dependencies": {},
+  "pro": false
+}
diff --git a/examples/04-theming/08-color-combinations/README.md b/examples/04-theming/08-color-combinations/README.md
new file mode 100644
index 0000000000..44381f8dc4
--- /dev/null
+++ b/examples/04-theming/08-color-combinations/README.md
@@ -0,0 +1,9 @@
+# Color combinations
+
+Inspect every combination of the default text and background colors, including the default color, applied to whole blocks and inline content. Switch between light and dark themes to compare their appearance.
+
+**Try me out!** Use the theme toggle above the editors.
+
+## Relevant docs
+
+- [Themes](https://www.blocknotejs.org/docs/react/styling-theming/themes)
diff --git a/examples/04-theming/08-color-combinations/index.html b/examples/04-theming/08-color-combinations/index.html
new file mode 100644
index 0000000000..c1dbc2ed42
--- /dev/null
+++ b/examples/04-theming/08-color-combinations/index.html
@@ -0,0 +1,17 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"
+    />
+    <title>Color combinations</title>
+    <script>
+      <!-- AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY -->
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/04-theming/08-color-combinations/main.tsx b/examples/04-theming/08-color-combinations/main.tsx
new file mode 100644
index 0000000000..1260513388
--- /dev/null
+++ b/examples/04-theming/08-color-combinations/main.tsx
@@ -0,0 +1,11 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import React from "react";
+import { createRoot } from "react-dom/client";
+import App from "./src/App.jsx";
+
+const root = createRoot(document.getElementById("root")!);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
diff --git a/examples/04-theming/08-color-combinations/package.json b/examples/04-theming/08-color-combinations/package.json
new file mode 100644
index 0000000000..1324705a58
--- /dev/null
+++ b/examples/04-theming/08-color-combinations/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@blocknote/example-theming-color-combinations",
+  "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "type": "module",
+  "private": true,
+  "version": "0.12.4",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build:prod": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@blocknote/ariakit": "latest",
+    "@blocknote/core": "latest",
+    "@blocknote/mantine": "latest",
+    "@blocknote/react": "latest",
+    "@blocknote/shadcn": "latest",
+    "@mantine/core": "^9.0.2",
+    "@mantine/hooks": "^9.0.2",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "vite": "^8.0.0"
+  }
+}
diff --git a/examples/04-theming/08-color-combinations/src/App.tsx b/examples/04-theming/08-color-combinations/src/App.tsx
new file mode 100644
index 0000000000..0d3de8fa41
--- /dev/null
+++ b/examples/04-theming/08-color-combinations/src/App.tsx
@@ -0,0 +1,77 @@
+import { COLORS_DEFAULT, type PartialBlock } from "@blocknote/core";
+import "@blocknote/core/fonts/inter.css";
+import { BlockNoteView } from "@blocknote/mantine";
+import "@blocknote/mantine/style.css";
+import { useCreateBlockNote } from "@blocknote/react";
+import { useState } from "react";
+
+const colors = ["default", ...Object.keys(COLORS_DEFAULT)];
+const blockColors: PartialBlock[] = colors.flatMap((backgroundColor) => [
+  {
+    id: `block-heading-${backgroundColor}`,
+    type: "heading",
+    props: { level: 3 },
+    content: `${backgroundColor} background`,
+  },
+  ...colors.map((textColor) => ({
+    id: `block-${backgroundColor}-${textColor}`,
+    type: "paragraph" as const,
+    props: { textColor, backgroundColor },
+    content: `${textColor} text on ${backgroundColor} background`,
+  })),
+]);
+const inlineColors: PartialBlock[] = colors.flatMap((backgroundColor) => [
+  {
+    id: `inline-heading-${backgroundColor}`,
+    type: "heading",
+    props: { level: 3 },
+    content: `${backgroundColor} background`,
+  },
+  ...colors.map((textColor) => ({
+    id: `inline-${backgroundColor}-${textColor}`,
+    type: "paragraph" as const,
+    content: [
+      { type: "text" as const, text: "Inline: ", styles: {} },
+      {
+        type: "text" as const,
+        text: `${textColor} text on ${backgroundColor} background`,
+        styles: { textColor, backgroundColor },
+      },
+    ],
+  })),
+]);
+
+export default function App() {
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+  const blocks = useCreateBlockNote({ initialContent: blockColors });
+  const inline = useCreateBlockNote({ initialContent: inlineColors });
+
+  return (
+    <div>
+      <button
+        type="button"
+        aria-pressed={theme === "dark"}
+        onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      >
+        Dark mode
+      </button>
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns:
+            "repeat(auto-fit, minmax(min(100%, 360px), 1fr))",
+          gap: 24,
+        }}
+      >
+        <section aria-label="Block color combinations">
+          <h2>Block colors</h2>
+          <BlockNoteView editor={blocks} theme={theme} />
+        </section>
+        <section aria-label="Inline color combinations">
+          <h2>Inline colors</h2>
+          <BlockNoteView editor={inline} theme={theme} />
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/examples/04-theming/08-color-combinations/tsconfig.json b/examples/04-theming/08-color-combinations/tsconfig.json
new file mode 100644
index 0000000000..2aa62c56e6
--- /dev/null
+++ b/examples/04-theming/08-color-combinations/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "composite": true,
+    "paths": {
+      "@shared/*": ["../../../shared/*"]
+    }
+  },
+  "include": ["."],
+  "__ADD_FOR_LOCAL_DEV_references": [
+    {
+      "path": "../../../packages/core/"
+    },
+    {
+      "path": "../../../packages/react/"
+    }
+  ]
+}
diff --git a/examples/04-theming/08-color-combinations/vite-env.d.ts b/examples/04-theming/08-color-combinations/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/examples/04-theming/08-color-combinations/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/04-theming/08-color-combinations/vite.config.ts b/examples/04-theming/08-color-combinations/vite.config.ts
new file mode 100644
index 0000000000..a96f1f04ff
--- /dev/null
+++ b/examples/04-theming/08-color-combinations/vite.config.ts
@@ -0,0 +1,35 @@
+// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY
+import react from "@vitejs/plugin-react";
+import * as fs from "fs";
+import * as path from "path";
+import { defineConfig } from "vite";
+// https://vitejs.dev/config/
+export default defineConfig(((conf: { command: string }) => ({
+  plugins: [react()],
+  optimizeDeps: {},
+  build: {
+    sourcemap: true,
+  },
+  resolve: {
+    alias:
+      conf.command === "build" ||
+      !fs.existsSync(path.resolve(__dirname, "../../packages/core/src"))
+        ? {}
+        : ({
+            // The repo-wide alias for the shared test-utils directory (private,
+            // so it only resolves inside the monorepo). Harmless for examples
+            // that don't use it.
+            "@shared": path.resolve(__dirname, "../../../shared/"),
+            // Comment out the lines below to load a built version of blocknote
+            // or, keep as is to load live from sources with live reload working
+            "@blocknote/core": path.resolve(
+              __dirname,
+              "../../packages/core/src/",
+            ),
+            "@blocknote/react": path.resolve(
+              __dirname,
+              "../../packages/react/src/",
+            ),
+          } as any),
+  },
+})) as Parameters<typeof defineConfig>[0]);
diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css
index 63b03a8fcb..3fe4c9480b 100644
--- a/packages/core/src/editor/Block.css
+++ b/packages/core/src/editor/Block.css
@@ -43,13 +43,26 @@ BASIC STYLES
   position: absolute;
   inset: 0;
   border-radius: 4px;
-  background-color: rgba(100, 160, 255, 0.08);
-  box-shadow: inset 0 0 0 4px rgba(100, 160, 255, 0.3);
+  background-color: color-mix(
+    in srgb,
+    var(--bn-colors-highlights-blue-text, rgb(100, 160, 255)) 8%,
+    transparent
+  );
+  box-shadow: inset 0 0 0 4px
+    color-mix(
+      in srgb,
+      var(--bn-colors-highlights-blue-text, rgb(100, 160, 255)) 30%,
+      transparent
+    );
   pointer-events: none;
 }
 
 .bn-inline-content .ProseMirror-selectednode::after {
-  background-color: rgba(100, 160, 255, 0.3);
+  background-color: color-mix(
+    in srgb,
+    var(--bn-colors-highlights-blue-text, rgb(100, 160, 255)) 30%,
+    transparent
+  );
   box-shadow: none;
 }
 
@@ -267,16 +280,20 @@ NESTED BLOCKS
 
 /* QUOTES */
 [data-content-type="quote"] blockquote {
-  border-left: 2px solid rgb(125, 121, 122);
-  color: rgb(125, 121, 122);
+  border-left: 2px solid var(--bn-colors-side-menu, rgb(125, 121, 122));
+  color: var(--bn-colors-highlights-gray-text, #646362);
   margin: 0;
   padding-left: 1em;
 }
 
+[data-content-type="quote"] blockquote:where(.dark, .dark *) {
+  color: var(--bn-colors-highlights-gray-text, #bebdb8);
+}
+
 /* DIVIDERS */
 [data-content-type="divider"] hr {
   border: none;
-  border-top: 1px solid rgb(125, 121, 122);
+  border-top: 1px solid var(--bn-colors-side-menu, rgb(125, 121, 122));
   margin: 0.5em 0;
   flex: 1;
 }
@@ -374,7 +391,7 @@ NESTED BLOCKS
 
 /* Toggle */
 .bn-toggle-button {
-  color: var(--bn-colors-editor-text);
+  color: var(--bn-colors-editor-text, #3f3f3f);
   padding: 3px;
 }
 
@@ -434,13 +451,17 @@ NESTED BLOCKS
 
 .bn-toggle-add-block-button {
   font-size: 16px;
-  color: var(--bn-colors-side-menu);
+  color: var(--bn-colors-highlights-gray-text, #646362);
   font-weight: normal;
   margin-left: 22px;
   padding-inline: 2px;
   width: fit-content;
 }
 
+.bn-toggle-add-block-button:where(.dark, .dark *) {
+  color: var(--bn-colors-highlights-gray-text, #bebdb8);
+}
+
 .bn-toggle-button,
 .bn-toggle-add-block-button {
   background: none;
@@ -453,7 +474,7 @@ NESTED BLOCKS
 
 .bn-toggle-button:hover,
 .bn-toggle-add-block-button:hover {
-  background-color: var(--bn-colors-hovered-background);
+  background-color: var(--bn-colors-hovered-background, #efefef);
 }
 
 /* Keep the marker on the group so it inherits through attribution wrappers
@@ -634,11 +655,11 @@ NESTED BLOCKS
 }
 
 .bn-preview-with-source-popup[data-open="true"] .bn-source-block-popup {
-  background-color: var(--bn-colors-menu-background);
+  background-color: var(--bn-colors-menu-background, #ffffff);
   border: var(--bn-border);
   border-radius: var(--bn-border-radius-medium);
   box-shadow: var(--bn-shadow-medium);
-  color: var(--bn-colors-menu-text);
+  color: var(--bn-colors-menu-text, #3f3f3f);
   height: unset;
   z-index: 1;
 }
@@ -699,7 +720,7 @@ NESTED BLOCKS
 
 .bn-code-block-source-error {
   border-top: var(--bn-border);
-  color: var(--bn-colors-highlights-red-text);
+  color: var(--bn-colors-highlights-red-text, #e03e3e);
   font-size: 0.8em;
   padding: 8px 16px;
   white-space: pre-wrap !important;
@@ -715,10 +736,10 @@ NESTED BLOCKS
 .bn-code-block-source-popup-ok-button {
   align-items: center;
   appearance: none;
-  background-color: rgb(37, 99, 235);
+  background-color: var(--bn-colors-selected-background, rgb(37, 99, 235));
   border: none;
   border-radius: var(--bn-border-radius-small);
-  color: white;
+  color: var(--bn-colors-selected-text, white);
   cursor: pointer;
   display: flex;
   font-size: 0.8em;
@@ -733,7 +754,8 @@ NESTED BLOCKS
 }
 
 .bn-code-block-source-popup-ok-button:hover {
-  background-color: rgb(29, 78, 216);
+  background-color: var(--bn-colors-hovered-background, rgb(29, 78, 216));
+  color: var(--bn-colors-hovered-text, white);
 }
 
 .bn-preview-with-source-popup:has(.bn-preview-placeholder) {
@@ -742,9 +764,12 @@ NESTED BLOCKS
 
 .bn-preview-placeholder {
   align-items: center;
-  background-color: rgb(242, 241, 238);
+  background-color: var(
+    --bn-colors-highlights-gray-background,
+    rgb(242, 241, 238)
+  );
   border-radius: 4px;
-  color: rgb(95, 91, 92);
+  color: var(--bn-colors-highlights-gray-text, rgb(95, 91, 92));
   display: flex;
 }
 
@@ -759,13 +784,16 @@ NESTED BLOCKS
 }
 
 .bn-preview-placeholder:where(.dark, .dark *) {
-  background-color: rgb(70, 70, 70);
-  color: rgb(190, 190, 190);
+  background-color: var(
+    --bn-colors-highlights-gray-background,
+    rgb(70, 70, 70)
+  );
+  color: var(--bn-colors-editor-text, #cfcfcf);
 }
 
 .bn-editor[contenteditable="true"]
   .bn-preview-placeholder:not(.bn-preview-placeholder-error):hover {
-  background-color: rgb(225, 225, 225);
+  background-color: var(--bn-colors-hovered-background, rgb(225, 225, 225));
 }
 
 .bn-editor[contenteditable="true"]
@@ -773,12 +801,12 @@ NESTED BLOCKS
     .dark,
     .dark *
   ) {
-  background-color: rgb(90, 90, 90);
+  background-color: var(--bn-colors-hovered-background, rgb(90, 90, 90));
 }
 
 .bn-preview-placeholder-error {
-  background-color: var(--bn-colors-highlights-red-background);
-  color: var(--bn-colors-highlights-red-text);
+  background-color: var(--bn-colors-highlights-red-background, #fbe4e4);
+  color: var(--bn-colors-highlights-red-text, #e03e3e);
 }
 
 .bn-preview-placeholder-icon {
@@ -826,7 +854,7 @@ NESTED BLOCKS
 .bn-block-content[data-content-type="pageBreak"] > div {
   width: 100%;
   height: 0;
-  border-top: dotted rgb(125, 121, 122) 2px;
+  border-top: dotted var(--bn-colors-side-menu, rgb(125, 121, 122)) 2px;
   margin-block: 11px;
 }
 
@@ -857,23 +885,29 @@ NESTED BLOCKS
 
 [data-file-block] .bn-add-file-button {
   align-items: center;
-  background-color: rgb(242, 241, 238);
+  background-color: var(
+    --bn-colors-highlights-gray-background,
+    rgb(242, 241, 238)
+  );
   border-radius: 4px;
-  color: rgb(125, 121, 122);
+  color: var(--bn-colors-highlights-gray-text, #646362);
   display: flex;
   gap: 10px;
   padding: 12px;
 }
 
 [data-file-block] .bn-add-file-button:where(.dark, .dark *) {
-  background-color: rgb(70, 70, 70);
-  color: rgb(190, 190, 190);
+  background-color: var(
+    --bn-colors-highlights-gray-background,
+    rgb(70, 70, 70)
+  );
+  color: var(--bn-colors-editor-text, #cfcfcf);
 }
 
 .bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover,
 [data-file-block] .bn-file-name-with-icon:hover,
 .ProseMirror-selectednode .bn-file-name-with-icon {
-  background-color: rgb(225, 225, 225);
+  background-color: var(--bn-colors-hovered-background, rgb(225, 225, 225));
 }
 
 .bn-editor[contenteditable="true"]
@@ -881,7 +915,7 @@ NESTED BLOCKS
   .bn-add-file-button:hover:where(.dark, .dark *),
 [data-file-block] .bn-file-name-with-icon:hover:where(.dark, .dark *),
 .ProseMirror-selectednode .bn-file-name-with-icon:where(.dark, .dark *) {
-  background-color: rgb(90, 90, 90);
+  background-color: var(--bn-colors-hovered-background, rgb(90, 90, 90));
 }
 
 [data-file-block] .bn-add-file-button-icon,
@@ -958,93 +992,93 @@ NESTED BLOCKS
    down to it. */
 [data-style-type="textColor"][data-value="gray"],
 [data-text-color="gray"] {
-  color: #9b9a97;
+  color: var(--bn-colors-highlights-gray-text, #9b9a97);
 }
 
 [data-style-type="textColor"][data-value="brown"],
 [data-text-color="brown"] {
-  color: #64473a;
+  color: var(--bn-colors-highlights-brown-text, #64473a);
 }
 
 [data-style-type="textColor"][data-value="red"],
 [data-text-color="red"] {
-  color: #e03e3e;
+  color: var(--bn-colors-highlights-red-text, #e03e3e);
 }
 
 [data-style-type="textColor"][data-value="orange"],
 [data-text-color="orange"] {
-  color: #d9730d;
+  color: var(--bn-colors-highlights-orange-text, #d9730d);
 }
 
 [data-style-type="textColor"][data-value="yellow"],
 [data-text-color="yellow"] {
-  color: #dfab01;
+  color: var(--bn-colors-highlights-yellow-text, #dfab01);
 }
 
 [data-style-type="textColor"][data-value="green"],
 [data-text-color="green"] {
-  color: #4d6461;
+  color: var(--bn-colors-highlights-green-text, #4d6461);
 }
 
 [data-style-type="textColor"][data-value="blue"],
 [data-text-color="blue"] {
-  color: #0b6e99;
+  color: var(--bn-colors-highlights-blue-text, #0b6e99);
 }
 
 [data-style-type="textColor"][data-value="purple"],
 [data-text-color="purple"] {
-  color: #6940a5;
+  color: var(--bn-colors-highlights-purple-text, #6940a5);
 }
 
 [data-style-type="textColor"][data-value="pink"],
 [data-text-color="pink"] {
-  color: #ad1a72;
+  color: var(--bn-colors-highlights-pink-text, #ad1a72);
 }
 
 /* BACKGROUND COLORS */
 [data-style-type="backgroundColor"][data-value="gray"],
 [data-background-color="gray"] {
-  background-color: #ebeced;
+  background-color: var(--bn-colors-highlights-gray-background, #ebeced);
 }
 
 [data-style-type="backgroundColor"][data-value="brown"],
 [data-background-color="brown"] {
-  background-color: #e9e5e3;
+  background-color: var(--bn-colors-highlights-brown-background, #e9e5e3);
 }
 
 [data-style-type="backgroundColor"][data-value="red"],
 [data-background-color="red"] {
-  background-color: #fbe4e4;
+  background-color: var(--bn-colors-highlights-red-background, #fbe4e4);
 }
 
 [data-style-type="backgroundColor"][data-value="orange"],
 [data-background-color="orange"] {
-  background-color: #f6e9d9;
+  background-color: var(--bn-colors-highlights-orange-background, #f6e9d9);
 }
 
 [data-style-type="backgroundColor"][data-value="yellow"],
 [data-background-color="yellow"] {
-  background-color: #fbf3db;
+  background-color: var(--bn-colors-highlights-yellow-background, #fbf3db);
 }
 
 [data-style-type="backgroundColor"][data-value="green"],
 [data-background-color="green"] {
-  background-color: #ddedea;
+  background-color: var(--bn-colors-highlights-green-background, #ddedea);
 }
 
 [data-style-type="backgroundColor"][data-value="blue"],
 [data-background-color="blue"] {
-  background-color: #ddebf1;
+  background-color: var(--bn-colors-highlights-blue-background, #ddebf1);
 }
 
 [data-style-type="backgroundColor"][data-value="purple"],
 [data-background-color="purple"] {
-  background-color: #eae4f2;
+  background-color: var(--bn-colors-highlights-purple-background, #eae4f2);
 }
 
 [data-style-type="backgroundColor"][data-value="pink"],
 [data-background-color="pink"] {
-  background-color: #f4dfeb;
+  background-color: var(--bn-colors-highlights-pink-background, #f4dfeb);
 }
 
 /* TEXT ALIGNMENT */
@@ -1092,14 +1126,14 @@ passes through the column list. */
 .bn-editor[contenteditable="true"]
   .bn-column-list-hovered
   > .bn-block-column:not(:last-child) {
-  box-shadow: 4px 0 0 #eee;
+  box-shadow: 4px 0 0 var(--bn-colors-border, #eee);
   transition: box-shadow 0.2s ease 0.2s;
 }
 
 .bn-editor[contenteditable="true"]
   .bn-column-list-hovered
   > .bn-block-column:not(:last-child):where(.dark, .dark *) {
-  box-shadow: 4px 0 0 rgb(70, 70, 70);
+  box-shadow: 4px 0 0 var(--bn-colors-border, rgb(70, 70, 70));
 }
 
 /* The border between two columns when the cursor is near their boundary or
@@ -1108,7 +1142,7 @@ managed by the multi-column package's column resize plugin. */
 .bn-editor[contenteditable="true"]
   .bn-column-list-hovered
   > .bn-block-column.bn-column-resize-border {
-  box-shadow: 4px 0 0 #ccc;
+  box-shadow: 4px 0 0 var(--bn-colors-side-menu, #ccc);
   cursor: col-resize;
   transition: box-shadow 0.2s ease;
 }
@@ -1116,7 +1150,7 @@ managed by the multi-column package's column resize plugin. */
 .bn-editor[contenteditable="true"]
   .bn-column-list-hovered
   > .bn-block-column.bn-column-resize-border:where(.dark, .dark *) {
-  box-shadow: 4px 0 0 rgb(110, 110, 110);
+  box-shadow: 4px 0 0 var(--bn-colors-side-menu, rgb(110, 110, 110));
 }
 
 .bn-editor[contenteditable="true"]
@@ -1139,11 +1173,19 @@ managed by the multi-column package's column resize plugin. */
 }
 
 .bn-thread-mark:not([data-orphan="true"]) {
-  background: rgba(255, 200, 0, 0.15);
+  background: color-mix(
+    in srgb,
+    var(--bn-colors-highlights-yellow-text, rgb(255, 200, 0)) 15%,
+    transparent
+  );
 }
 
 .bn-thread-mark .bn-thread-mark-selected {
-  background: rgba(255, 200, 0, 0.25);
+  background: color-mix(
+    in srgb,
+    var(--bn-colors-highlights-yellow-text, rgb(255, 200, 0)) 25%,
+    transparent
+  );
 }
 
 div[data-type="modification"] {
@@ -1152,7 +1194,11 @@ div[data-type="modification"] {
 
 .bn-root ins,
 .bn-root del {
-  background-color: color-mix(in srgb, var(--user-color-light) 50%, white);
+  background-color: color-mix(
+    in srgb,
+    var(--user-color-light) 50%,
+    var(--bn-colors-editor-background, white)
+  );
   color: var(--user-color-dark);
   position: relative;
   text-decoration: none;
@@ -1166,7 +1212,7 @@ div[data-type="modification"] {
   background-color: color-mix(
     in srgb,
     var(--user-color-light) 25%,
-    var(--bn-colors-editor-background)
+    var(--bn-colors-editor-background, #1f1f1f)
   );
   color: var(--user-color-light);
 }
@@ -1181,7 +1227,11 @@ serialized/static output, where the wrapper is a real, painted box.
 */
 .bn-suggestion-mark {
   --bn-suggestion-token-color: currentColor;
-  background-color: color-mix(in srgb, var(--user-color-light) 50%, white);
+  background-color: color-mix(
+    in srgb,
+    var(--user-color-light) 50%,
+    var(--bn-colors-editor-background, white)
+  );
   color: var(--user-color-dark);
   border-radius: 4px;
 }
@@ -1191,7 +1241,7 @@ serialized/static output, where the wrapper is a real, painted box.
   background-color: color-mix(
     in srgb,
     var(--user-color-light) 25%,
-    var(--bn-suggestion-surface, var(--bn-colors-editor-background))
+    var(--bn-suggestion-surface, var(--bn-colors-editor-background, #1f1f1f))
   );
   color: white;
 }
@@ -1208,7 +1258,11 @@ that wrap content with no `.bn-block-content` of their own (e.g. a deleted table
 row/cell). Block deletions that *do* wrap blocks are restyled per-block below.
 */
 .bn-suggestion-node > * {
-  background-color: color-mix(in srgb, var(--user-color-light) 50%, white);
+  background-color: color-mix(
+    in srgb,
+    var(--user-color-light) 50%,
+    var(--bn-colors-editor-background, white)
+  );
   border-radius: 4px;
 }
 
@@ -1216,7 +1270,7 @@ row/cell). Block deletions that *do* wrap blocks are restyled per-block below.
   background-color: color-mix(
     in srgb,
     var(--user-color-light) 25%,
-    var(--bn-colors-editor-background)
+    var(--bn-colors-editor-background, #1f1f1f)
   );
 }
 
@@ -1243,7 +1297,7 @@ that wrap blocks get a per-block badge below instead.
   vertical-align: middle;
   /* Use the editor's text color (themed for light/dark) rather than inheriting,
      which would pick up the deleted content's user color. */
-  color: var(--bn-colors-editor-text);
+  color: var(--bn-colors-editor-text, #3f3f3f);
 }
 
 /*
@@ -1329,7 +1383,11 @@ counts as one too: its source sits in a hidden popup, so its text marks don't sh
   /* The card bleeds this far into the gutters on both sides, so tinting a block
      never shifts its content sideways. */
   --bn-suggestion-card-inset: 6px;
-  background-color: color-mix(in srgb, var(--user-color-light) 50%, white);
+  background-color: color-mix(
+    in srgb,
+    var(--user-color-light) 50%,
+    var(--bn-colors-editor-background, white)
+  );
   border-radius: 6px;
   /* A hairline in the author's color, so a pale tint still reads as a card. */
   box-shadow: 0 0 0 1px
@@ -1351,7 +1409,7 @@ counts as one too: its source sits in a hidden popup, so its text marks don't sh
   background-color: color-mix(
     in srgb,
     var(--user-color-light) 25%,
-    var(--bn-colors-editor-background)
+    var(--bn-colors-editor-background, #1f1f1f)
   );
 }
 
@@ -1362,9 +1420,18 @@ counts as one too: its source sits in a hidden popup, so its text marks don't sh
 .bn-block-content:not(.bn-suggestion-node *)
   .bn-preview-with-source-popup:has(.bn-source-block-popup .bn-suggestion-mark)
   .bn-preview-container {
-  background-color: color-mix(in srgb, #c9efe9 50%, white);
+  background-color: color-mix(
+    in srgb,
+    var(--bn-colors-highlights-green-background, #c9efe9) 50%,
+    var(--bn-colors-editor-background, white)
+  );
   border-radius: 6px;
-  box-shadow: 0 0 0 1px color-mix(in srgb, #0f6e62 25%, transparent);
+  box-shadow: 0 0 0 1px
+    color-mix(
+      in srgb,
+      var(--bn-colors-highlights-green-text, #0f6e62) 25%,
+      transparent
+    );
 }
 
 .dark.bn-root
@@ -1373,8 +1440,8 @@ counts as one too: its source sits in a hidden popup, so its text marks don't sh
   .bn-preview-container {
   background-color: color-mix(
     in srgb,
-    #c9efe9 25%,
-    var(--bn-colors-editor-background)
+    var(--bn-colors-highlights-green-background, #c9efe9) 25%,
+    var(--bn-colors-editor-background, #1f1f1f)
   );
 }
 
@@ -1425,7 +1492,7 @@ card's own 3px, the label's 16px line box, and 2px of breathing room under it.
   text-transform: uppercase;
   /* Use the editor's text color (themed for light/dark) rather than inheriting,
      which would pick up the suggestion's user color. */
-  color: var(--bn-colors-editor-text);
+  color: var(--bn-colors-editor-text, #3f3f3f);
 }
 
 /*
@@ -1454,7 +1521,11 @@ left untouched so only the dotted underline carries the color. Both the inline
 /* On hover, reveal the author's color as a filled background. */
 [data-type="modification"] .bn-suggestion-mark:hover,
 [data-type="modification"] .bn-suggestion-node:hover > * {
-  background-color: color-mix(in srgb, var(--user-color-light) 50%, white);
+  background-color: color-mix(
+    in srgb,
+    var(--user-color-light) 50%,
+    var(--bn-colors-editor-background, white)
+  );
   border-radius: 4px;
 }
 
@@ -1463,7 +1534,7 @@ left untouched so only the dotted underline carries the color. Both the inline
   background-color: color-mix(
     in srgb,
     var(--user-color-light) 25%,
-    var(--bn-colors-editor-background)
+    var(--bn-colors-editor-background, #1f1f1f)
   );
 }
 
diff --git a/packages/react/src/editor/styles.css b/packages/react/src/editor/styles.css
index 8b406bd720..e95ce85dbb 100644
--- a/packages/react/src/editor/styles.css
+++ b/packages/react/src/editor/styles.css
@@ -12,41 +12,42 @@
 
 /* Default theme params */
 .bn-root {
-  --bn-colors-editor-text: #3f3f3f;
-  --bn-colors-editor-background: #ffffff;
-  --bn-colors-menu-text: #3f3f3f;
-  --bn-colors-menu-background: #ffffff;
-  --bn-colors-tooltip-text: #3f3f3f;
-  --bn-colors-tooltip-background: #efefef;
-  --bn-colors-hovered-text: #3f3f3f;
-  --bn-colors-hovered-background: #efefef;
-  --bn-colors-selected-text: #ffffff;
-  --bn-colors-selected-background: #3f3f3f;
-  --bn-colors-disabled-text: #afafaf;
-  --bn-colors-disabled-background: #efefef;
-
-  --bn-colors-shadow: #cfcfcf;
-  --bn-colors-border: #efefef;
-  --bn-colors-side-menu: #cfcfcf;
-
-  --bn-colors-highlights-gray-text: #9b9a97;
-  --bn-colors-highlights-gray-background: #ebeced;
-  --bn-colors-highlights-brown-text: #64473a;
-  --bn-colors-highlights-brown-background: #e9e5e3;
-  --bn-colors-highlights-red-text: #e03e3e;
-  --bn-colors-highlights-red-background: #fbe4e4;
-  --bn-colors-highlights-orange-text: #d9730d;
-  --bn-colors-highlights-orange-background: #f6e9d9;
-  --bn-colors-highlights-yellow-text: #dfab01;
-  --bn-colors-highlights-yellow-background: #fbf3db;
-  --bn-colors-highlights-green-text: #4d6461;
-  --bn-colors-highlights-green-background: #ddedea;
-  --bn-colors-highlights-blue-text: #0b6e99;
-  --bn-colors-highlights-blue-background: #ddebf1;
-  --bn-colors-highlights-purple-text: #6940a5;
-  --bn-colors-highlights-purple-background: #eae4f2;
-  --bn-colors-highlights-pink-text: #ad1a72;
-  --bn-colors-highlights-pink-background: #f4dfeb;
+  --bn-colors-editor-text: oklch(37% 0 0);
+  --bn-colors-editor-background: oklch(100% 0 0);
+  --bn-colors-menu-text: oklch(37% 0 0);
+  --bn-colors-menu-background: oklch(100% 0 0);
+  --bn-colors-tooltip-text: oklch(37% 0 0);
+  --bn-colors-tooltip-background: oklch(95% 0 0);
+  --bn-colors-hovered-text: oklch(37% 0 0);
+  --bn-colors-hovered-background: oklch(95% 0 0);
+  --bn-colors-selected-text: oklch(100% 0 0);
+  --bn-colors-selected-background: oklch(37% 0 0);
+  --bn-colors-disabled-text: oklch(75% 0 0);
+  --bn-colors-disabled-background: oklch(95% 0 0);
+
+  --bn-colors-shadow: oklch(85% 0 0);
+  --bn-colors-border: oklch(95% 0 0);
+  --bn-colors-side-menu: oklch(85% 0 0);
+
+  /* Highlight backgrounds target Display P3; narrower displays gamut-map them. */
+  --bn-colors-highlights-gray-text: oklch(51.4% 0 0);
+  --bn-colors-highlights-gray-background: oklch(93% 0 0);
+  --bn-colors-highlights-brown-text: oklch(48.5% 0.06 50);
+  --bn-colors-highlights-brown-background: oklch(93% 0.015 50);
+  --bn-colors-highlights-red-text: oklch(50.5% 0.11 35);
+  --bn-colors-highlights-red-background: oklch(93% 0.04 35);
+  --bn-colors-highlights-orange-text: oklch(50.5% 0.11 65);
+  --bn-colors-highlights-orange-background: oklch(93% 0.04 65);
+  --bn-colors-highlights-yellow-text: oklch(50.5% 0.11 95);
+  --bn-colors-highlights-yellow-background: oklch(93% 0.04 95);
+  --bn-colors-highlights-green-text: oklch(50.5% 0.11 135);
+  --bn-colors-highlights-green-background: oklch(93% 0.04 135);
+  --bn-colors-highlights-blue-text: oklch(50.5% 0.11 235);
+  --bn-colors-highlights-blue-background: oklch(93% 0.04 235);
+  --bn-colors-highlights-purple-text: oklch(50.5% 0.11 300);
+  --bn-colors-highlights-purple-background: oklch(93% 0.04 300);
+  --bn-colors-highlights-pink-text: oklch(50.5% 0.11 345);
+  --bn-colors-highlights-pink-background: oklch(93% 0.04 345);
 
   --bn-font-family:
     "Inter", "Inter fallback", "SF Pro Display", -apple-system,
@@ -64,41 +65,42 @@
 }
 
 .bn-root[data-color-scheme="dark"] {
-  --bn-colors-editor-text: #cfcfcf;
-  --bn-colors-editor-background: #1f1f1f;
-  --bn-colors-menu-text: #cfcfcf;
-  --bn-colors-menu-background: #1f1f1f;
-  --bn-colors-tooltip-text: #cfcfcf;
-  --bn-colors-tooltip-background: #161616;
-  --bn-colors-hovered-text: #cfcfcf;
-  --bn-colors-hovered-background: #161616;
-  --bn-colors-selected-text: #cfcfcf;
-  --bn-colors-selected-background: #0f0f0f;
-  --bn-colors-disabled-text: #3f3f3f;
-  --bn-colors-disabled-background: #161616;
-
-  --bn-colors-shadow: #0f0f0f;
-  --bn-colors-border: #161616;
-  --bn-colors-side-menu: #7f7f7f;
-
-  --bn-colors-highlights-gray-text: #bebdb8;
-  --bn-colors-highlights-gray-background: #9b9a97;
-  --bn-colors-highlights-brown-text: #8e6552;
-  --bn-colors-highlights-brown-background: #64473a;
-  --bn-colors-highlights-red-text: #ec4040;
-  --bn-colors-highlights-red-background: #be3434;
-  --bn-colors-highlights-orange-text: #e3790d;
-  --bn-colors-highlights-orange-background: #b7600a;
-  --bn-colors-highlights-yellow-text: #dfab01;
-  --bn-colors-highlights-yellow-background: #b58b00;
-  --bn-colors-highlights-green-text: #6b8b87;
-  --bn-colors-highlights-green-background: #4d6461;
-  --bn-colors-highlights-blue-text: #0e87bc;
-  --bn-colors-highlights-blue-background: #0b6e99;
-  --bn-colors-highlights-purple-text: #8552d7;
-  --bn-colors-highlights-purple-background: #6940a5;
-  --bn-colors-highlights-pink-text: #da208f;
-  --bn-colors-highlights-pink-background: #ad1a72;
+  --bn-colors-editor-text: oklch(85% 0 0);
+  --bn-colors-editor-background: oklch(24% 0 0);
+  --bn-colors-menu-text: oklch(85% 0 0);
+  --bn-colors-menu-background: oklch(24% 0 0);
+  --bn-colors-tooltip-text: oklch(85% 0 0);
+  --bn-colors-tooltip-background: oklch(20% 0 0);
+  --bn-colors-hovered-text: oklch(85% 0 0);
+  --bn-colors-hovered-background: oklch(20% 0 0);
+  --bn-colors-selected-text: oklch(85% 0 0);
+  --bn-colors-selected-background: oklch(17% 0 0);
+  --bn-colors-disabled-text: oklch(37% 0 0);
+  --bn-colors-disabled-background: oklch(20% 0 0);
+
+  --bn-colors-shadow: oklch(17% 0 0);
+  --bn-colors-border: oklch(20% 0 0);
+  --bn-colors-side-menu: oklch(60% 0 0);
+
+  /* Highlight backgrounds target Display P3; narrower displays gamut-map them. */
+  --bn-colors-highlights-gray-text: oklch(71.5% 0 0);
+  --bn-colors-highlights-gray-background: oklch(34% 0 0);
+  --bn-colors-highlights-brown-text: oklch(73% 0.06 50);
+  --bn-colors-highlights-brown-background: oklch(34% 0.035 50);
+  --bn-colors-highlights-red-text: oklch(75% 0.1 35);
+  --bn-colors-highlights-red-background: oklch(34% 0.08 35);
+  --bn-colors-highlights-orange-text: oklch(75% 0.1 65);
+  --bn-colors-highlights-orange-background: oklch(34% 0.08 65);
+  --bn-colors-highlights-yellow-text: oklch(75% 0.1 95);
+  --bn-colors-highlights-yellow-background: oklch(34% 0.08 95);
+  --bn-colors-highlights-green-text: oklch(75% 0.1 135);
+  --bn-colors-highlights-green-background: oklch(34% 0.08 135);
+  --bn-colors-highlights-blue-text: oklch(75% 0.1 235);
+  --bn-colors-highlights-blue-background: oklch(34% 0.08 235);
+  --bn-colors-highlights-purple-text: oklch(75% 0.1 300);
+  --bn-colors-highlights-purple-background: oklch(34% 0.08 300);
+  --bn-colors-highlights-pink-text: oklch(75% 0.1 345);
+  --bn-colors-highlights-pink-background: oklch(34% 0.08 345);
 }
 
 .bn-root {
diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx
index 6fa9173445..6177c913e3 100644
--- a/playground/src/examples.gen.tsx
+++ b/playground/src/examples.gen.tsx
@@ -1034,6 +1034,26 @@ export const examples = {
         readme:
           "To configure a code block highlighting theme and language, you can extend the editor's default schema with a new `codeBlock`, which you can pass options into when creating. You can then use a shiki highlighter to add custom syntax highlighting.\n\nFirst use the [shiki-codegen](https://shiki.style/packages/codegen) CLI to create a `shiki.bundle.ts` file. You can then pass this file into the `codeBlock` options when creating it.\n\n**Relevant Docs:**\n\n- [Code Blocks](/docs/features/blocks/code-blocks)\n- [shiki-codegen](https://shiki.style/packages/codegen)\n- [Custom Schema](/docs/features/custom-schemas)",
       },
+      {
+        projectSlug: "color-combinations",
+        fullSlug: "theming/color-combinations",
+        pathFromRoot: "examples/04-theming/08-color-combinations",
+        config: {
+          playground: true,
+          docs: false,
+          author: "",
+          tags: ["Appearance & Styling"],
+          dependencies: {} as any,
+          pro: false,
+        },
+        title: "Color combinations",
+        group: {
+          pathFromRoot: "examples/04-theming",
+          slug: "theming",
+        },
+        readme:
+          "Inspect every combination of the default text and background colors, including the default color, applied to whole blocks and inline content. Switch between light and dark themes to compare their appearance.\n\n**Try me out!** Use the theme toggle above the editors.\n\n## Relevant docs\n\n- [Themes](https://www.blocknotejs.org/docs/react/styling-theming/themes)",
+      },
     ],
   },
   interoperability: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6f36d87bcc..76c78dc64c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -2629,6 +2629,49 @@ importers:
         specifier: ^8.0.0
         version: 8.0.8(@types/node@25.9.5)(esbuild@0.27.5)(jiti@2.6.1)(terser@5.51.2)(tsx@4.21.0)(yaml@2.9.0)
 
+  examples/04-theming/08-color-combinations:
+    dependencies:
+      '@blocknote/ariakit':
+        specifier: latest
+        version: link:../../../packages/ariakit
+      '@blocknote/core':
+        specifier: latest
+        version: link:../../../packages/core
+      '@blocknote/mantine':
+        specifier: latest
+        version: link:../../../packages/mantine
+      '@blocknote/react':
+        specifier: latest
+        version: link:../../../packages/react
+      '@blocknote/shadcn':
+        specifier: latest
+        version: link:../../../packages/shadcn
+      '@mantine/core':
+        specifier: ^9.0.2
+        version: 9.1.1(@mantine/hooks@9.1.1(react@19.2.5))(@types/react@19.2.14)(react-dom@19.2.5(react@19.2.5))(react@19.2.5)
+      '@mantine/hooks':
+        specifier: ^9.0.2
+        version: 9.1.1(react@19.2.5)
+      react:
+        specifier: ^19.2.3
+        version: 19.2.5
+      react-dom:
+        specifier: ^19.2.3
+        version: 19.2.5(react@19.2.5)
+    devDependencies:
+      '@types/react':
+        specifier: ^19.2.3
+        version: 19.2.14
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.14)
+      '@vitejs/plugin-react':
+        specifier: ^6.0.1
+        version: 6.0.1(babel-plugin-react-compiler@1.0.0)(vite@8.0.8(@types/node@25.9.5)(esbuild@0.27.5)(jiti@2.6.1)(terser@5.51.2)(tsx@4.21.0)(yaml@2.9.0))
+      vite:
+        specifier: ^8.0.0
+        version: 8.0.8(@types/node@25.9.5)(esbuild@0.27.5)(jiti@2.6.1)(terser@5.51.2)(tsx@4.21.0)(yaml@2.9.0)
+
   examples/05-interoperability/01-converting-blocks-to-html:
     dependencies:
       '@blocknote/ariakit':
diff --git a/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/backgroundColorMark-chromium-linux.png b/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/backgroundColorMark-chromium-linux.png
index 6170d36a51..33f2b9fae2 100644
Binary files a/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/backgroundColorMark-chromium-linux.png and b/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/backgroundColorMark-chromium-linux.png differ
diff --git a/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/blockBackgroundColor-chromium-linux.png b/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/blockBackgroundColor-chromium-linux.png
index 9288984918..51a064630a 100644
Binary files a/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/blockBackgroundColor-chromium-linux.png and b/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/blockBackgroundColor-chromium-linux.png differ
diff --git a/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/blockTextColor-chromium-linux.png b/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/blockTextColor-chromium-linux.png
index 300b460d1d..712aacab9b 100644
Binary files a/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/blockTextColor-chromium-linux.png and b/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/blockTextColor-chromium-linux.png differ
diff --git a/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/blockTextColorTable-chromium-linux.png b/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/blockTextColorTable-chromium-linux.png
index 247be5a952..36d32f05e8 100644
Binary files a/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/blockTextColorTable-chromium-linux.png and b/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/blockTextColorTable-chromium-linux.png differ
diff --git a/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/colorPickerFormattingToolbar-chromium-linux.png b/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/colorPickerFormattingToolbar-chromium-linux.png
index 8a07d105a8..6988e2433f 100644
Binary files a/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/colorPickerFormattingToolbar-chromium-linux.png and b/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/colorPickerFormattingToolbar-chromium-linux.png differ
diff --git a/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/colorPickerSideMenu-chromium-linux.png b/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/colorPickerSideMenu-chromium-linux.png
index 7ed2969b83..3106c8b7bd 100644
Binary files a/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/colorPickerSideMenu-chromium-linux.png and b/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/colorPickerSideMenu-chromium-linux.png differ
diff --git a/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/textColorMark-chromium-linux.png b/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/textColorMark-chromium-linux.png
index 0b06ef3741..2732ef6b79 100644
Binary files a/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/textColorMark-chromium-linux.png and b/tests/src/end-to-end/colors/__screenshots__/colors.test.tsx/textColorMark-chromium-linux.png differ
diff --git a/tests/src/end-to-end/copypaste/__snapshots__/nonEditableBlock.json b/tests/src/end-to-end/copypaste/__snapshots__/nonEditableBlock.json
index 3a15b219b5..4d67396854 100644
--- a/tests/src/end-to-end/copypaste/__snapshots__/nonEditableBlock.json
+++ b/tests/src/end-to-end/copypaste/__snapshots__/nonEditableBlock.json
@@ -57,13 +57,13 @@
                     {
                       "type": "textColor",
                       "attrs": {
-                        "stringValue": "rgb(63, 63, 63)"
+                        "stringValue": "oklch(0.37 0 0)"
                       }
                     },
                     {
                       "type": "backgroundColor",
                       "attrs": {
-                        "stringValue": "rgb(255, 255, 255)"
+                        "stringValue": "oklch(1 0 0)"
                       }
                     }
                   ],
diff --git a/tests/src/end-to-end/exporters/__screenshots__/emailImages.test.tsx/email-export-chromium-linux.png b/tests/src/end-to-end/exporters/__screenshots__/emailImages.test.tsx/email-export-chromium-linux.png
index fa4eff7007..98982b44fb 100644
Binary files a/tests/src/end-to-end/exporters/__screenshots__/emailImages.test.tsx/email-export-chromium-linux.png and b/tests/src/end-to-end/exporters/__screenshots__/emailImages.test.tsx/email-export-chromium-linux.png differ
diff --git a/tests/src/end-to-end/exporters/__screenshots__/emailImages.test.tsx/email-export-firefox-linux.png b/tests/src/end-to-end/exporters/__screenshots__/emailImages.test.tsx/email-export-firefox-linux.png
index 25ad3701cf..79743b2255 100644
Binary files a/tests/src/end-to-end/exporters/__screenshots__/emailImages.test.tsx/email-export-firefox-linux.png and b/tests/src/end-to-end/exporters/__screenshots__/emailImages.test.tsx/email-export-firefox-linux.png differ
diff --git a/tests/src/end-to-end/exporters/__screenshots__/emailImages.test.tsx/email-export-webkit-linux.png b/tests/src/end-to-end/exporters/__screenshots__/emailImages.test.tsx/email-export-webkit-linux.png
index 0545ff099b..ecaa1eff49 100644
Binary files a/tests/src/end-to-end/exporters/__screenshots__/emailImages.test.tsx/email-export-webkit-linux.png and b/tests/src/end-to-end/exporters/__screenshots__/emailImages.test.tsx/email-export-webkit-linux.png differ
diff --git a/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-chromium-linux.png b/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-chromium-linux.png
index c064d1bd48..25883a118c 100644
Binary files a/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-chromium-linux.png and b/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-chromium-linux.png differ
diff --git a/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-equality-chromium-linux.png b/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-equality-chromium-linux.png
index 38aaa50007..5da354f5a6 100644
Binary files a/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-equality-chromium-linux.png and b/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-equality-chromium-linux.png differ
diff --git a/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-firefox-linux.png b/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-firefox-linux.png
index 1b105bfda9..8205616c20 100644
Binary files a/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-firefox-linux.png and b/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-firefox-linux.png differ
diff --git a/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-webkit-linux.png b/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-webkit-linux.png
index 70ff6d264a..c4082c8400 100644
Binary files a/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-webkit-linux.png and b/tests/src/end-to-end/static/__screenshots__/static.test.tsx/static-rendering-webkit-linux.png differ
diff --git a/tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-image-toolbar-chromium-linux.png b/tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-image-toolbar-chromium-linux.png
index 995dbe861b..7529d2abcb 100644
Binary files a/tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-image-toolbar-chromium-linux.png and b/tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-image-toolbar-chromium-linux.png differ
diff --git a/tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-image-toolbar-firefox-linux.png b/tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-image-toolbar-firefox-linux.png
index 73f5461589..8c1e240d79 100644
Binary files a/tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-image-toolbar-firefox-linux.png and b/tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-image-toolbar-firefox-linux.png differ
diff --git a/tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-image-toolbar-webkit-linux.png b/tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-image-toolbar-webkit-linux.png
index f2af988f99..e99d055ed0 100644
Binary files a/tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-image-toolbar-webkit-linux.png and b/tests/src/end-to-end/theming/__screenshots__/theming.test.tsx/dark-image-toolbar-webkit-linux.png differ
diff --git a/tests/src/end-to-end/versioning/__screenshots__/block-comparison.test.tsx/comparison-default-schema-dark-chromium-linux.png b/tests/src/end-to-end/versioning/__screenshots__/block-comparison.test.tsx/comparison-default-schema-dark-chromium-linux.png
index 991fb526d9..1be42751e7 100644
Binary files a/tests/src/end-to-end/versioning/__screenshots__/block-comparison.test.tsx/comparison-default-schema-dark-chromium-linux.png and b/tests/src/end-to-end/versioning/__screenshots__/block-comparison.test.tsx/comparison-default-schema-dark-chromium-linux.png differ
diff --git a/tests/src/end-to-end/versioning/__screenshots__/block-comparison.test.tsx/comparison-default-schema-light-chromium-linux.png b/tests/src/end-to-end/versioning/__screenshots__/block-comparison.test.tsx/comparison-default-schema-light-chromium-linux.png
index 9d2ffe86a0..62312b0f82 100644
Binary files a/tests/src/end-to-end/versioning/__screenshots__/block-comparison.test.tsx/comparison-default-schema-light-chromium-linux.png and b/tests/src/end-to-end/versioning/__screenshots__/block-comparison.test.tsx/comparison-default-schema-light-chromium-linux.png differ
diff --git a/tests/src/end-to-end/versioning/block-comparison.test.tsx b/tests/src/end-to-end/versioning/block-comparison.test.tsx
index eb943af93e..5325462121 100644
--- a/tests/src/end-to-end/versioning/block-comparison.test.tsx
+++ b/tests/src/end-to-end/versioning/block-comparison.test.tsx
@@ -81,6 +81,14 @@ const showcase: PartialBlock[] = [
   },
 ];
 
+function resetToggleState() {
+  for (const key of Object.keys(localStorage)) {
+    if (key.startsWith("toggle-removed-") || key.startsWith("toggle-added-")) {
+      localStorage.removeItem(key);
+    }
+  }
+}
+
 for (const theme of ["light", "dark"] as const) {
   // Match the static all-blocks test's browser and full-resolution capture setup.
   // The comparison styling is browser-independent; iframe captures are not.
@@ -88,6 +96,8 @@ for (const theme of ["light", "dark"] as const) {
     `default schema comparison in ${theme}`,
     { timeout: 90000 },
     async () => {
+      // Retries reuse these block IDs, including after a timed-out capture.
+      resetToggleState();
       expect(new Set(blockTypes(showcase))).toEqual(
         new Set(Object.keys(defaultBlockSpecs)),
       );
@@ -235,18 +245,12 @@ for (const theme of ["light", "dark"] as const) {
           },
         });
       } finally {
+        // Clear persisted state before any asynchronous teardown can fail.
+        resetToggleState();
         await page.viewport(1280, 720);
         view?.close();
         await screen.unmount();
         doc.destroy();
-        for (const key of Object.keys(localStorage)) {
-          if (
-            key.startsWith("toggle-removed-") ||
-            key.startsWith("toggle-added-")
-          ) {
-            localStorage.removeItem(key);
-          }
-        }
       }
     },
   );
diff --git a/tests/src/end-to-end/y-prosemirror/__screenshots__/addRemoveBlocks.test.tsx/add-remove-add-colored-block-to-empty-chromium-linux.png b/tests/src/end-to-end/y-prosemirror/__screenshots__/addRemoveBlocks.test.tsx/add-remove-add-colored-block-to-empty-chromium-linux.png
index 6b66a8aa81..7faf167f6b 100644
Binary files a/tests/src/end-to-end/y-prosemirror/__screenshots__/addRemoveBlocks.test.tsx/add-remove-add-colored-block-to-empty-chromium-linux.png and b/tests/src/end-to-end/y-prosemirror/__screenshots__/addRemoveBlocks.test.tsx/add-remove-add-colored-block-to-empty-chromium-linux.png differ
diff --git a/tests/src/end-to-end/y-prosemirror/__screenshots__/addRemoveBlocks.test.tsx/add-remove-add-colored-block-to-empty-firefox-linux.png b/tests/src/end-to-end/y-prosemirror/__screenshots__/addRemoveBlocks.test.tsx/add-remove-add-colored-block-to-empty-firefox-linux.png
index d7f1fdbe2a..73a6ed673d 100644
Binary files a/tests/src/end-to-end/y-prosemirror/__screenshots__/addRemoveBlocks.test.tsx/add-remove-add-colored-block-to-empty-firefox-linux.png and b/tests/src/end-to-end/y-prosemirror/__screenshots__/addRemoveBlocks.test.tsx/add-remove-add-colored-block-to-empty-firefox-linux.png differ
diff --git a/tests/src/end-to-end/y-prosemirror/__screenshots__/addRemoveBlocks.test.tsx/add-remove-add-colored-block-to-empty-webkit-linux.png b/tests/src/end-to-end/y-prosemirror/__screenshots__/addRemoveBlocks.test.tsx/add-remove-add-colored-block-to-empty-webkit-linux.png
index 50958e9aa4..66e7934187 100644
Binary files a/tests/src/end-to-end/y-prosemirror/__screenshots__/addRemoveBlocks.test.tsx/add-remove-add-colored-block-to-empty-webkit-linux.png and b/tests/src/end-to-end/y-prosemirror/__screenshots__/addRemoveBlocks.test.tsx/add-remove-add-colored-block-to-empty-webkit-linux.png differ