-
Notifications
You must be signed in to change notification settings - Fork 2.5k
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
Accent Colors #4147
Comments
Suggestion: Since pretty much every app is offering a dark and light mode themes and the popularity of dark theme demands have been increasingly growing, this would be a great option as well for HA as we are looking toward the future. 2 different HA base theme structures with the correct text color variables to be visible on every text field combined with the accent color choices seems like a win/win. |
Couldn't agree more @Dino-Tech. An official dark theme is something I've personally wanted for a long time. Previously it was a "nice to have" feature, but with iOS, Android, macOS, and Windows all having system-wide dark modes now, I feel that it's almost a necessity these days. I proposed accent colors first since I believe a theme cleanup would make this a lot easier. The idea being that if a lot of variables can get standardized around the Accent Colors concept, it'd make it possible to re-use like 95% of code between a light and dark theme. At that point the dark mode toggle would only have to change like a handful of variables relating to backgrounds and text colors: I haven't really done a deep dive into all the theme variables yet, so I'm sure that I'm missing some things and it probably won't be quite that easy, but that's the general idea. A few reasons that dark mode would be awesome:
|
I think these are great ideas, I would also like to reduce our official theming variables to: Text stylesThe text styles (referred to as
Here are the example usages of
Theme
|
Sounds great! Since the release of Android 10, I have been working on a dark theme structure that is designed to reuse color variables and shading, focusing on accent colors for personal preference. The accent color changes are applied with a button click and the results have been pretty consistent with multiple colors I've tried so far, which means this is very achievable. I am by no means a dev or programmer, but feel free to grab any inspiration if needed https://github.com/Dino-Tech/Home-Assistant-Main and I'll be glad to help @SeanPM5 if you need anything. |
Thanks, I will take a look tomorrow when I have a little more free time. I know that you like to fully customize everything so I'm sure that'll be a huge help in listing all the possible variables 😄 Came up with a mostly working initial version yesterday. Still needs some tweaks but I'm pretty happy with the overall style so far. Here is how it would look on the demo site: Seems that the only tricky aspect of this idea will be the So I think when user selects an accent color, it needs to generate a darker and lighter shade of their selected accent color (found this tool which does that). Not sure this is too important anyway, since these two variables seem rarely used from what I can tell? This is how I have them defined for now:
The rest of this seems like it'll be fairly straightforward, just a little time consuming. I will share the theme here once I make some more progress and clean things up a bit, then it can be revised based on feedback. |
Also, take a look here https://github.com/chipriley/lovelace-css-values hasn't been updated for a few months, but was a great reference tool back then. Specifically, the |
Forgot to close this earlier, Bram implemented in 0.114 / #6430 and it's awesome 🎉 🎉 🎉 |
Problem: Themes aren't user-friendly
frontend:
and that everything is indented properly etc. Then you either have to restart or call thefrontend.reload_themes
service.This stuff isn't too hard for people like you and I who update regularly and follow changelogs etc. Anybody that's reading this post is more of an advanced user. But for normal, regular people it's too difficult - there's absolutely zero chance that your parents could figure this stuff out for example.
Solution: Accent Colors
macOS, Windows, and the latest version of Android have this concept of accent colors. Popular websites like Twitter and Tumblr also have this when you customize your profile on those sites.
There'd be maybe like ~10 curated colors that look good and provide variety. User clicks on a color and it'd change the header background, hyperlinks, toggle switches, input sliders, buttons, etc to that color. Here is a mockup of how this could look on the profile page:
You'll notice a color wheel button here too. This allows the user to select literally any color and not just the predefined ones. Everyone is familiar with this already since that's how you change lights in Home Assistant. As you move the wheel, the theme would be updated in real time.
Clear benefits to this approach. It's literally one click to customize your theme, it doesn't require any text editors or YAML, it's so simple there's no documentation needed, it will always look good, it won't break or have issues.
What happens to themes?
Themes won't go away, but would now fall under the "Advanced mode" umbrella. This better aligns it with the Home Assistant 1.0 "Simple mode" vision:
It's a safe assumption that almost everyone using themes today is familiar with YAML and would have advanced mode toggled on, so there's really no change for existing users.
If there isn't any opposition to this proposal, there's still a few things that need to be figured out. How would this be handled in the card editors? If a user has advanced mode on and it shows both "Theme" and "Accent Color" options, which one gets priority / how is that handled? etc.
The text was updated successfully, but these errors were encountered: