--- title: Changing website theme, colors, and fonts [B12 2.0] description: Learn how to change your website's theme, colors, and fonts within the B12 editor --- [Skip to content](https://support.b12.io/en/v2/changing-website-theme-colors-and-fonts#main-content) ![b12 logo](https://support.b12.io/hubfs/b12%20logo.svg) - [Help Center](https://support.b12.io/) - [B12 Website](https://www.b12.io/) - [AI Website Prompts](https://www.b12.io/ai-website-prompt-gallery) - [Resources](https://www.b12.io/resource-center/) - [Pricing](https://www.b12.io/pricing/) - [Log in](https://b12.io/dashboard/) Open main navigation Close main navigation - [Help Center](https://support.b12.io/) - [B12 Website](https://www.b12.io/) - [AI Website Prompts](https://www.b12.io/ai-website-prompt-gallery) - [Resources](https://www.b12.io/resource-center/) - [Pricing](https://www.b12.io/pricing/) - [Log in](https://b12.io/dashboard/) - [Start for free](https://b12.io/signup/) [Start for free](https://b12.io/signup/) How can we help? - There are no suggestions because the search field is empty. 1. [B12 Help Center](https://support.b12.io/en?hsLang=en) 2. [B12 2.0](https://support.b12.io/en/b12-2-0?hsLang=en) 3. [Website Style & Design](https://support.b12.io/en/b12-2-0?hsLang=en#website-style-design) # Changing website theme, colors, and fonts \[B12 2.0\] ## Learn how to change your website's theme, colors, and fonts within the B12 Editor. | ![maddie](https://support.b12.io/hs-fs/hubfs/me-webp-May-22-2025-10-46-54-0896-PM.webp?width=60&height=60&name=me-webp-May-22-2025-10-46-54-0896-PM.webp) Written by: Madeline B. Last updated: 03 Dec., 2025 | | --- | Customizing your website’s style can help keep your brand consistent and make your site more appealing to visitors. In the B12 Editor, you can: - [Change your overall theme](https://support.b12.io/en/v2/changing-website-theme-colors-and-fonts#changing-theme) - [Customize your website's color](https://support.b12.io/en/v2/changing-website-theme-colors-and-fonts#changing-color-scheme) - [Adjust your fonts](https://support.b12.io/en/v2/changing-website-theme-colors-and-fonts#changing-font) ### Accessing your style settings In the left sidebar menu, select `Website` \> `Style`. The Style settings allows you to: - 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 **button colors and styles**. - Customize your **theme** and **animation** settings. ### Changing your theme **Important:** Switching themes will overwrite previous style or formatting changes, including any custom code. If you're unsure, contact the B12 Support Team[mailto:hello@b12.io](mailto:hello@b12.io) before proceeding. 1\. In the **Style** section, select `Theme` in the left sidebar. ![](https://support.b12.io/hs-fs/hubfs/Screenshot%202025-04-15%20at%2011-15-56%E2%80%AFAM-png.png?width=250&height=559&name=Screenshot%202025-04-15%20at%2011-15-56%E2%80%AFAM-png.png) 2\. Use the filters in the left sidebar to refine themes by style or color scheme. ![sc8](https://support.b12.io/hs-fs/hubfs/sc8.png?width=250&height=315&name=sc8.png) 3\. Browse the theme options on the right, pick your preferred theme, then click `Select`. ![Screen Recording 2025-04-15 at 11.28.17 AM](https://support.b12.io/hs-fs/hubfs/Screen%20Recording%202025-04-15%20at%2011.28.17%20AM.gif?width=555&height=300&name=Screen%20Recording%202025-04-15%20at%2011.28.17%20AM.gif) **Tip:** You can also [change an individual section's layout](https://support.b12.io/en/articles/1723758-changing-section-layout?hsLang=en) without adjusting your full theme. If you want to undo changes, you can restore a previous version of your site [by following these instructions](https://support.b12.io/en/articles/1506628-restoring-your-website-to-undo-changes?hsLang=en). ### Changing your color scheme 1\. In the Style section, select `Colors` in the left sidebar. #### ![](https://support.b12.io/hs-fs/hubfs/sc%2011-png.png?width=407&height=300&name=sc%2011-png.png) 2\. Choose one of the preset palettes: **Bright**, **Traditional**, or **Dark**. The changes will be automatically applied. ![](https://support.b12.io/hs-fs/hubfs/sc%2012-png.png?width=250&height=548&name=sc%2012-png.png) 3\. Click `Override colors` to customize colors manually. For more advanced adjustments, see [this article](https://support.b12.io/en/manually-overriding-your-websites-colors?hsLang=en) on overriding styles. ![](https://support.b12.io/hs-fs/hubfs/image-png-Sep-17-2025-03-23-46-6223-PM.png?width=250&height=57&name=image-png-Sep-17-2025-03-23-46-6223-PM.png) ### Changing your font 1\. In the Style section, select `Fonts` in the left sidebar. ![](https://support.b12.io/hs-fs/hubfs/Fonts-png.png?width=250&height=576&name=Fonts-png.png) 2\. Choose one of the featured font pairings to apply sitewide. This updates text styles for buttons, titles, subtitles, and more. #### ![](https://support.b12.io/hs-fs/hubfs/image-png-Sep-17-2025-03-24-58-6750-PM.png?width=250&height=422&name=image-png-Sep-17-2025-03-24-58-6750-PM.png) 3\. Click on `Override fonts` to make detailed font changes. For full customization, see [manually overriding your website’s fonts](https://support.b12.io/en/manually-overriding-your-websites-fonts?hsLang=en). #### ![](https://support.b12.io/hs-fs/hubfs/image-png-Sep-17-2025-03-22-16-9972-PM.png?width=250&height=53&name=image-png-Sep-17-2025-03-22-16-9972-PM.png)See also: - [Changing your site's colors](https://support.b12.io/en/articles/5026867-changing-your-site-s-colors?hsLang=en) - [Changing your website's color palette](https://support.b12.io/en/articles/1052814-changing-your-website-s-color-palette?hsLang=en) - [Manually overriding your website's colors](https://support.b12.io/en/manually-overriding-your-websites-colors?hsLang=en) - [Changing your site's fonts](https://support.b12.io/en/articles/5026525-changing-your-site-s-fonts?hsLang=en) - [Manually overriding your website's fonts](https://support.b12.io/en/manually-overriding-your-websites-fonts?hsLang=en) - [Getting started](https://support.b12.io/en/getting-started?hsLang=en#main-content) - [Introduction](https://support.b12.io/en/getting-started?hsLang=en#introduction) - [Detailed guides](https://support.b12.io/en/getting-started?hsLang=en#detailed-guides) - [Working with B12's AI Agent](https://support.b12.io/en/working-with-b12s-ai-agent?hsLang=en#main-content) - [Agent Skills](https://support.b12.io/en/working-with-b12s-ai-agent?hsLang=en#agent-skills) - [Built-in features](https://support.b12.io/en/built-in-features?hsLang=en#main-content) - [Visual edit](https://support.b12.io/en/built-in-features?hsLang=en#visual-edit) - [Code editor](https://support.b12.io/en/built-in-features?hsLang=en#code-editor) - [Data & users (Backends)](https://support.b12.io/en/built-in-features?hsLang=en#data-users-backends) - [Forms & submissions](https://support.b12.io/en/built-in-features?hsLang=en#forms-submissions) - [Commerce](https://support.b12.io/en/built-in-features?hsLang=en#commerce) - [Contact manager](https://support.b12.io/en/built-in-features?hsLang=en#contact-manager) - [eSignatures](https://support.b12.io/en/built-in-features?hsLang=en#esignatures) - [Email Marketing](https://support.b12.io/en/built-in-features?hsLang=en#email-marketing) - [Team](https://support.b12.io/en/built-in-features?hsLang=en#team) - [Analytics](https://support.b12.io/en/built-in-features?hsLang=en#analytics) - [Website settings](https://support.b12.io/en/built-in-features?hsLang=en#website-settings) - [Adding functionality](https://support.b12.io/en/adding-functionality?hsLang=en#main-content) - [Third-party integrations](https://support.b12.io/en/adding-functionality?hsLang=en#third-party-integrations) - [Publishing & growing](https://support.b12.io/en/publishing-growing?hsLang=en#main-content) - [Domains](https://support.b12.io/en/publishing-growing?hsLang=en#domains) - [Connecting your Domain](https://support.b12.io/en/publishing-growing?hsLang=en#connecting-your-domain) - [Managing Your Domain](https://support.b12.io/en/publishing-growing?hsLang=en#managing-your-domain) - [Email Forwarding & Sending](https://support.b12.io/en/publishing-growing?hsLang=en#email-forwarding-sending) - [Growth & Marketing](https://support.b12.io/en/publishing-growing?hsLang=en#growth-marketing) - [Troubleshooting](https://support.b12.io/en/troubleshooting?hsLang=en#main-content) - [FAQs](https://support.b12.io/en/troubleshooting?hsLang=en#faqs) - [Account & billing](https://support.b12.io/en/account-billing?hsLang=en#main-content) - [Account Login & Password](https://support.b12.io/en/account-billing?hsLang=en#account-login-password) - [Subscription & Payment Information](https://support.b12.io/en/account-billing?hsLang=en#subscription-payment-information) - [Your Account](https://support.b12.io/en/account-billing?hsLang=en#your-account) - [Managing Multiple Websites](https://support.b12.io/en/account-billing?hsLang=en#managing-multiple-websites) - [Multi-user](https://support.b12.io/en/account-billing?hsLang=en#multi-user) - [Getting support](https://support.b12.io/en/getting-support?hsLang=en#main-content) - [Professional & Advanced Plan Support (B12 2.0)](https://support.b12.io/en/getting-support?hsLang=en#professional-advanced-plan-support-b12-2-0) - [B12 2.0](https://support.b12.io/en/b12-2-0?hsLang=en#main-content) - [Website Structure and Content](https://support.b12.io/en/b12-2-0?hsLang=en#website-structure-and-content) - [Website Style & Design](https://support.b12.io/en/b12-2-0?hsLang=en#website-style-design) - [Sitewide Settings](https://support.b12.io/en/b12-2-0?hsLang=en#sitewide-settings) - [Using the B12 Editor](https://support.b12.io/en/b12-2-0?hsLang=en#using-the-b12-editor) - [Analytics & SEO](https://support.b12.io/en/b12-2-0?hsLang=en#analytics-seo) - [Integrations - General](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-general) - [Integrations - Communication](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-communication) - [Integrations - Language](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-language) - [Integrations - Ecommerce](https://support.b12.io/en/b12-2-0?hsLang=en#integrations-ecommerce) - [Professional & Advanced Plan Features](https://support.b12.io/en/b12-2-0?hsLang=en#professional-advanced-plan-features) - [Troubleshooting & Resources](https://support.b12.io/en/b12-2-0?hsLang=en#troubleshooting-resources) - [Contact Forms](https://support.b12.io/en/b12-2-0?hsLang=en#contact-forms) - [Online Scheduling](https://support.b12.io/en/b12-2-0?hsLang=en#online-scheduling) - [Advanced Editing (Experts Only)](https://support.b12.io/en/b12-2-0?hsLang=en#advanced-editing-experts-only) [![B12\_logo\_2025](https://support.b12.io/hs-fs/hubfs/B12_logo_2025.png?width=53&height=24&name=B12_logo_2025.png "B12_logo_2025")](https://www.b12.io) © 2025 B12. All rights reserved. ×