diff --git a/examples/react-table/src/styles.css b/examples/react-table/src/styles.css
index ceade988694..32b80315539 100644
--- a/examples/react-table/src/styles.css
+++ b/examples/react-table/src/styles.css
@@ -496,8 +496,8 @@ i.justify-align {
   right: 0;
   bottom: 0;
   top: 0;
-  background-color: rgb(172, 206, 247);
-  opacity: 0.6;
+  background-color: highlight;
+  mix-blend-mode: multiply;
   content: '';
   pointer-events: none;
 }
diff --git a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
index 931beb900cb..527085b7539 100644
--- a/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
+++ b/packages/lexical-playground/src/themes/PlaygroundEditorTheme.css
@@ -173,8 +173,8 @@
   right: 0;
   bottom: 0;
   top: 0;
-  background-color: rgb(172, 206, 247);
-  opacity: 0.6;
+  background-color: highlight;
+  mix-blend-mode: multiply;
   content: '';
   pointer-events: none;
 }