Dashboards That Pop: Themes
Today’s theme is themes! I’m super excited about the new themes in ArcGIS Dashboards, so I decided to dig into them. While exploring, I’ve come up with a few tips I thought I’d share.
What Colors are What?
The very first thing I did was to throw together a quick dashboard with a variety of different elements. I kept the charts in monochromatic gray so that I could focus on the theme colors. Then I threw a bunch of random colors at it, so every color option had a unique value. I didn’t care about colors, contrast, or any sense of coordination. I just wanted to be able to see what color option displays where.
I quickly learned that quite a lot of these colors affect text colors, so ensuring I have enough contrast between color choices is going to be a priority when selecting my color palette. Dashboards will warn you if there is not enough contrast between important colors, but I like to check all my colors in Coolors.co. Not only does it check the contrast, but it also recommends replacement colors when your choices don’t meet accessibility guidelines.
Create a Color Palette
I recommend starting out by picking your Foreground color, as this will be the color that most of your text will be on.
For this example, I will use: #392F5A
Next, I will pick my colors that must be high contrast compared to the Foreground color:
- Accent color: #6EEB83
- Text color: #FFFFFF
- Link Text color: #CAF0F8
- Secondary Text color: #FF99C9
Next on the list is the Inverse Text color. This is used as a text color on top of our Accent color, so I will need to make sure there is sufficient contrast between the two.
- Inverse Text color: #392F5A
The Axes and Rule color affects only the grid lines of our charts and gauges, so I can relax a bit on my contrast requirements if I want.
- Axes and Rule color: # E6AA68
That just leaves my Outline and Input Border colors. These are purely decorative, so contrast isn’t a huge concern here.
- Outline color: #738290
- Input Border color: #73956F
Here’s the resulting space-themed dashboard.
Suggested Colors
You may have noticed that there are two color sections in the Theme sidebar. One is Colors and the other is Advanced Colors.
Dashboard will provide Advanced Color suggestions based on the colors you choose in the top section.
Selecting a Foreground color will change the Background, Outline, Axes and Rules, and Input Border colors.
Selecting a Text color will also change the Secondary Text color.
Selecting an Accent color changes the Link color.
This means that you will want to set the Foreground, Text, and Accent colors first. If you set the Advanced Colors first, they will get overwritten if you change any of the colors in the top section.
How Many Colors
It can be a bit intimidating trying to find 10 different colors that work well together. If you are overwhelmed, remember you don’t need all the colors to be unique. In my space theme, I’m using 9 different colors, but I could cut it down to just 3.
Or I could use 3 base colors and various shades and tints of those colors.
I could also set the top 3 colors and stick with the suggestions in the Advanced Colors section. For suggested colors that don’t meet accessibility standards, I can use Coolors.co to suggest a new color.
Getting a Head Start
You can also get a head start on your theme creation by copying one of the built-in themes and making a couple of tweaks. Find a theme you like, and then hit the copy icon on the right.
This copies the theme into the Custom Theme editor hit the Customize button to start making changes.
Now I can swap out that green for a pink.
General Tips
Don’t forget that your data is the real star of the show. Your theme should complement your charts and data, not overpower them.
Be mindful when picking a Foreground color. It covers a lot of real estate, so it is best to avoid bright, eye-searing colors.
For more Dashboard tips, check out the rest of the Dashboards That Pop series.
Happy Dashboarding!