Skip to content
maka-img_mm_marketplace
maka marketplace

Discover Products to help you POWER up with CMS Hub

maka-img_mm_power-pro
Power Pro Theme

Check out the POWER demo and see all the latest features

maka-img_mm_performance
Performance

POWER is optimized to perform, review the results

maka-img_mm_customer-showcase
Customer Showcase

See how our customers used the POWER Theme

POWER Pro V35 released on December 21st 2023 – Read Changelog

maka-img_mm_documentation_3
Getting Started

Follow our guide to save time and avoid missing a step

maka-img_mm_module-library
Module Library

From page speed impact to set up instructions, you'll find it all

maka-img_mm_video-tutorials
Video tutorials

Find all POWER videos in the same spot for quick answers

maka-mm_faq-2
FAQs

Have questions?
Search for answers

Experiencing an issue with POWER? Submit a support ticket here

maka-img_mm_about-us
About us

“Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.”
– Michael Scott, not us

maka-img_mm_blog
Blog

This is mostly a demo right now. We are working on some really cool things around the office.

maka-img_mm_career
Career

Quite possibly the most fun you will have at work, ever. Did we mention how cool we are?

Having issues with POWER?
SUBMIT A SUPPORT TICKET


Schedule a Q&A or Demo
PREPURCHASE CONSULTATION


Looking for Custom Development?
REQUEST A QUOTE


Other questions?
CONTACT US / CHAT BOT

COLORS

Configuring Colors in Theme Settings

FAQ

How can I make sure my colors are accessible?

Check if the contrast of your colors meets WCAG Accessibility Criteria.

Theme Settings

There are 3 sections in Theme Settings for Colors: Brand Colors, POWER, and HubSpot Default.

Colors → Brand Colors

The colors set here will define the default colors for your primary brand color as well as the necessary colors for light and dark schemes.

theme-settings-brand-colors

With POWER, you can switch between the light scheme and the dark scheme in a single click.

For the light and dark schemes to work properly, both Light colors (Base and Accent) need to be light and both Dark colors (Base and Accent) need to be dark.

By default, the Base Color Light is the text color for dark scheme and Base Color Dark is the text color for light scheme.

Mixing light and dark colors within the same color scheme can cause legibility issues.

Colors → POWER

These settings allow you to further refine the colors used for each color scheme, as well as additional options to change the style of POWER modules further.

We recommend using the Setup Guide template to preview your colors and coming back to the Theme Settings after configuring your first page to make further adjustments and refine the colors.

Many modules also include the option to change the colors individually.

theme-settings-colors-power

Colors → POWER → Light Scheme

This is where you can overwrite the individual colors for use with light scheme.

theme-settings-color-light-scheme

Colors → POWER → Light Scheme → Background

light-scheme-background

Colors → POWER → Light Scheme → Text / Titles

Additional customization can be made for Titles within the modules. Text can also be changed in the rich text editor.

light-scheme-text-titles

Colors → POWER → Light Scheme → Link

Link settings are for plain text links only.

light-scheme-link

Colors → POWER → Light Scheme → Forms

The overwrites for Form colors were added by customer request, if there is an additional form property you would like to change from the default we're happy to help make the change via CSS and can include additional settings in a future release.

light-scheme-forms

Colors → POWER → Light Scheme → Lists

The shape of the bullet point can be defined under Styling → Lists.

light-scheme-lists

Colors → POWER → Light Scheme → Other

Option to change the default color for Social Icon Color for light scheme for all locations.

light-scheme-other

Colors → POWER → Dark Scheme

This is where you can overwrite the individual colors for use with dark scheme.

theme-settings-color-dark-scheme

Colors → POWER → Dark Scheme → Background

dark-scheme-background

Colors → POWER → Dark Scheme → Text / Titles

Additional customization can be made for Titles within the modules. Text can also be changed in the rich text editor.

dark-scheme-text-titles

Colors → POWER → Dark Scheme → Link

Link settings are for plain text links only.

dark-scheme-link

Colors → POWER → Dark Scheme → Forms

The overwrites for Form colors were added by customer request, if there is an additional form property you would like to change from the default we're happy to help make the change via CSS and can include additional settings in a future release.

dark-scheme-forms

Colors → POWER → Dark Scheme → Lists

The shape of the bullet point can be defined under Styling → Lists.

dark-scheme-lists

Colors → POWER → Boxed Elements

This color applies to all of the rectangular-shaped content elements used in various modules, such as the Image Boxes and Accordions.

color-boxed-elements

Colors → POWER → CTAs

color-CTAs

Modifying the colors for CTAs is best done using the Setup Guide template which includes each CTA style shown on light and dark schemes.

cta-styles

Colors → POWER → Navigation

color-navigation

Colors → POWER → Blog

Option to change the color for the background on the Blog Listing, Blog Post, and Blog Author templates/pages.

color-blog

Colors → POWER → System Pages → Email Templates

Option to change the here background color for email subscription templates (e.g. communication preferences template).

theme-settings-system-pages-hero-background-color-email-templates-hubspot

The default color is inherited from your primary color and the text color for the hero title and text is white, this option makes it easy to update the background color to ensure the text is legible (especially for light primary colors like yellow, gold, etc.)

Colors → HubSpot Default

These colors are applied to the default modules included with HubSpot, found in the Page Editor under "Common Modules" below the POWER theme modules.

color-hubspot-default

Colors → HubSpot Default → HTML

Option to change the Site Background, the part of your website visible outside of the page contents when not set to full width.

color-hubspot-default-html

Colors → HubSpot Default → HubSpot Forms Module

These colors are applied to the default form module included with HubSpot and do not apply to the POWER Sec Forms module.

color-hubspot-default-forms

Colors → HubSpot Default → Submit Button

These colors are applied to the submit button for the default form module included with HubSpot and do not apply to the POWER Sec Forms module.

color-hubspot-default-form-submit-button

Video Tutorial

Next Steps

After configuring your brand colors, update the Fonts in theme settings 

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.