Theme tweaks (#6701)

src/components/ha-code-editor.ts

@@ -1,8 +1,8 @@
 import { Editor } from "codemirror";
 import {
   customElement,
-  property,
   internalProperty,
+  property,
   PropertyValues,
   UpdatingElement,
 } from "lit-element";
@@ -123,7 +123,7 @@ export class HaCodeEditor extends UpdatingElement {
         transition: 0.2s ease border-right;
       }
       .cm-s-default.CodeMirror {
-        background-color: var(--card-background-color);
+        background-color: var(--code-editor-background-color, var(--card-background-color));
         color: var(--primary-text-color);
       }
       .cm-s-default .CodeMirror-cursor {

src/panels/lovelace/entity-rows/types.ts

@@ -17,7 +17,7 @@ export interface EntityFilterEntityConfig extends EntityConfig {
 }
 export interface DividerConfig {
   type: "divider";
-  style: string;
+  style: { [key: string]: string };
 }
 export interface SectionConfig {
   type: "section";

src/panels/lovelace/special-rows/hui-divider-row.ts

@@ -1,10 +1,13 @@
 import {
+  css,
+  CSSResult,
   customElement,
   html,
-  LitElement,
   internalProperty,
+  LitElement,
   TemplateResult,
 } from "lit-element";
+import { styleMap } from "lit-html/directives/style-map";
 import { HomeAssistant } from "../../../types";
 import { DividerConfig, LovelaceRow } from "../entity-rows/types";
 
@@ -19,13 +22,7 @@ class HuiDividerRow extends LitElement implements LovelaceRow {
       throw new Error("Error in card configuration.");
     }
 
-    this._config = {
-      style: {
-        height: "1px",
-        "background-color": "var(--divider-color)",
-      },
-      ...config,
-    };
+    this._config = config;
   }
 
   protected render(): TemplateResult {
@@ -33,13 +30,16 @@ class HuiDividerRow extends LitElement implements LovelaceRow {
       return html``;
     }
 
-    const el = document.createElement("div");
+    return html`<div style=${styleMap(this._config.style)}></div>`;
+  }
 
-    Object.keys(this._config.style).forEach((prop) => {
-      el.style.setProperty(prop, this._config!.style[prop]);
-    });
-
-    return html` ${el} `;
+  static get styles(): CSSResult {
+    return css`
+      div {
+        height: 1px;
+        background-color: var(--entities-divider-color, var(--divider-color));
+      }
+    `;
   }
 }
 

src/panels/lovelace/special-rows/hui-section-row.ts

@@ -3,8 +3,8 @@ import {
   CSSResult,
   customElement,
   html,
-  LitElement,
   internalProperty,
+  LitElement,
   TemplateResult,
 } from "lit-element";
 import "../../../components/ha-icon";
@@ -48,7 +48,7 @@ class HuiSectionRow extends LitElement implements LovelaceRow {
       }
       .divider {
         height: 1px;
-        background-color: var(--divider-color);
+        background-color: var(--entities-divider-color, var(--divider-color));
         margin-left: -16px;
         margin-right: -16px;
         margin-top: 8px;