Changing Website Theme, Colors, and Fonts

Learn how to change your website's theme, colors, and fonts within the B12 editor

Written by Madeline B. Last Updated: 15 April 2025

You can easily update your website’s overall theme, color scheme, and fonts in just a few steps. Follow the guide below to make these changes:

Access the style pane

1. Log into your B12 Editor, select Website -> Style from the lefthand editing panel

2. From the Style panel, you can:

• Change your website’s theme to update its overall design.
• Select a new color palette to refresh the look of your site.
• Adjust your fonts to match your brand’s style.
• Update your site's logo

Change your theme

1. Once you've navigated to the style section, on the lefthand editing panel select Theme


2. Filter theme options

To tailor your theme offerings based on your website's color scheme or style, you can filter them using the menu on the lefthand editing panel:   

3. Browse theme options and select

You can peruse theme options in the dynamic display to the right of the lefthand editing panel. Once you find the one you like, select it.

4. (Optional) Restore your original theme

If you aren't happy with your new theme, you can restore a previous version of your website by following these instructions.
​

Change your color scheme

1. Once you've navigated to the style section, on the lefthand editing panel select Colors

2. You can choose from pre-selected color palettes—Bright, Traditional, and Dark


  3. Customize your colors manually

If you'd like to manually customize your colors (examples include: adjusting text size for mobile devices or changing the font thickness on buttons), you can follow the steps to manually override your website's fonts using this article.

Change your font

1. Once you've navigated to the style section, on the lefthand editing panel select Fonts

2. You can select from one of the featured font pairings to update your website's fonts sitewide—this option will auto-select fonts for buttons, titles, subtitles, and more

3. Customize Fonts manually

If you'd like to manually customize your fonts (examples include: adjusting text size for mobile devices or changing the font thickness on buttons), you can follow the steps to manually override your website's fonts using this article.