From eaedb2e5ae9de681a787aca7bde6c6fce68e21bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <joasoe@gmail.com>
Date: Sun, 10 Nov 2019 18:40:36 +0100
Subject: [PATCH] Checked button colors (#4203)

* split switch-checked-color into 2 vars like the unchecked variant

* Apply new css vars

* revert accidental delete

* revert demo changes

* revert property change
---
 src/components/ha-switch.ts | 8 ++++++++
 src/resources/ha-style.ts   | 2 ++
 2 files changed, 10 insertions(+)

diff --git a/src/components/ha-switch.ts b/src/components/ha-switch.ts
index b31909c499..5a684d2be7 100644
--- a/src/components/ha-switch.ts
+++ b/src/components/ha-switch.ts
@@ -32,6 +32,14 @@ export class HaSwitch extends MwcSwitch {
           flex-direction: row;
           align-items: center;
         }
+        .mdc-switch.mdc-switch--checked .mdc-switch__thumb {
+          background-color: var(--switch-checked-button-color);
+          border-color: var(--switch-checked-button-color);
+        }
+        .mdc-switch.mdc-switch--checked .mdc-switch__track {
+          background-color: var(--switch-checked-track-color);
+          border-color: var(--switch-checked-track-color);
+        }
         .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
           background-color: var(--switch-unchecked-button-color);
           border-color: var(--switch-unchecked-button-color);
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 0ab68dbaa2..c731329486 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -57,6 +57,8 @@ documentContainer.innerHTML = `<custom-style>
       /* controls */
       --switch-checked-color: var(--primary-color);
       /* --switch-unchecked-color: var(--accent-color); */
+      --switch-checked-button-color: var(--switch-checked-color, var(--paper-grey-50));
+      --switch-checked-track-color: var(--switch-checked-color, #000000);
       --switch-unchecked-button-color: var(--switch-unchecked-color, var(--paper-grey-50));
       --switch-unchecked-track-color: var(--switch-unchecked-color, #000000);
       --slider-color: var(--primary-color);