Synthwave inspired theme

benji · August 13, 2019, 7:35pm

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

jkindelspire · August 13, 2019, 7:40pm

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

benji · August 13, 2019, 9:31pm

Thanks! Please share screenshots if you do.

Matt_Barnes · August 16, 2019, 12:13pm

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?

benji · August 16, 2019, 12:33pm

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.

HypnoToad · August 16, 2019, 12:39pm

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

Matt_Barnes · August 16, 2019, 12:46pm

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

benji · August 16, 2019, 12:50pm

github.com

bbbenji/synthwave-hass/blob/db2d52301e85a18650576b98153eaeec9c3b62ef/themes/synthwave.yaml#L19


primary-color: '#2a2139'
dark-primary-color: '#f92aad'
light-primary-color: '#241b2f'
accent-color: '#f92aad'
divider-color: '#49549539'
paper-dialog-button-color: '#fff'

###

# background and sidebar
card-background-color: '#34294f88'
paper-card-background-color: 'var(--card-background-color)'
primary-background-color: 'var(--primary-color)' 
secondary-background-color: 'var(--light-primary-color)' # behind the cards on state
ha-card-border-radius: '0'

# sidebar menu
sidebar-text-color: 'var(--secondary-text-color)'
# sidebar-background-color: 'var(--paper-listbox-background-color)' # backward compatible with existing themes
sidebar-icon-color: 'var(--secondary-text-color)'
sidebar-selected-text-color: 'var(--primary-text-color)'

Matt_Barnes · August 16, 2019, 1:36pm

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.

Matt_Barnes · August 16, 2019, 1:42pm

made no difference sadly.

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

benji · August 16, 2019, 1:50pm

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.

benji · August 16, 2019, 1:52pm

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

Matt_Barnes · August 16, 2019, 2:10pm

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.

Matt_Barnes · August 16, 2019, 2:31pm

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

Will bump my main thread thanks for the help though!

flexage · August 16, 2019, 6:32pm

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

flexage · August 16, 2019, 7:13pm

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.

benji · August 18, 2019, 4:38pm

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.

brotherlegend · August 20, 2019, 2:27pm

wonderful , i love this purple

atomicpapa · August 20, 2019, 9:56pm

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…

notice the missing …

benji · August 21, 2019, 7:40am

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.