Clear Theme Dark

Share your Projects! Themes
#22

Thanks for this. Looks pretty great. I do have one question:

When using the section label in an entities list. It appears to be using the ‘primary-color’ for the label. So as an example, the kitchen label is so close to the background color its hard to actually read.

entities:
- label: Kitchen
  type: section
- entity: switch.cabinet_lights
  name: Cabinet
- entity: switch.kitchen_main_light
  name: Main
show_header_toggle: false
title: Indoor
type: entities

Its the same for the hyperlinks in the profile page, where you select themes too. Did I mess something up? Any idea on how to fix that? I tried a bunch of things, and didn’t get anywhere.

#23

You can set the primary-color to a brighter one but this will also affect the header background.
You can then change the header background with the latest release of custom_compact_header which allows a custom color for the header beside the primary-color.

1 Like
#24

I’m sorry, but where do you save the theme file and do you just save it as a .css?

#25

Looks absolutely beautiful but I’m having an issue and I’m not sure if it’s been fixed already. I read the above posts…

image
image736×546 32 KB

All the links are dark and thusly hard to read. Is this happening to other people as well? Thanks!

2 Likes
#26

yep… it’s the same for all of us

1 Like
#27

yep… it’s the same for all of us

Is this something which can be solved?

#28

This is what I did:

In my theme file, I changed the primary color.

  # Header
  #primary-color: '#363941'                                                        # Background
  primary-color: 'var(--text-medium-light-color)'                         # Background

Then to fix the header, in the raw editor, or in YAML mode, first add to the default view:

views:
  cards:
      - type: 'custom:compact-custom-header'
        background: '#363941'
        main_config: true

Every additional view only needs the type added:

cards:
  - type: 'custom:compact-custom-header'

It’s not perfect, but it is close enough. The compact-custom-header is necessary to change the background color.

1 Like
#29

Hi,

looks really good.
But I can’t get it working.

When I add it to my ui-lovelace.yaml:

title: home
    views:
          - title: home
            theme: clear-dark
            .....

just the cards will get the dark mode. The rest stays the same.

I have no idea, where to add the theme: clear-dark so that it applies to the whole UI.

Perhaps someone could give me a hint.

#30

Theming needs to be done in your configuration.yaml
Check out:

#31

For whatever reason I can’t get the tilecards working. Instructions seem straight forward, but nothing happens after install.

Path: www>tilescard>tiles-card.js

Added to lovelace config:

resources:
  - url: /local/tilescard/tiles-card.js?v=0.1
    type: js
#32

[quote=“naofireblade, post:5, topic:100960, full:true”]
That’s a problem in home assistant. You have to change primary-color to a brighter one. But that will also change the color of your header. There is no way to set these to colors distinct.
[/quote]That really sucks. There is a few examples of this (fundamental colors being used for text) that really need to be addressed at some point. I can see why would be focussing on all the awesome integration work they do instead… I might try to isolate these examples in the code and suggest a change

1 Like
#33

What happened to this:

paper-toggle-button-checked-button-color

Active toggle uses the primary (header) color, why?

#34

Looks like they are forcing use of the primary color for buttons.

#35

End of the dark themes. nonone will use anything dark because active toggle will look like unactive…
Why am I not suprised?

#36

Just found they are going to add it back next release
https://github.com/home-assistant/home-assistant-polymer/pull/4017

#37

Is it possible to ad this theme to HACS?

#38

I am a starting home assistant user. This theme looks good. Where should the lines listed under Theme be added. Is this in configuration.yaml?

#39

Can someone confirm if 0.101 fixes the issue with primary color as reported above?

Thanks in advance.

#40

Answering to myself (in case someone else is wondering): No, the primary color issue seems to be present even with the 0.101 version.

#41

I was wondering, thanks for the update. Too bad though :frowning: