Is there a way to change dashboard tile colors across all dashboards

🎬 Get Started
1

I have searched through the forums but have not found this specific question or answer. I know that I can go into a dashboard and using the template color editor change the background and foreground color of a template. Is there an easy way to make this change global to all of my dashboards? I built a bunch of dashboards and then decided I wanted to change the template colors so was curious if there was an easy way to do this.

2

Not a single-click way, but you can copy some configuration from one Dashboard to another to make the process easier if you want:

  1. Open the "gear"/settings icon in the upper right of the Dashboard with the desired settings (in the event you disabled this feature, re-enable it in Apps > Hubitat Dashboard > (your Dashboard)).

  2. Go to the "Layout" tab if it's not already selected, which will show you a bunch of JSON.

  3. Look for the customColors lines, something like:

    "customColors": [
 {
   "template": "bulb-color",
   "bgColor": "rgb(10,10,10),
   "iconColor": "rgb(61,178,65)",
   "state": "off"
 },
],

(yours will undoubtedly have more and different things inside, but you'll want to copy everything up to and including that "closing" square bracket and comma--it may be easier to just copy and paste the whole thing into a text editor and do this there)

  1. Repeat step 1 for the Dashboard you want to copy these settings do, and either add or replace the customColors section of the JSON in that Dashboard with what you copied above. (If you aren't confident in where to put it and haven't configured any custom colors on that Dashboard yet, it will appear after you do, so that's a trick you can use to know you're copying it in an appropriate spot--overwrite what this will put there.)
3

Well that is simple enough. I hadn't even thought of that although I have messed with the layout tab a bit. That will work great and still allow you to have different color schemes for different dashboards if needed.

Thanks!

4

The process listed above is modifying the Cascading Style Sheet (CSS) for the dashboard. Personally I recommend copying and pasting the entire layout before modification into a text editor (not a word processor) so it can be copied back if the CSS is corrupted.

Another option is to change the color of individual tile. Determine tile ID by clicking on the tile’s 3 dots. Click on dashboard gear>Advanced>CSS and paste the following three lines to change tile #3 to blue text on black background. Then save the CSS. This change would need to be made in each dashboard.
#tile-3 {
color:rgb(0,0,255);
background-color:rgb(0,0,0);}

(“bgcolor” was deprecated and replaced by “background-color” in HTML 5.)

1 Like
5

This is the layout JSON, not the CSS itself (though, of course, Dashboard has to convert all the relevant data to HTML and CSS for display eventually). However, keeping the original JSON somewhere as a "known good" copy while you make the changes is a great idea. That way, if you accidentally mess anything up, the impact is minimal. Thanks for adding that suggestion!

Kind of? The bgcolor attribute was part of HTML, whereas background-color is part of CSS, and HTML5 finally did away with support for presentation-only aspects of HTML like this (in favor of CSS, which has been recommend for this purpose since it was created--or, I suppose, became widely supported). But the "bgColor" text in the layout JSON for the Dashboard is neither. :slight_smile: It's just JSON used internally by Hubitat Dashboard, which gets converted into HTML and CSS in whatever way the Dashboard app deals with this data behind the scenes before it gets sent to your browser.

So, to be clear, if you're editing the layout JSON as I suggested, you need to use the format Hubitat expects (which includes "bgColor"; this is a Hubitat-specific thing, aside from the "file" itself being JSON format). If you're editing the CSS, you'll need to use background-color as you suggest (this must be actual CSS).

This is good additional information about another way to achieve a similar outcome, and I suspect the OP may find one or the other easier depending on the specific goals. Thanks again for sharing!