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: