So, for what it’s worth my dark green theme. I’ve only added items I needed to so it may not work if you’re using different cards etc. Tried to get the balance between keeping it dark and loosing some of the text in the development sections etc. 'cos primary-color is used for all sorts.
dark-green:
# Header
primary-color: 'rgb(51,103,103,1)'
dark-primary-color: 'var(--primary-color)'
text-primary-color: 'rgb(230,230,230,1)'
# Background - behind cards
primary-background-color: 'rgb(12,30,30,1)'
# Cards and card widgets
background-card-color: 'rgb(36,62,62,1)'
secondary-background-color: 'rgb(25,50,50,1)'
paper-card-background-color: 'var(--background-card-color)'
primary-text-color: 'rgb(245,245,245,0.7)'
ha-card-border-radius: 10px
paper-item-icon-color: 'rgb(66,144,144,1)'
paper-item-icon-active-color: 'rgb(255,217,90,1)'
paper-slider-active-color: 'var(--paper-item-icon-active-color)'
paper-slider-container-color: 'var(--primary-color)'
paper-slider-knob-color: 'var(--paper-item-icon-color)'
paper-slider-knob-start-color: 'var(--paper-slider-knob-color)'
paper-toggle-button-checked-button-color: 'var(--paper-item-icon-color)'
paper-toggle-button-unchecked-button-color: 'rgb(33,70,72,1)'
# Listbox & top right hamburger menu
paper-listbox-background-color: 'var(--background-card-color)'
# Fonts - not sure many of these work
primary-font-family: 'Varela Round,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-headline_-_font-size: 'var(--paper-font-title_-_font-size)'
paper-font-caption_-_font-family: 'var(--primary-font-family)'
paper-font-title_-_font-family: 'var(--primary-font-family)'
paper-font-title_-_font-size: 17px
# Sidebar & Dev screens
sidebar-selected-icon-color: 'var(--paper-item-icon-active-color)'
sidebar-selected-text-color: 'var(--paper-item-icon-active-color)'
sidebar-icon-color: 'var(--primary-color)'
light-primary-color: 'var(--paper-item-icon-color)'
lumo-base-color: 'var(--background-card-color)'
# Date picker
lumo-body-text-color: 'var(--text-primary-color)'
I’m using this just fine on Chrome (windows) and Android. On my iPad, everything goes white and transparent. No idea why. If anyone can tell me I’d appreciate it.
Some pictures:
My UI uses a number of custom components :-
- /customcards/github/maykar/compact-custom-header.js
- /customcards/github/thomasloven/card-tools.js
- /customcards/github/thomasloven/slider-entity-row.js
- /customcards/mini-media-player-bundle.js
- /customcards/github/custom-cards/tracker-card.js
- /customcards/eggy/vertical-stack-in-card.js
- /customcards/github/thomasloven/auto-entities.js
So big thanks to the authors. As well as those who’ve shared there themes on here already.