Skip to content

Switch theme #4017

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bramkragten merged 3 commits into from
Oct 16, 2019
Merged

Switch theme #4017

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
21d83f0
introduce ha-switch theming
iantrich Oct 16, 2019
97f316f
fix typo
iantrich Oct 16, 2019
9de4c63
remove comment
iantrich Oct 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 3 additions & 6 deletions demo/src/configs/jimpower/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 3 additions & 6 deletions demo/src/configs/kernehed/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 2 additions & 3 deletions demo/src/configs/teachingbirds/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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)",
Expand Down
13 changes: 8 additions & 5 deletions src/components/ha-switch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand All @@ -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;
Expand Down
14 changes: 5 additions & 9 deletions src/resources/ha-style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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); */
Comment on lines -56 to -57
Copy link
Copy Markdown
Member

@bramkragten bramkragten Oct 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh we already had official none paper variables, that should have been used in themes. Should we reuse those instead of creating switch ones?

Copy link
Copy Markdown
Member Author

@iantrich iantrich Oct 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could, but I like switch better 🤷‍♂️

Copy link
Copy Markdown
Member

@bramkragten bramkragten Oct 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That would be breaking, and keeping toggle-button in theory not, but since everyone uses paper anyway it doesn't really matter I think...

Copy link
Copy Markdown
Member Author

@iantrich iantrich Oct 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right, that's what I meant to say more clearly ;) Would love for us to build a theme generator after we overhaul theming in general

Copy link
Copy Markdown
Member Author

@iantrich iantrich Oct 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll be sure to highlight this in the changelog and the release notes

Copy link
Copy Markdown

@rhoppel rhoppel Oct 16, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the great response. You guys rock!

--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);
Expand All @@ -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.
*/
Expand Down Expand Up @@ -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);
Expand Down