I am making a dashboard and it is becoming quite complex, I am doing some custom stuff with card-mod etc. I have to manage so many colour values it is painful. Is the best way to set variables with a theme?
#How to manage color values? I am new to dashboards and customizing.
supple tide
cold lodge
I'd say simply adding the variables to the theme with an appropriate naming convention is all you need. For example, one of my themes has ```yaml
google-red: "#F54436"
google-green: "#01C852"
google-yellow: "#FF9101"
google-blue: "#3D5AFE"
google-violet: "#661FFF"
google-grey: "#BBBBBB"
color-red: "245, 68, 54"
color-green: "1, 200, 82"
color-yellow: "255, 145, 1"
color-blue: "61, 90, 254"
color-purple: "102, 31, 255"
color-grey: "187, 187, 187"
color-pink: "233, 30, 99"
color-theme: "51,51,51"
oh damn great tip! I didn't know you could do this but this is super helpful
the only other issue I have is dark mode totally messing it up, is it possible to define light and dark mode colors in this way?
my current solution is to force one or the other, but down the line I could try and make it adaptable
cold lodge
I don't see why you couldn't. Perhaps something like google-red-light and google-red-dark could be used. But this may add a layer of complexity to your card_mod. Setting independent light/dark themes might be easier though. Then, each theme would have the appropriate google-red with the light/dark values.
supple tide
OK that makes sense, thanks for your help with this
in your case do you just design a single colour dashboard that isn't adaptable to light and dark mode themes?
this seems like by far the simpliest solution and what I will likely do first
cold lodge
Yeah. I really don't design with light/dark taken into consideration. Most of my design is for tablet-based dashboards so the colors that I want them to use are already defined. I probably set the theme years ago and never changed it.
supple tide
OK cool, thanks for your help with this. I will give it a try defining variables in the theme
cold lodge
I may have to look a bit more into using themes though. I noticed that the Home Assistant theme has support for Auto/Light/Dark but my custom themes do not. Maybe this is something that can be worked into a custom theme, too. (Disclaimer: I haven't done anything with themes in probably four years...)
supple tide
exaclty I was using the default to begin with and the custom dashboard looked OK, but then I noticed my partner has dark mode enabled on their phone and it looked terrible as certain hex codes used in card mod did not work with the dark theme
I guess it is best to start with a theme you like, and define the variables
Then build the dashboard from there
cold lodge
I think I kind of figured it out. You can define the Light/Dark modes within the custom theme. https://github.com/JuanMTech/Home_Assistant_files/blob/master/themes/google_theme.yaml
So, in your case, if you were to use this theme as your base, you could add the respective color variables to both sections.