Synthwave inspired theme

no problemo!!

Any change you could share your homeassistant config? I really love what you have done with the xiaomi vacuum map and the graphs for download speed and kWh and would love to reproduce it!

Thanks !

1 Like

This is probably very simple but i’m not too familiar with the labeling just yet. Can you let me know what CSS value controls the toggle switches? They’re showing up very dark when checked / on and would like to adjust the color

thanks in advance.
44

  switch-checked-color: 'var(--dark-primary-color)'
  switch-unchecked-color: '#FFF'
  switch-unchecked-button-color: 'var(--disabled-text-color)'
  switch-unchecked-track-color: 'var(--disabled-text-color)'

Thanks lots weppa. Man it looks a lot better now :slight_smile:

Was thinking the theme suited the OP needs but didn’t see any toggle switches. Didn’t think an addition was needed as usually just all included. No stranger to CSS but will read up on HA attributes soon enough

Edit: spell check on your name and also to say 10 months since your last post and you fix mine in a jiffy. Good work :slight_smile:

@benji
Lovely theme. I see you got an air purifier card as well. Could you upload the animated GIF somewhere?

For others with the issue - the last update added new theme variables.
Change primary color to white and add these.

</s> <s> # primary-color: "#8978a0"</s> <s> primary-color: "#ffffff"</s> <s> app-header-text-color: "#ffffff"</s> <s> app-header-background-color: "#8978a0"</s> <s>

I then used this to change the background of the dropdown menus.
material-background-color: "#8978a0"
Nevermind. I suck. Its not working now.

Are you running the latest version of the theme and JS?


Should be fixed in the theme now. You won’t need a work around.

Take a look here for the vacuum: https://github.com/macbury/SmartHouse/tree/master/home-assistant/www/custom-lovelace/vacuum

As for the graphs, I used mini-graph-card: https://github.com/kalkih/mini-graph-card

Sound job man. Updated with current CSS and looking good.

I noted quickly though while going through the post, how are you doing the red to blue fade below your ‘hamburger menu’? I may be doing it incorrectly but I just overwrote CSS as i’m not fully clued in on the auto updater yet. Should I update .js also?

Thanks, and that’s right. You need to install the optional JS file: https://github.com/bbbenji/synthwave-hass-extras

Again top man. It looks slick.

Thanks for the quick update benji. Keep em coming

Hey benji, I’ve updated the theme from HACS so i can stay on top of updates etc. Just want to see if you updated anything recently as the toggles have reverted back to being very dark when turned off. I’m on mobile so hopefully the screenshot shows what I mean

.

Just pushed a fix for that. Thanks for letting me know!

1 Like

@Benji - awesome work on this, here’s my home page, but still working on it

is there any easy way to make a mobile version, so that it just stacks left to right ? or better a different page with cut down info ?

1 Like

That looks great!

Take a look at these two custom cards:


They have helped me organize and display my cards in the order I wanted. Perhaps they will help you too, especially the first one.

1 Like

cool background, would u like share that? Thanks.

thanks for sharing, for now the “Home Assitant”(in the top left) how to make glow as the demo?
and how to make the top navi narrow and set the Time in the top right?
thanks again