diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts
index be3eb9d283..5cb78c7193 100644
--- a/src/components/ha-code-editor.ts
+++ b/src/components/ha-code-editor.ts
@@ -559,9 +559,9 @@ export class HaCodeEditor extends ReactiveElement {
       right: 8px;
       z-index: 1;
       color: var(--secondary-text-color);
-      background-color: var(--card-background-color);
+      background-color: var(--secondary-background-color);
       border-radius: 50%;
-      opacity: 0.6;
+      opacity: 0.9;
       transition: opacity 0.2s;
       --mdc-icon-button-size: 32px;
       --mdc-icon-size: 18px;
@@ -591,7 +591,7 @@ export class HaCodeEditor extends ReactiveElement {
       z-index: 9999 !important;
       background-color: var(
         --code-editor-background-color,
-        var(--mdc-text-field-fill-color, whitesmoke)
+        var(--card-background-color)
       ) !important;
       margin: 0 !important;
       padding-top: var(--safe-area-inset-top) !important;
diff --git a/src/resources/codemirror.ts b/src/resources/codemirror.ts
index 0999859c22..a5b8de8bb9 100644
--- a/src/resources/codemirror.ts
+++ b/src/resources/codemirror.ts
@@ -51,7 +51,7 @@ export const haTheme = EditorView.theme({
   "&": {
     color: "var(--primary-text-color)",
     backgroundColor:
-      "var(--code-editor-background-color, var(--mdc-text-field-fill-color, whitesmoke))",
+      "var(--code-editor-background-color, var(--card-background-color))",
     borderRadius:
       "var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0px 0px",
     caretColor: "var(--secondary-text-color)",