mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Switch theme (#4017)
* introduce ha-switch theming * fix typo * remove comment
This commit is contained in:
parent
8eca956cd1
commit
4ea483e3de
@ -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",
|
||||
});
|
||||
|
@ -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",
|
||||
});
|
||||
|
@ -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)",
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
Loading…
x
Reference in New Issue
Block a user