I looked through the themes used in the markup and found quite a number that weren’t stated above. There are some areas of the UI that unfortunately “over” use some instead of having their own areas (similar to how sidebar was set up). There are a few other items that use the same identifier for both foreground and background items making it more difficult to really theme completely. Here is a night theme that works pretty well, as well as a template for creating themes. (Set all to fuchsia, and then theme through as you see fit.) You can also set app drawer width, etc… I left out the opacity as it doesn’t seem complete in its use. From what I can tell, anything with - in the name is for internal use.
Many of them have fall backs, which allows you do change a few and get “most” of the UI. Love the capability (thank you whoever did it) and recommend we do a consistency cleanup to really give of power / control over the UI. (For instance, many areas are hard coded with google-red…or have inconsistent items like primary-text-color and text-primary-color)
Here is a pretty complete version of a night view. If you see Juan’s youtube addition, you can jump back and forth with some simple automation. (included at the bottom)
ThemeNighttime:
# App Styles
app-drawer-layout-content-transition: none
app-drawer-width: 265px
app-drawer-scrim-background: rgba(0, 0, 0, 0.5)
app-toolbar-font-size: 20px
# Primary Colors
primary-text-color: '#cccccc' # app-toolbar, badge letter
secondary-text-color: '#969696'
disabled-text-color: '#646465'
primary-background-color: '#1e1e1e' # app-toolbar
secondary-background-color: '#252526' # more info header
light-primary-color: '#252526' # badge background
accent-color: '#cccccc'
error-color: 'red'
primary-color: '#252526' # Header bar background
text-primary-color: '#cccccc' # Header bar falls back to white
dark-primary-color: '#646465'
# Dialogs
paper-dialog-color: '#cccccc' # Falls back to primary-text-color
paper-dialog-button-color: '#1e1e1e' # Falls back to primary-color
paper-dialog-background-color: '#1e1e1e' # Falls back to primary-background-color
# Sidebar
sidebar-text-color: '#adadad'
sidebar-icon-color: '#adadad'
sidebar-selected-text-color: '#ffffff'
sidebar-selected-icon-color: '#ffffff'
sidebar-background-color: '#252526' # Falls back to primary-background-color
# Dividers
divider-color: '#616162'
# Items
paper-item-min-height: 48px
paper-item-selected-weight: bold
paper-item-disabled-color: '#646465' # Falls back to disabled-text-color
paper-item-icon-active-color: '#ffe680' # Falls back to #fdd835
paper-item-icon-width: 56px
paper-item-icon-color: '#5696d6' # Falls back to #44739e
# Icons
paper-icon-button-ink-color: '#5696d6' # Falls back to primary-text-color
paper-icon-button-disabled-text: '#646465' # Falls back to disabled-text-color
paper-icon-button-active-color: 'fuchsia' # Falls back to primary-color
paper-icon-button-inactive-color: 'fuchsia' # Falls back to primary-text-color
# Toggles
paper-toggle-button-invalid-ink-color: '#5696d6' # Falls back to error-color
paper-toggle-button-invalid-button-color: 'fuchsia' # Falls back to error-color
paper-toggle-button-invalid-bar-color: 'fuchsia' # Falls back to error-color
paper-toggle-button-label-color: 'fuchsia' # Falls back to primary-text-color
paper-toggle-button-checked-bar-color: '#7f9340' # Fall back to primary-color
paper-toggle-button-checked-button-color: '#ffe680' # Falls back to primary-color
paper-toggle-button-checked-ink-color: '#5696d6' # Falls back to primary-color
paper-toggle-button-unchecked-ink-color: '#5696d6' # Falls back to primary-text-color
paper-toggle-button-unchecked-button-color: '#1e1e1e' # Falls back to paper-grey-50
paper-toggle-button-unchecked-bar-color: '#404040' # Falls back to #000000
# Tabs
paper-tab-ink: '#5696d6' # Falls back to paper-yellow-a100
paper-tabs-selection-bar-color: '#5696d6' # Falls back to text-primary-color
# Listbox
paper-listbox-color: '#cccccc' # Falls back to primary-text-color
paper-listbox-background-color: '#252526' # Falls back to primary-background-color
# Cards
paper-card-header-color: '#cccccc' # Falls back to black
paper-card-background-color: '#252526' # Falls back to white
# States
state-icon-unavailable-color: 'fuchsia'
# Toast
paper-toast-background-color: '#1e1e1e' # Falls back to #323232
paper-toast-color: '#cccccc' # Falls back to #f1f1f1
Code to automatically switch…
- alias: Home Assistant Set Theme At Startup
hide_entity: true
initial_state: true
trigger:
- platform: homeassistant
event: start
- platform: state
entity_id: sun.sun
to: above_horizon
- platform: state
entity_id: sun.sun
to: below_horizon
action:
service: frontend.set_theme
data_template:
name: >
{% if states.sun.sun.state == "above_horizon" %}
default
{% else %}
ThemeNighttime
{% endif %}
Great question. I haven’t tried it. (My kiosk HW is coming in the mail) I do know that if you call reload_themes it will refresh automatically (did that a lot of times as I replaced elements and made the service call), so I assume set_theme will work in the same way. (Short answer, I believe so)
Like this theme but has the same problem I ran into with the states page when trying other dark themes and/or trying to modify them to my liking; text is unreadable:
Hi Chrisw - That is one of the items that I mentioned that is buggy in the current markup. Unfortunately, they use “primary-color” instead of “primary-text-color” for the text in the states view.
Hi klogg - Yes, I haven’t had the need for input_number yet. Here is the solution to that. One thing to note: the sliders have primary and secondary coloring allowing you to show how far off left or right you are from the default. I went ahead and applied consistent coloring, but it is an option.
# Slider
paper-slider-bar-color: transparent # Falls back to transparent
paper-slider-container-color: '#5696d6' # Falls back to paper-grey-400
paper-slider-font-color: '#cccccc' # Falls back to white
paper-slider-knob-color: '#1e1e1e' # Falls back to google-blue-700
paper-slider-active-color: '#5696d6' # Falls back to google-blue-700
paper-slider-secondary-color: '#5696d6' # Falls back to google-blue-300
paper-slider-disabled-active-color: '#646465' # Falls back to paper-grey-400
paper-slider-disabled-secondary-color: '#646465' # Falls back to paper-grey-400
paper-slider-height: 2px # Falls back to 2px
mayker
(maykar (pronounced "maker" with a southern accent))
160
Add these:
sidebar-icon-color: var(--text-primary-color, white)
sidebar-text-color: var(--text-primary-color, white)
sidebar-selected-text-color: white
sidebar-selected-icon-color: white
Just getting started with HA. My plan is to use 3 or 4 Amazon Fire tablets to display HA in various parts of the house. Now basic question. Can I have different themes running on each tablet display. Can this be done?
Great work on the themes that I have seen so far. Thanks everyone for contributing.
