You can change the theme colors of your program site within Spark’s Manage settings. Your theme colors will show on your program site and your system notification emails. They’ll also show on your Community Impact (CI) Portal and the Benevity app, if you have those products enabled.
Only Spark users with the Theme Manager role can change the colors.
Accessibility requirements
The colors you choose play an important role in accessibility by making your site meaningful and usable for all people. Your theme colors must meet the color contrast minimums for Web Content Accessibility Guidelines (WCAG) 2.0 AA.
Theme colors you can change
You can change your site’s brand and action colors. You’ll need the 6-digit HEX code for both.
Brand color is used to highlight interactive elements, such as text links and navigation bar backgrounds. It should be a dark color.
Action color is used only for primary action buttons. It can be any color, paired with black or white text.
Steps to change colors
- Sign in to your Spark site.
- Select Manage in the top-right corner of the screen.
- Go to Site Settings > Theme Colors.
- Enter the 6-digit HEX code for your brand and action colors.
If colors don’t meet WCAG requirements: You’ll get a warning that the colors won’t work, and suggestions on similar colors that will. Here’s an example of a pink action color, which does not meet the requirements, and some similar colors that do. - Select Save Colors when you're happy with your changes. Your new colors will immediately update across your site.
Here’s an example of how the colors will look on the Explore Causes page. Notice the blue brand color in the navigation bar background and text links. The red action color in the primary buttons for cause categories and gift cards.