Clear Theme


#21

Yes it CAN be done, but it’s a hack:
image

I added this one to my lovelace config:

resources:
  - type: css
    url: /local/styles.css?v=0.1

(the version is in case I update the css)
Then I created styles.css in local, and with this as content:

body {
  --primary-color: white !important;
}

(It was after an evening of trial and error and bits of information here and there on the web)

About the Harmony card: thanks! It changes with the activity, so when the radio plays: this f.i. is shown:
image


#22

… but I might just dump the cards with photos after all, to have a cleaner look…


#23

@Nitram that looks great! What font are you using for your Automatisering card? I’ve managed to import Open Sans but I’m finding that line spacing is occasionally an issue


#24

Thanks! It’s Raleway: https://fonts.google.com/specimen/Raleway


#25

“Canary” (alarm) and some other standard cards seem to not care about custom fonts, I have to look into that…


#26

Can you add a weblink or a section to an entities card and check if it’s readable?


#27

You could use a markdown card, and a vertical or horizontal stack card, not sure if you can get closer to that than this. What do you want to do with it?


#28

You can switch them with an automation after sunset. I just found no way to switch the background with an automation yet.


#29

Is this how you managed to change the font globally as well?


#30

I have the problem that these parts are all in primary-color, therefore I cannot set the primary-color to the same color as the card background without loosing the ability to use weblinks / section titles:


#31

Yes, by adding this to the resources in the Lovelace config, it also changed the font on other places:

resources:
  - type: css
    url: 'https://fonts.googleapis.com/css?family=Raleway'

#32

Ok, sorry, I misunderstood the question!
Tried a link in a card, and it’s also white and unreadable. It looks like a challenge :slight_smile:


#33

OK, I’m not quite getting the same result as you -

Note on the left menu, my text is still coming up in Roboto whilst yours appears in Raleway.
Have tried a few methods - in Lovelace:

  - url: /local/styles.css?v=0.05
    type: css
  - url: 'https://fonts.googleapis.com/css?family=Raleway'
    type: css

And in /config/www/styles.css:

@import url('https://fonts.googleapis.com/css?family=Raleway');
body {
  font-family: Raleway !important;
}
paper-icon-item span {
  font-family: Raleway !important;
}

Plus deleting caches and refreshing etc - there’s some elements that always seem to be overridden, not sure how to get past that…


Lovelace Fonts
#34

I don’t think the styles.css has any value here. The only thing I did, was adding the resource to Lovelace and changed the font there. But maybe you didn’t set it everywhere in the theme, like this?

  primary-font-family: 'Raleway,sans-serif'
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"

#35

Btw, nice work. Some good ideas here, like the Recycle Bin days! :slight_smile:


#36

Thanks! It was a battle to get that working because my council has no API and the results are all generated in-line by javascript - see here: https://community.home-assistant.io/t/bash-scripting-torquay-refuse-collection-sensor/100376/2

I also have a dark theme but it’s not quite as refined as @naofireblade’s:

I totally forgot to add the fonts to my theme in config.yaml though, will give that a go now! Thanks!


#37

Success!

Font: Poppins


#38

Thank you!
Can you also share your config for your presence card at the top right?


#39

That one also has a button to open a text field where I can enter a reminder for a person and this person get’s a notification as soon has she comes home.

You first have to set up a device tracker for each person: https://www.home-assistant.io/components/device_tracker/

After that you can include the card.

The Card

type: horizontal-stack
title: Familie
cards:
  - type: glance
    columns: 2
    entities:
      - device_tracker.iphone_user1
      - input_text.reminder_user1
    show_name: false
  - type: glance
    columns: 2
    entities:
      - device_tracker.iphone_user2
      - input_text.reminder_user2
    show_name: false

Configuration for Input Field

input_text:
  reminder_user1:
    name: "Reminder"
  reminder_user2:
    name: "Reminder"

Automation for Reminder

- alias: Reminder for User 1
  trigger:
  - platform: state
    entity_id: device_tracker.iphone_user1
    to: home
  condition: []
  action:
  - service: notify.ios_iphone_user1
    data:
      title: Reminder
      message: "{{ states.input_text.reminder_user1.state }}"
  - service: input_text.set_value
    data_template:
      entity_id: input_text.reminder_user1
      value: ''

- alias: Reminder for User 2
  trigger:
  - platform: state
    entity_id: device_tracker.iphone_user2
    to: home
  condition: []
  action:
  - service: notify.ios_iphone_user2
    data:
      title: Reminder
      message: "{{ states.input_text.reminder_user2.state }}"
  - service: input_text.set_value
    data_template:
      entity_id: input_text.reminder_user2
      value: ''

#40

Is there another way to call the background image into Lovelace? I use an automation to select my theme based on day/night mode and I want to be able to automagically switch between clear light and clear dark with their associated backgrounds. If I put “background: center / cover no-repeat url(”/local/background.jpeg") fixed" into the Lovelace config it will apply to ALL themes.