How can I change the colors of my website?

I have chosen a theme and a style, but how can I change the default colors?

Official response from completed

NationBuilder makes it easy to change your theme's color palette.  

The first step is to create a custom theme. While it's possible to create your custom theme from scratch, we recommend cloning an official theme and style variation that's closest to what you're going for, and then modify it to your liking. There more information on how to create a custom theme here. Once you've created your custom theme, you'll be ready to start making changes to the colors.


Go to Websites > Theme > theme.scss to open up your theme's style sheet. Once there you will see a list of theme colors. Each theme color corresponds to an element on the website.


In this example, theme_color_1 is the header background and button color. You can pick and try different colors to see what you like using online tools like ColorPicker or ComputerHope.

In the example above, I changed the theme_color_1 to #000000 (black), clicked "save & publish," and that changed the colors of my header background and buttons. You can make changes for all of the colors on your website in this way. Enjoy!

Note for V2 themes: Since responsive themes have two stylesheets, you'll need to update the colors in both theme.scss and tablet-and-desktop.scss for changes to take effect on both mobile and desktop sites.

Showing 46 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.