From b644f7d23d6469ae80b7efd9447cd3f9e18e9031 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 26 Aug 2020 12:38:48 +0200
Subject: [PATCH] Theme tweaks (#6701)

---
 src/components/ha-code-editor.ts              |  4 +--
 src/panels/lovelace/entity-rows/types.ts      |  2 +-
 .../lovelace/special-rows/hui-divider-row.ts  | 28 +++++++++----------
 .../lovelace/special-rows/hui-section-row.ts  |  4 +--
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts
index d4d74adef5..452e75dffd 100644
--- a/src/components/ha-code-editor.ts
+++ b/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 {
diff --git a/src/panels/lovelace/entity-rows/types.ts b/src/panels/lovelace/entity-rows/types.ts
index 4b674a9d6f..03c162fb2f 100644
--- a/src/panels/lovelace/entity-rows/types.ts
+++ b/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";
diff --git a/src/panels/lovelace/special-rows/hui-divider-row.ts b/src/panels/lovelace/special-rows/hui-divider-row.ts
index 40a3d25061..9949fa53d1 100644
--- a/src/panels/lovelace/special-rows/hui-divider-row.ts
+++ b/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));
+      }
+    `;
   }
 }
 
diff --git a/src/panels/lovelace/special-rows/hui-section-row.ts b/src/panels/lovelace/special-rows/hui-section-row.ts
index 1f23264560..3b94b40944 100644
--- a/src/panels/lovelace/special-rows/hui-section-row.ts
+++ b/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;