Switch theme (#4017)

* introduce ha-switch theming

* fix typo

* remove comment

demo/src/configs/jimpower/theme.ts

@@ -23,27 +23,24 @@ export const demoThemeJimpower = () => ({
   "paper-listbox-background-color": "#2E333A",
   "table-row-background-color": "#353840",
   "paper-grey-50": "var(--primary-text-color)",
-  "paper-toggle-button-checked-button-color": "var(--accent-color)",
+  "switch-checked-color": "var(--accent-color)",
   "paper-dialog-background-color": "#434954",
   "secondary-text-color": "#5294E2",
   "google-red-500": "#E45E65",
   "divider-color": "rgba(0, 0, 0, .12)",
-  "paper-toggle-button-unchecked-ink-color": "var(--disabled-text-color)",
   "google-green-500": "#39E949",
-  "paper-toggle-button-unchecked-button-color": "var(--disabled-text-color)",
+  "switch-unchecked-button-color": "var(--disabled-text-color)",
   "label-badge-border-color": "green",
   "paper-listbox-color": "var(--primary-color)",
   "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
-  "paper-toggle-button-checked-ink-color": "var(--accent-color)",
   "paper-card-background-color": "#434954",
   "label-badge-text-color": "var(--primary-text-color)",
   "paper-slider-knob-start-color": "var(--accent-color)",
-  "paper-toggle-button-unchecked-bar-color": "var(--disabled-text-color)",
+  "switch-unchecked-track-color": "var(--disabled-text-color)",
   "dark-primary-color": "var(--accent-color)",
   "paper-slider-secondary-color": "var(--secondary-background-color)",
   "paper-slider-pin-color": "var(--accent-color)",
   "paper-item-icon-active-color": "#F9C536",
   "accent-color": "#E45E65",
-  "paper-toggle-button-checked-bar-color": "var(--accent-color)",
   "table-row-alternative-background-color": "#3E424B",
 });

demo/src/configs/kernehed/theme.ts

@@ -24,27 +24,24 @@ export const demoThemeKernehed = () => ({
   "paper-listbox-background-color": "#141414",
   "table-row-background-color": "#292929",
   "paper-grey-50": "var(--primary-text-color)",
-  "paper-toggle-button-checked-button-color": "var(--accent-color)",
+  "switch-checked-color": "var(--accent-color)",
   "paper-dialog-background-color": "#292929",
   "secondary-text-color": "#b58e31",
   "google-red-500": "#b58e31",
   "divider-color": "rgba(0, 0, 0, .12)",
-  "paper-toggle-button-unchecked-ink-color": "var(--disabled-text-color)",
   "google-green-500": "#2980b9",
-  "paper-toggle-button-unchecked-button-color": "var(--disabled-text-color)",
+  "switch-unchecked-button-color": "var(--disabled-text-color)",
   "label-badge-border-color": "green",
   "paper-listbox-color": "#777777",
   "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
-  "paper-toggle-button-checked-ink-color": "var(--accent-color)",
   "paper-card-background-color": "#292929",
   "label-badge-text-color": "var(--primary-text-color)",
   "paper-slider-knob-start-color": "var(--accent-color)",
-  "paper-toggle-button-unchecked-bar-color": "var(--disabled-text-color)",
+  "switch-unchecked-track-color": "var(--disabled-text-color)",
   "dark-primary-color": "var(--accent-color)",
   "paper-slider-secondary-color": "var(--secondary-background-color)",
   "paper-slider-pin-color": "var(--accent-color)",
   "paper-item-icon-active-color": "#b58e31",
   "accent-color": "#2980b9",
-  "paper-toggle-button-checked-bar-color": "var(--accent-color)",
   "table-row-alternative-background-color": "#292929",
 });

demo/src/configs/teachingbirds/theme.ts

@@ -12,8 +12,7 @@ export const demoThemeTeachingbirds = () => ({
   "paper-slider-knob-color": "var(--primary-color)",
   "paper-listbox-color": "#FFFFFF",
   "paper-toggle-button-checked-bar-color": "var(--light-primary-color)",
-  "paper-toggle-button-checked-ink-color": "var(--dark-primary-color)",
+  "switch-unchecked-track-color": "var(--primary-text-color)",
-  "paper-toggle-button-unchecked-bar-color": "var(--primary-text-color)",
   "paper-card-background-color": "#4e4e4e",
   "label-badge-text-color": "var(--text-primary-color)",
   "primary-background-color": "#303030",
@@ -22,7 +21,7 @@ export const demoThemeTeachingbirds = () => ({
   "secondary-background-color": "#2b2b2b",
   "paper-slider-knob-start-color": "var(--primary-color)",
   "paper-item-icon-active-color": "#d8bf50",
-  "paper-toggle-button-checked-button-color": "var(--primary-color)",
+  "switch-checked-color": "var(--primary-color)",
   "secondary-text-color": "#389638",
   "disabled-text-color": "#545454",
   "paper-item-icon_-_color": "var(--primary-text-color)",

src/components/ha-switch.ts

@@ -12,7 +12,10 @@ export class HaSwitch extends MwcSwitch {
 
   protected firstUpdated() {
     super.firstUpdated();
-    this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
+    this.style.setProperty(
+      "--mdc-theme-secondary",
+      "var(--switch-checked-color)"
+    );
     this.classList.toggle(
       "slotted",
       Boolean(this._slot.assignedNodes().length)
@@ -29,12 +32,12 @@ export class HaSwitch extends MwcSwitch {
           align-items: center;
         }
         .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
-          background-color: var(--paper-toggle-button-unchecked-button-color);
+          background-color: var(--switch-unchecked-button-color);
-          border-color: var(--paper-toggle-button-unchecked-button-color);
+          border-color: var(--switch-unchecked-button-color);
         }
         .mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
-          background-color: var(--paper-toggle-button-unchecked-bar-color);
+          background-color: var(--switch-unchecked-track-color);
-          border-color: var(--paper-toggle-button-unchecked-bar-color);
+          border-color: var(--switch-unchecked-track-color);
         }
         :host(.slotted) .mdc-switch {
           margin-right: 24px;

src/resources/ha-style.ts

@@ -53,8 +53,10 @@ documentContainer.innerHTML = `<custom-style>
       --sidebar-selected-icon-color: var(--primary-color);
 
       /* controls */
-      --toggle-button-color: var(--primary-color);
+      --switch-checked-color: var(--primary-color);
-      /* --toggle-button-unchecked-color: var(--accent-color); */
+      /* --switch-unchecked-color: var(--accent-color); */
+      --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);
       --slider-secondary-color: var(--light-primary-color);
       --slider-bar-color: var(--disabled-text-color);
@@ -69,7 +71,7 @@ documentContainer.innerHTML = `<custom-style>
       --label-badge-grey: var(--paper-grey-500);
 
       /*
-        Paper-styles color.html depency is stripped on build.
+        Paper-styles color.html dependency is stripped on build.
         When a default paper-style color is used, it needs to be copied
         from paper-styles/color.html to here.
       */
@@ -110,12 +112,6 @@ documentContainer.innerHTML = `<custom-style>
       --table-row-background-color: var(--primary-background-color);
       --table-row-alternative-background-color: var(--secondary-background-color);
 
-      /* set our toggle style */
-      --paper-toggle-button-checked-ink-color: var(--toggle-button-color);
-      --paper-toggle-button-checked-button-color: var(--toggle-button-color);
-      --paper-toggle-button-checked-bar-color: var(--toggle-button-color);
-      --paper-toggle-button-unchecked-button-color: var(--toggle-button-unchecked-color, var(--paper-grey-50));
-      --paper-toggle-button-unchecked-bar-color: var(--toggle-button-unchecked-color, #000000);
       /* set our slider style */
       --paper-slider-knob-color: var(--slider-color);
       --paper-slider-knob-start-color: var(--slider-color);