Dark Red Theme

Share your Projects! Themes
1

Here it is, my DarkRED…

SCREENSHOT

darkred_new
darkred_new1663×917 104 KB

SOURCE

darkred:
# Main colors that can be changed
  dark-primary-color: "#c66900"
  disabled-text-color: "#545454"
  divider-color: "rgba(255, 255, 255, 0.12)"
  light-primary-color: "#e06c6c"
  paper-card-background-color: "#1d1d1d"
  paper-grey-200: "#191919"
  paper-item-icon-color: "#d3d3d3"
  paper-listbox-background-color: "#202020"
  primary-background-color: "#303030"
  primary-color: "#d32f2f"
  primary-text-color: "#cfcfcf"
  secondary-background-color: "#131313"
  sidebar-text_-_background: "#62717b" 
# Colors based on variables, see above
  paper-card-header-color: "var(--paper-item-icon-color)" 
  paper-item-icon-active-color: "var(--primary-color)"
  paper-item-icon_-_color: "var(--primary-text-color)"
  paper-listbox-color: "var(--primary-text-color)"
  paper-grey-50: "var(--primary-text-color)"
  paper-slider-active-color: "var(--primary-color)"
  paper-slider-knob-color: "var(--primary-color)"
  paper-slider-knob-start-color: "var(--primary-color)"
  paper-slider-pin-color: "var(--primary-color)"
  paper-slider-secondary-color: "var(--light-primary-color)"
  paper-toggle-button-checked-ink-color: "var(--dark-primary-color)"
  paper-toggle-button-checked-button-color: "var(--primary-color)"
  paper-toggle-button-checked-bar-color: "var(--light-primary-color)"
  paper-toggle-button-unchecked-bar-color: "var(--primary-text-color)"
  secondary-text-color: "var(--primary-color)"
  table-row-background-color: "var(--paper-card-background-color)"
  table-row-alternative-background-color: "var(--sidebar-text_-_background)"
15 Likes
2

newb question but how would I implement this into my home assistant?

2 Likes
3

It looks great to me!
I would however add --label-badge-background-color and perhaps --label-badge-text-color as they are still very light. Unfortunately --paper-item-icon_-_color does not yet work (as it is currently overruled by a hardcoded value #000 with an opacity of 0.54 somewhere); we will somehow need to fix this in the future…

4

Can you share the Cyan please please?

5

Would anyone know why my “Dark Red” theme does not appear as it does for @broesie above? I copied the source information and created an automation so that when the sunset it would switch to the dark red theme however the screenshot below shows that only some of the colors seemed to have switched, did I miss something from the source code? I really like the dark red theme and was hoping to utilize it on my setup.

image
image852×649 52.9 KB

***Edit, NVM I think it’s because I am still on 0.50.2 and I probably need to be on 0.51

1 Like
6

Did it help updating to 0.51? I have the same issue.

7

Hello @broesie! How are you sir?

I really like your theme, thanks for sharing!

I was wondering if you could help me out: I was not able to find the correct parameters to change those texts colors on the Hassio tab:

image

Do you know if there is a way to change them to the main text color?

Thanks!

8

Would suggest to add this to also get the icons in the sidebar to show up nicely:

sidebar-icon-color: “var(–primary-text-color)”

9

@Schneider the CSS styles we can modify w/ themes are not currently applied to those fields. I’ve submitted an issue on github to hopefully have that addressed..

Edit:
I’ve submitted a PR that should fix the issue.
https://github.com/home-assistant/home-assistant-polymer/pull/2739

1 Like