New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Navigation pane doesn't respect chosen theme #5524
Comments
The variable for that is Quickest fix would probably be to add this line to your above themes:
|
That sorted it :) Thankyou. |
Hi Sean, that works, thanks a bunch! |
@GoldilokZ There has been an ongoing effort to clean up and reduce the amount of theme variables necessary. Seems that this change was made during a bugfix to the sidebar which is why it happened during a point update. My understanding is that theme variables prefixed with "paper" are getting phased out. In the short term this might break some things in some older / outdated community themes, but these are usually easy to fix. And in the long run it will make themes much easier to create, modify, and maintain. For example here's how much simpler Bram's
@Mariusthvdb I'm pretty sure the variable for those dropdowns use In older themes the variable was |
Once again, thankyou SeanPM5 :) |
Theme variables aren't really well documented currently. The most accurate and up-to-date variables would probably be found in these files: |
This should be fixed by now. |
Checklist
Yes. This version has the problem
Yes...annoyingly I had to sign back into most of my other websites and reconfigure youtube etc etc.
Tested in firefox and chrome. According to a new post I made on reddit /r/homeassistant I'm not the only one either
The problem
The navigation pane since 0.108.03 is no longer respecting the chosen theme.
I use a dark theme, and the background etc of the navigation pane is white, whilst the lovelace cards etc are using the dark theme background (dark grey in colour)
Expected behavior
Navigation pane is the same colour as the lovelace card pages
Steps to reproduce
Config listed below in the config section.
Environment
Problem-relevant configuration
themes:
solarized_dark:
primary-color: "#586e75"
accent-color: "#002b36"
dark-primary-color: "#93a1a1"
light-primary-color: "var(--accent-color)"
primary-text-color: "#839496"
text-primary-color: "var(--primary-text-color)"
secondary-text-color: "#586e75"
disabled-text-color: "#7F848E"
label-badge-border-color: "green"
primary-background-color: "#002b36"
secondary-background-color: "#073642"
divider-color: "rgba(0, 0, 0, .12)"
table-row-background-color: "#002b36"
table-row-alternative-background-color: "#073642"
paper-listbox-color: "var(--primary-color)"
paper-listbox-background-color: "var(--accent-color)"
paper-grey-50: "var(--primary-text-color)"
paper-grey-200: "var(--accent-color)"
paper-card-header-color: "var(--dark-primary-color)"
paper-card-background-color: "var(--accent-color)"
paper-dialog-background-color: "#002b36"
paper-item-icon-color: "var(--primary-text-color)"
paper-item-icon-active-color: "#b58900"
paper-item-icon_-color: "#859900"
paper-item-selected-color: "var(--accent-color)"
paper-item-selected-_background-color: "#cb4b16"
paper-tabs-selection-bar-color: "#859900"
label-badge-red: "#93a1a1"
label-badge-text-color: "var(--primary-text-color)"
label-badge-background-color: "var(--accent-color)"
paper-toggle-button-checked-button-color: "#268bd2"
paper-toggle-button-checked-bar-color: "var(--primary-color)"
paper-toggle-button-checked-ink-color: "#268bd2"
paper-toggle-button-unchecked-button-color: "var(--secondary-background-color)"
paper-toggle-button-unchecked-bar-color: "var(--secondary-text-color)"
paper-toggle-button-unchecked-ink-color: "var(--secondary-background-color)"
paper-slider-knob-color: "var(--secondary-text-color)"
paper-slider-knob-start-color: "var(--secondary-text-color)"
paper-slider-pin-color: "var(--secondary-text-color)"
paper-slider-active-color: "var(--secondary-text-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)"
paper-slider-disabled-secondary-color: "var(--disabled-text-color)"
sidebar-selected-icon-color: 'var(--secondary-text-color)'
sidebar-icon-color: 'var(--primary-text-color)'
google-red-500: "#dc322f"
google-green-500: "#859900"
Javascript errors shown in your browser console/inspector
Additional information
The text was updated successfully, but these errors were encountered: