I thought you might be.
You can edit your userContent.css file and add this to turn off the spinners:
input[type='number'] {
-moz-appearance:textfield !important;
}
Restart firefox for it to take effect.
1 Like
Thanks! Problem solved.
1 Like
I am trying to incorporate the midnight theme into my instance of HomeAssistant with no success.
A portion of my config file looks like:
customize: !include customize.yaml
# Enables the frontend
frontend:
themes: !include themes.yaml
midnight:
# Enables configuration UI
config:
The themes.yaml file looks like:
1 midnight:
2 # Main colors
3 primary-color: '#5294E2' # Header
4 accent-color: '#E45E65' # Accent color
5 dark-primary-color: 'var(--accent-color)' # Hyperlinks
6 light-primary-color: 'var(--accent-color)' # Horizontal line in about
7
8 # Text colors
9 primary-text-color: '#FFFFFF' # Primary text colour, here is referencing dark-primary-color
10 text-primary-color: 'var(--primary-text-color)' # Primary text colour
11 secondary-text-color: '#5294E2' # For secondary titles in more info boxes etc.
12 disabled-text-color: '#7F848E' # Disabled text colour
13 label-badge-border-color: 'green' # Label badge border, just a reference value
14
15 # Background colors
16 primary-background-color: '#383C45' # Settings background
17 secondary-background-color: '#383C45' # Main card UI background
18 divider-color: 'rgba(0, 0, 0, .12)' # Divider
19
20 # Table rows
21 table-row-background-color: '#353840' # Table row
22 table-row-alternative-background-color: '#3E424B' # Table row alternative
23
24 # Nav Menu
25 paper-listbox-color: 'var(--primary-color)' # Navigation menu selection hoover
26 paper-listbox-background-color: '#2E333A' # Navigation menu background
27 paper-grey-50: 'var(--primary-text-color)'
28 paper-grey-200: '#414A59' # Navigation menu selection
29
30 # Paper card
31 paper-card-header-color: 'var(--accent-color)' # Card header text colour
32 paper-card-background-color: '#434954' # Card background colour
33 paper-dialog-background-color: '#434954' # Card dialog background colour
34 paper-item-icon-color: 'var(--primary-text-color)' # Icon color
35 paper-item-icon-active-color: '#F9C536' # Icon color active
36 paper-item-icon_-_color: 'green'
37 paper-item-selected_-_background-color: '#434954' # Popup item select
38 paper-tabs-selection-bar-color: 'green'
39
40 # Labels
41 label-badge-red: 'var(--accent-color)' # References the brand colour label badge border
42 label-badge-text-color: 'var(--primary-text-color)' # Now same as label badge border but that's a matter of taste
43 label-badge-background-color: '#2E333A' # Same, but can also be set to transparent here
44
45 # Switches
46 paper-toggle-button-checked-button-color: 'var(--accent-color)'
47 paper-toggle-button-checked-bar-color: 'var(--accent-color)'
48 paper-toggle-button-checked-ink-color: 'var(--accent-color)'
49 paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
50 paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
51 paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'
52
53 # Sliders
54 paper-slider-knob-color: 'var(--accent-color)'
55 paper-slider-knob-start-color: 'var(--accent-color)'
56 paper-slider-pin-color: 'var(--accent-color)'
Iâm not having much success in getting the theme to work. I have tried removing:
midnight:
from the config file but that doesnât work either.
Can anyone spot my error?
If you have an include! statement for themes: donât put the theme under it. This will generate an error.
Do not do this:
frontend:
themes: !include themes.yaml
midnight:
Do this:
frontend:
themes: !include themes.yaml
But as you have a valid themes file correctly included the theme should be available.
Go to your profile (click on the circle with your user-name initials upper left), select the theme.
IF you want this to be controlled by an automation select âBackend selectedâ here.
That was my issue. I didnât go in through the UI to select the theme. I thought it would load the midnight theme on restart.
Thanks for your help!
Just for information, the spinner thing should be fixed in 0.93.
1 Like
Just a small tip: change the sidebar icons to white. Makes it look much better. You can do this by adding
sidebar-icon-color: 'var(--primary-text-color)'
anywhere in the theme. Below is a screenshot (blurred the title as it has my address on it)
How do you change the text colour for the âReload Coreâ, âReload Automationâ, etc? Also seems to be used in the Logbook section. Hyperlinks?
It uses primary-color: for that text (i.e. the same as the banner at the top of HA).
Is there a way to change it?
No.
(10 character padding).
sidebar-icon-color: # <---- This one, other related below.
sidebar-text-color:
sidebar-selected-background-color:
sidebar-selected-icon-color:
sidebar-selected-text-color:Sorry, I wasnât specific enough. I meant to ask for the background.
I can set the sidebars background with
paper-listbox-background-color
but the background of this top portion doesnât change.
Thatâs controlled by:
primary-background-color:
Hi, I noticed issues with the latest version of ha (0.99.0). There are some new views (unused devices and device registration) that use tables. This theme does not work there.
Do you guys have any solutions?
PS: Thanks for this great theme 
3 Likes
Found it!
Use
card-background-color: 'var(--primary-background-color)'
3 Likes
Thanks, came here just for this.
Is there any interest in putting this up on github so that we can collaborate on updates and keep track of breaking changes like that?
Iâm interested