Variable colours (cards, backgrounds, sidebar, ...) by allardhs · Pull Request #361 · home-assistant/frontend

allardhs · 2017-07-27T11:30:30Z

First contribution, apologies for any mistakes.
As discussed in the "Share your Themes thread": https://community.home-assistant.io/t/share-your-themes/22018/9?u=ahs.

Goal is to allow more flexibility with theming (allowing e.g. "night mode") by replacing some hardcoded values by variable colours (which can be defined in custom themes):

replaced the white background colour in the state cards (ha-card.html) by the variable background colour
replaced the light grey overall background colour by the variable paper-grey-200 colour

Note that the default paper-grey-200 is not exactly the same as the current colour (#E5E5E5) but is the closest match of the defined colours in ha-style.html. It will however lead to a slight recolouring of the default background.

homeassistant · 2017-07-27T11:30:32Z

Hi @ahofelt,

It seems you haven't yet signed a CLA. Please do so here.

Once you do that we will be able to review and accept this pull request.

Thanks!

andrey-git · 2017-07-27T11:42:25Z

        transition: all 0.30s ease-out;

-        background-color: white;
+        background-color: var(--primary-background-color);


Lets keep default values:
background-color: var(--primary-background-color, white);

andrey-git · 2017-07-27T11:48:23Z


      app-header-layout {
-        background-color: #E5E5E5;
+        background-color: var(--paper-grey-200);


Create a separate variable.
If you want a green background here you wouldn't want to override paper-grey-200 to green,

allardhs · 2017-07-27T12:05:32Z

You're right @andrey-git changed it now as you suggested. Added a --secondary-background-color definition now in ha-style.html and referenced that one instead of --paper-grey-200. Also added the default colours for both.

bramkragten · 2017-07-27T12:13:08Z

If you want a proper dark theme you would need a few more adjustments, I don't have a fork right now so maybe you want to add this?

in ha-sidebar:
add to : host
background: var(--paper-listbox-background-color,var(--primary-background-color));

in home-assistant-main add:
color: var(--primary-text-color)

in ha-panel-dev-service change:
.attributes tr:nth-child(even) {
background-color:#eee
}
to:
.attributes tr:nth-child(even) {
background-color: var(--paper-listbox-background-color,#eee) (or a new one?)
}

ha-state-icon:
color: var(--paper-item-icon_-_color, #44739e)
I believe there is another one for active/on, that would need to be changed as well.

The svg in state-history-chart-timeline might need some... for example:
fill="var(--paper-dialog-background-color,var(--primary-background-color))" for the main rect... and
fill="var(--primary-text-color)" for the times underneath...

I think that would bring us pretty close. A few more thing to do in specific components probably.

bramkragten · 2017-07-27T12:29:18Z

ha-media_player-card

.controls {
...
background-color: var(--same as ha-card);
}
ha-state-label-badge could use some updates, but maybe okay to stay white...

allardhs · 2017-07-27T12:32:20Z

@bramkragten : Ok, going through them now -- but unsure on your home-assistant-main point. There's not a lot of styling in there.. https://github.com/home-assistant/home-assistant-polymer/blob/master/src/layouts/home-assistant-main.html

bramkragten · 2017-07-27T12:35:33Z

Thats for all the text that does not have explicit styling, it now just takes the browser default which is black, we would need to set a text color at some high point, normally you would use the body. But figgered home-assistant-main was high enough and there the custom styles are set aswell... So I would suggest adding a style block? @andrey-git suggestions?

allardhs · 2017-07-27T12:44:50Z

As to ha-state-icon, the active state is actually in state-badge.html (currently: #44739E) and the inactive is somewhere in bower_components/paper-dialog/paper-dialog.html (isn't that outside our reach?).
The --paper-item-icon_-_color you suggest is not defined, I think, so it will resort to #44739E which causes the change not to do anything.

bramkragten · 2017-07-27T12:50:20Z

That would mean we could just define --paper-item-icon_-_color in our styles config, let me try that.

State badge is found here:
https://github.com/home-assistant/home-assistant-polymer/blob/a1057681f1a33cffc79708085c1646d786712a87/src/components/entity/state-badge.html

ha-state-icon {
transition:color .3s ease-in-out;
color: var(--paper-item-icon_-_color, #44739e);
}

ha-state-icon[data-domain=binary_sensor][data-state=on],ha-state-icon[data-domain=light][data-state=on],ha-state-icon[data-domain=sun][data-state=above_horizon],ha-state-icon[data-domain=switch][data-state=on] {
color: var(--paper-item-icon_-_active_color, #fdd835)
}

allardhs · 2017-07-27T12:55:58Z

State badge is found here:

Yes, that's where it is defined as #44739E

I added some more changes as you suggested. As to the changes in home-assistant-main, state-history-chart-timeline, and ha-state-icon/state-badge, I'm afraid that's beyond me for now..

bramkragten · 2017-07-27T18:18:28Z

The charts are a different story indeed, Google charts makes them, I believe you can set options with colors, but I'm not familiair with it. Also not the biggest problem right now.

I'll look at the points left. Have to setup a development environment for the frontend...

bramkragten · 2017-07-27T22:59:21Z

For the state cards, I would prefer a different variable; paper-card-background-color.
So I can give them a different color then the background.

Thanks for your work btw. I have my def env setup, tomorrow I'll get on to this.

balloob · 2017-07-29T17:36:40Z

@ahofelt it looks like you're editing this via the GitHub online editor. Please test this locally.

balloob · 2017-07-29T17:37:12Z

@bramkragten the problem is that CSS variables does not have functions that SASS has like lighten or darken.

allardhs · 2017-07-30T07:40:01Z

@ahofelt it looks like you're editing this via the GitHub online editor. Please test this locally.

@balloob yes that's correct. I'm just a beginner and have my difficulties in understanding it all. But I do test it all locally before mirroring the changes manually in the GitHub online editor. Not the most efficient way but it works for me for now. Triple-checked everything for consistency. All working perfectly well locally. And most of the recent changes have been suggested by @bramkragten and I merely copy (and test) them. Apologies for my ignorance.

balloob · 2017-08-01T06:08:41Z

Alright, tested it locally and didn't see anything of the default theme be off, so all ok 👍 🐬 congratualtions on getting your first PR merged! 🎉

allardhs · 2017-08-01T12:07:05Z

Wonderful news. Thanks all, @balloob and especially @bramkragten. Now, let's get theming!

…assistant#361)

AHS added 2 commits July 27, 2017 13:14

Update partial-cards.html

638ed8e

Update ha-card.html

e70fb79

homeassistant added cla-needed cla-signed and removed cla-needed labels Jul 27, 2017

andrey-git reviewed Jul 27, 2017

View reviewed changes

AHS added 3 commits July 27, 2017 13:52

Update ha-card.html

31db2f7

Update ha-style.html

da07027

Update partial-cards.html

cfdc50c

Update ha-sidebar.html

839452b

homeassistant added the cla-signed label Jul 27, 2017

Update ha-panel-dev-service.html

627fd70

Update ha-media_player-card.html

33ef1bd

homeassistant added the cla-signed label Jul 27, 2017

Update ha-media_player-card.html

8f66fba

allardhs changed the title ~~Variable cards and background colours~~ Variable colours (cards, backgrounds, sidebar, ...) Jul 28, 2017

Update partial-cards.html

a6dba03

homeassistant added the cla-signed label Jul 28, 2017

Update ha-style.html

904b165

AHS added 17 commits July 29, 2017 14:06

Update ha-media_player-card.html

61e07e5

Update ha-state-label-badge.html

827c898

Update ha-card.html

0c25c50

Update ha-style.html

194834a

Update ha-style.html

de76a58

Update partial-cards.html

cd1ca02

Update ha-style.html

1ddd61a

Update ha-style.html

d6df3ed

Update ha-panel-dev-service.html

aea40a4

Update ha-panel-dev-state.html

9d1111f

Update state-badge.html

9d63f72

Update ha-label-badge.html

2c83fd0

Update home-assistant-main.html

af54766

Update ha-style.html

8ac25ff

Update ha-label-badge.html

52bd49d

Update ha-label-badge.html

e25eaeb

Update ha-style.html

c724c06

Update ha-panel-dev-state.html

1a36db4

homeassistant added the cla-signed label Aug 1, 2017

balloob approved these changes Aug 1, 2017

View reviewed changes

balloob merged commit 4af688a into home-assistant:master Aug 1, 2017

andrey-git mentioned this pull request Aug 2, 2017

Is there an option to template themes? andrey-git/home-assistant-custom-ui#26

Closed

bramkragten mentioned this pull request Feb 12, 2020

20200212.0 #4856

Merged

tkdrob pushed a commit to tkdrob/frontend that referenced this pull request Apr 20, 2021

Add info about command_ringer_mode and add beta tags as needed (home-…

9d30e8b

…assistant#361)

github-actions Bot locked and limited conversation to collaborators Jul 8, 2022

Conversation

allardhs commented Jul 27, 2017

Uh oh!

homeassistant commented Jul 27, 2017

Uh oh!

andrey-git Jul 27, 2017

Choose a reason for hiding this comment

Uh oh!

andrey-git Jul 27, 2017

Choose a reason for hiding this comment

Uh oh!

allardhs commented Jul 27, 2017

Uh oh!

bramkragten commented Jul 27, 2017

Uh oh!

bramkragten commented Jul 27, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

allardhs commented Jul 27, 2017

Uh oh!

bramkragten commented Jul 27, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

allardhs commented Jul 27, 2017

Uh oh!

bramkragten commented Jul 27, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

allardhs commented Jul 27, 2017

Uh oh!

bramkragten commented Jul 27, 2017

Uh oh!

bramkragten commented Jul 27, 2017

Uh oh!

balloob commented Jul 29, 2017

Uh oh!

balloob commented Jul 29, 2017

Uh oh!

allardhs commented Jul 30, 2017

Uh oh!

balloob commented Aug 1, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

allardhs commented Aug 1, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

bramkragten commented Jul 27, 2017 •

edited

Loading

bramkragten commented Jul 27, 2017 •

edited

Loading

bramkragten commented Jul 27, 2017 •

edited

Loading

balloob commented Aug 1, 2017 •

edited

Loading