Synthwave inspired theme

I have been working on this theme inspired by the VS Code theme Synthwave '84. A few people asked for it and I promised that when I found some free time I’d clean it up and share.

Well here it is, it’s not done yet, spent already too much time on it. However, it’s usable with a few bugs (see repo).

This theme is a little different than most in that it provides a .js to do some deeper modifications that are not possible using a regular theme config. In this case, check out the header in the sidebar.

Would be awesome if I got some PR’s in!


Enjoy.

https://i.imgur.com/bLhZFHy.png

https://i.imgur.com/xSRMqr4.png

9 Likes

Looks great! The color scheme is nice. I may give it a try.

Thanks! Please share screenshots if you do.

Love this theme.

Any idea why this theme and all other themes for me still show white background cards despite showing the correct colour on the background of boxes such as the ones on the homescreen?

I started a topic here, but no luck. Wondered if you had had any problems while developing yours?

I did not run into this… it should just work as the color variable is defined. Try logging into lovelace using incognito mode in your browser. Does it work there? If not it may be some custom lovelace plugin that is causing your issue.

Have you tried different browsers? I found a while back that layouts were broken on Firefox yet were working fine on Chromium.

Thanks.

It is the same on multiple devices and in incognito mode.

Bizarre.

Can I just check, which line of code in your theme determines the background colour of a card? I am struggling to see any code that references the colour of this home box (the lighter colour) which should also be the card background colour but is not on my install for some reason.

Capture

seems a really long number vs all the others and if I put it into the below it is not recognised. Wondered if this is part of my problem

https://www.color-hex.com/color/

will try without the extra 88.

made no difference sadly.

really bugging me now. Not an issue with your theme, just another bug in HA i think

The last two characters are an alpha value. Sure, you can try to change it to #2f2445. I’m planning on it anyway. Let me know if it helps. However, I’m doubtful.

Also make sure to either clear cache after editing.

Are you using any custom Lovelace cards? Try disabling them and see if it makes a difference.

Thanks,

The only custom cards are the below:

title: HOME

    
resources:
  #weather card
  - url: /local/simple-weather-card.bundle.js?v=0.3.0
    type: module
    
  #colour wheel custom card    
  - url: /local/light-entity-card.js
    type: js

    

will give it a go disabling them.

Nope, custom cards disabled. cache cleared. restarted. still white cards.

Will bump my main thread thanks for the help though!

Love this theme! I was really impressed when I saw the vscode synthwave theme a couple of months ago, and I’m happy to be able to use it on ha.

Aside from a couple of text colours which have been missed here and there, it works great.

May I ask, how did you make your graphs for your speedtest? They have the cool neon pink and cyan lines, that are filled.

@benji I tried to recreate it with the lovelace history graph, but it doesn’t look at all the same, and the colours are the default home assistant graph colours (teal and red).

Edit: spelling

Nm, found a custom component “Mini Graph Card” (https://github.com/kalkih/mini-graph-card) that seems to be similar if not the same. I installed it with HACS.

You got it:) Mind sharing a screenshot of your setup?

Yea, unfortunately dark themes don’t play well with HASS yet. However the theme includes an optional extras lovelace plugin which “tries” to fix some shortcomings.

wonderful , i love this purple

I love this theme but there seem to be a couple of problems

In Developer Tools > States the entities are way too dark

and in HACS the detail screen for any specific item looks like this…

image

notice the missing …

image

Thanks! This is something I hope to fix with the extras package. Would you mind posting this as on issue on the GitHub repo? It’ll help me keep track of problems like this.