diff --git a/packages/rich-text-editor/test/visual/material/rich-text-editor.test.js b/packages/rich-text-editor/test/visual/material/rich-text-editor.test.js
index d4c6e01c079..0407a0ca9f3 100644
--- a/packages/rich-text-editor/test/visual/material/rich-text-editor.test.js
+++ b/packages/rich-text-editor/test/visual/material/rich-text-editor.test.js
@@ -1,6 +1,7 @@
import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
import { visualDiff } from '@web/test-runner-visual-regression';
import '../../../theme/material/vaadin-rich-text-editor.js';
+import { colorDark } from '@vaadin/vaadin-material-styles/color.js';
describe('rich-text-editor', () => {
let div, element;
@@ -66,4 +67,21 @@ describe('rich-text-editor', () => {
]`;
await visualDiff(div, 'max-height');
});
+
+ it('dark theme', async () => {
+ document.documentElement.setAttribute('theme', 'dark');
+
+ fixtureSync(``);
+
+ element.value = `[
+ {"insert":""},
+ {"attributes":{"code-block":true},"insert":"\\n"},
+ {"insert":" "},
+ {"attributes":{"code-block":true},"insert":"\\n"},
+ {"insert":""},
+ {"attributes":{"code-block":true},"insert":"\\n"},
+ {"insert":"\\n"}
+ ]`;
+ await visualDiff(div, 'dark-theme');
+ });
});
diff --git a/packages/rich-text-editor/test/visual/material/screenshots/rich-text-editor/baseline/dark-theme.png b/packages/rich-text-editor/test/visual/material/screenshots/rich-text-editor/baseline/dark-theme.png
new file mode 100644
index 00000000000..cecf5c4ea4f
Binary files /dev/null and b/packages/rich-text-editor/test/visual/material/screenshots/rich-text-editor/baseline/dark-theme.png differ
diff --git a/packages/rich-text-editor/theme/material/vaadin-rich-text-editor-styles.js b/packages/rich-text-editor/theme/material/vaadin-rich-text-editor-styles.js
index 9d81ee620bc..f3e68a4f023 100644
--- a/packages/rich-text-editor/theme/material/vaadin-rich-text-editor-styles.js
+++ b/packages/rich-text-editor/theme/material/vaadin-rich-text-editor-styles.js
@@ -91,6 +91,11 @@ const richTextEditor = css`
strong {
font-weight: 600;
}
+
+ code,
+ pre {
+ background-color: var(--material-secondary-background-color);
+ }
`;
registerStyles('vaadin-rich-text-editor', [typography, richTextEditor], {