PiotrMachowski/lovelace-html-card

Adapt to theme styling

jenseo opened this issue · 1 comments

Hey,
as a web developer I truly love this card! It makes it possible for me to break out a bit of the restraints I sometimes feel Home Assistant gives me.

I'm pretty new to Home Assistant and I find it a bit hard to wrap my head around the concepts sometimes, so maybe this is already possible to do, but I would love to be able to define the theme I'm running in Lovelace to the html cards. Right now, they kind of look a bit off compared to my other cards.

As I said, I'm a (frontend) developer myself, more accustomed to javascript than yaml so I usually do most of my logic in Node Red, which suits me well. From there, it's a piece of cake to pass the html to your card and have it displayed the way I'd like

Anyways, if you could point me in the right direction on where to read up on this, I could probably help out with a PR of the feature if it's not something already supported out of the box. Might well be that I have just missed it!

Thanks again!

Hi!
You can use css variables from your theme:

content: >
  <p style="background-color:var(--primary-text-color); color: var(--secondary-text-color);">
  Hello there!
  </p>
ignore_line_breaks: true
title: Colors test
type: 'custom:html-template-card'

But for more advanced stuff you can probably just create your own card :)