How to Change Theme Colors in Magento 2?

The appeal of your Magento 2 store significantly influences your conversions. Custom layouts, templates, images and colors not only improve your customer experience but build brand awareness.

Since it is hard to find a theme that would contain all your brand colors by default, changing theme colors becomes a daunting task. You usually need a developer or some technical assistance. But not with the Optimized Magento 2 Theme.

Apart from 5 preset color schemas, you can customize your website colors to your liking. And today, you'll learn how in this comprehensive guide. 

Should we start?

Post Contents [hide]

  1. Theme Colors
  2. Basic Color
  3. Primary Buttons
  4. Secondary Buttons
  5. Link
  6. Icon
  8. Icon Header
  9. Input
  10. Header
  11. Navigation
  12. Product Items
  13. Subscribe
  14. Footer
  15. Copyright

Each element of your theme could be changed. So we structure them in paragraphs. But first, go to Stores > Configuration > Optimized Theme > Color Schema to change theme colors in Magento 2. 

Change theme colors in Magento 2

Theme Colors

Change Magento 2 theme colors

In this section, you define colors that represent your brand and are used the most across your store.

  • Theme Color Primary — sets the primary color used the most frequently across your store. 
  • Theme Color Primary Alt — is used to set a contrast between UI elements, and is usually the light or dark variant of the primary color.
  • Theme Color Secondary — sets the secondary color used in your store to accent certain parts of your store.
Theme colors Magento 2

Basic Color

Basic color in Magento 2

  • Background Color — appears behind scrollable content in your store.
  • Text Color — sets text color across all pages (e.g. catalog, blog, shopping cart, etc).
  • Border Color — sets border color on the default buttons and inputs.
  • Sidebar Background Color — set the background color for the sidebar (e.g. customer account sidebar, checkout sidebar).

Magento theme basic color

Primary Buttons

Primary buttons color Magento 2

Primary buttons are those that are meant to drive customers' attention. They usually contain a solid fill.

e.g. Add to Cart, Proceed to Checkout, Place Order, Subscribe Now, Create an Account etc

  • Button Background Color — sets the background color of the primary buttons.
  • Button Background Color (On Hover) — sets the color of buttons on hover.
  • Button Text Color — sets the color of the text in primary buttons.
  • Button Text Color (On Hover) — sets the color of the text in buttons on hover.
  • Button Border Color — sets the color of the primary buttons' border.
  • Button Border Color (On Hover) — sets the color of the button's border on hover.

Primary buttons Magento

Secondary Buttons

Configure secondary buttons color Magento 2

Secondary buttons usually offer an alternative to a primary button. So, they are given less visual attention.

e.g. Update Shopping Cart (shopping cart), Apply discount (checkout), Share Wishlist, Add All to Cart (customer account)

  • Button Background Color — sets the background color of the secondary buttons.
  • Button Background Color (On Hover) — sets the color of buttons on hover.
  • Button Text Color — sets the color of the text in secondary buttons.
  • Button Text Color (On Hover) — sets the color of the text in buttons on hover.
  • Button Border Color — sets the color of the secondary buttons' border.
  • Button Border Color (On Hover) — sets the color of the button's border on hover.

Secondary buttons color Magento

Change link color Magento 2

  • Link Color — sets the color for all links in your store.
  • Link Color (On Hover) — sets the color of links on hover.

e.g. footer links, blog links, etc

Link color Magento

Icon

Icon color Magento

  • Icon Color — sets the color of the icons in your store.
  • Icon Color (On Hover) — sets the color of the icons on hover.

e.g. social media icons, add to wishlist icons, compare icon

Icon color Magento

Icon Header

Icon header color Magento

  • Icon Header Color — sets the color of the icons located in header.
  • Icon Header Color (On Hover) — sets the color of the icons located in the header on hover.

e.g. shopping cart icon

Icon header color

Input

Data input color Magento 2

  • Input Background Color — sets the input background color.
  • Input Placeholder Color — sets the input placeholder color (a suggestion that appears when you start to type something in a form).
  • Input Color — sets the color of the text you type in the input forms.
  • Input Border Color — sets the input border color.

e.g. search form, shipping address form on checkout, apply discount form

Input colors

Magento header colors

  • Header Top Panel Background Color — sets the background color for the top panel (where "My Account", and "My Wish List" links are located).
  • Header Top Panel Color — sets the color of the top panel items (text).
  • Header Background Color — sets the background color for the header (where the logo and search bar are located). 

Header colors Magento

Magento navigation bar colors

  • Navigation Background Color — sets the background color for the navigation menu.
  • Navigation Item Color — sets the color of the navigation menu main items (text).
  • Navigation Item Color (On Hover) — sets the color of the navigation menu main items on hover.
  • Sub Menu Item Background Color — sets the background color for the second-, third-level items. 
  • Sub Menu Item Background Color (On Hover) — sets the background color for the second-, third-level items on hover.
  • Sub Menu Item Color — sets the color of the second-, third-level items (text).
  • Sub Menu Item Color (On Hover) — sets the color of the second-, third-level items on hover.

Navigation Menu Magento

Product Items

Catalog product items colors Magento

  • Product Background Color — sets the background color of the product blocks on catalog pages.
  • Product Color — sets the colors of the text in the product block (e.g. name, reviews count, price).
  • Product Border Color — sets the color of the product block border on catalog pages. 
  • Product Border Color Hover — sets the color of the product block border on catalog pages on hover. 

Product catalog items

Subscribe

Change color of subscribe block

  • Subscribe Background Color — sets the background color for the subscription block.
  • Subscribe Color — sets the color of the text in the subscription block.

Magento subscription block

Magento footer color change

  • Footer Background Color — sets the background color of the footer. 

Note: the color of the text in the footer is defined by Basic Color settings and links in Link settings.

Magento Footer

Copyright color schema Magento

  • Copyright Background Color — sets the background color of the copyright.
  • Copyright Color — set the color of the text in the copyright block.

Magento copyright

It wasn't hard, wasn't it?

This guide on how to change Magento 2 theme colors should help you to implement colors of your brand easier. Now imagine you don't even need to do all this.

Magefan Optimized Theme for Magento 2 comes with 5 preset color schemas. So if you want a silver, red, blue, green or black Magento 2 theme, you just need to click one button for colors to be applied. 

There is truly no easier way to change colors in Magento 2 theme!