Wanted to share a theme I’ve been creating for my phone that has an OLED screen. True black, HA blue, and white are the three colors used, so it looks great in the HA app or as a web app (I prefer a web app, for the cleanest look).
7 Likes
Webapp instance as well (as I could only post one pic in my original post:
Still tweaking, but code below:
oled:
primary-color: 'black'
accent-color: '#03A9F4'
dark-primary-color: 'var(--accent-color)'
light-primary-color: 'var(--accent-color)'
primary-text-color: '#FFFFFF'
text-primary-color: 'var(--primary-text-color)'
secondary-text-color: '#03A9F4'
disabled-text-color: 'white'
label-badge-border-color: 'green'
sidebar-icon-color: 'black'
primary-background-color: 'black'
secondary-background-color: '#222222'
divider-color: 'black'
table-row-background-color: '#292929'
table-row-alternative-background-color: '#292929'
paper-listbox-color: 'black'
paper-listbox-background-color: '#03A9F4'
paper-grey-50: 'black'
paper-grey-200: 'black'
paper-card-header-color: 'red'
paper-card-background-color: 'black'
paper-dialog-background-color: 'black'
paper-item-icon-color: 'var(--primary-text-color)'
paper-item-icon-active-color: '#03A9F4'
paper-item-icon_-_color: 'green'
paper-item-selected_-_background-color: '#292929'
paper-tabs-selection-bar-color: 'green'
label-badge-red: 'var(--accent-color)'
label-badge-text-color: 'var(--primary-text-color)'
label-badge-background-color: '#222222'
paper-toggle-button-checked-button-color: 'var(--accent-color)'
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
paper-toggle-button-checked-ink-color: 'var(--accent-color)'
paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-knob-start-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--accent-color)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
paper-slider-secondary-color: 'var(--secondary-background-color)'
paper-slider-disabled-active-color: 'var(--disabled-text-color)'
google-red-500: '#b58e31'
google-green-500: '#2980b9'
10 Likes
Very nice theme. I was actually thinking in making one for my phone as well. Now I don’t have to. Thank you.
One suggestion, I would change the primary-text-color from FFFFFF to F2F2F2. If you have it fully white on a black background, it makes the icons and the text look way too bright.
Very nice looking theme, unfortunately Inhave already themed my instance of HA. But I might experiment with this in the future. Blacks on OLED aren’t great for the eyes when the screen brightness is too low (at least in my case) so I’d probably make it more greyish like my current theme.
But I like it anyhow, thanks for sharing.
very good theme, but there are text that is not visible, in the registry for example
Thanks for the feedback. My purpose in making the them was to utilize the OLED’s capability to actually display true blacks and thus have the UI seamlessly blend in with the phone.
Yes. There are some areas where the color of the font can’t be changed.
@aRVAthrowaway
Have any updates on your theme?
I’ve changed the blue to red, but there are places I can’t see any text…
The closest I’ve seen is using a trick I used, but at least you can read the text…here not perfect and it was a while back.