jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Switch theme (#4017)

Browse Source 
* introduce ha-switch theming

* fix typo

* remove comment
This commit is contained in:
Ian Richardson 2019-10-16 10:08:28 -05:00 committed by Bram Kragten
parent 8eca956cd1
commit 4ea483e3de
5 changed files with 21 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
demo/src/configs/jimpower/theme.ts
View File

@ -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",
});

9
demo/src/configs/kernehed/theme.ts
View File

@ -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",
});

5
demo/src/configs/teachingbirds/theme.ts
View File

@ -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)",
"paper-toggle-button-unchecked-bar-color": "var(--primary-text-color)",
"switch-unchecked-track-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)",

13
src/components/ha-switch.ts
View File

@ -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);
border-color: var(--paper-toggle-button-unchecked-button-color);
background-color: var(--switch-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);
border-color: var(--paper-toggle-button-unchecked-bar-color);
background-color: var(--switch-unchecked-track-color);
border-color: var(--switch-unchecked-track-color);
}
:host(.slotted) .mdc-switch {
margin-right: 24px;

14
src/resources/ha-style.ts
View File

@ -53,8 +53,10 @@ documentContainer.innerHTML = `<custom-style>
--sidebar-selected-icon-color: var(--primary-color);
/* controls */
--toggle-button-color: var(--primary-color);
/* --toggle-button-unchecked-color: var(--accent-color); */
--switch-checked-color: var(--primary-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);