
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?
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.
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.

Basic Color
- 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).
Primary Buttons
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.
Secondary Buttons
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.
Link
- 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
Icon
- 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 Header
- 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
Input
- 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
Header
- 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).
Navigation
- 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.
Product Items
- 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.
Subscribe
- Subscribe Background Color — sets the background color for the subscription block.
- Subscribe Color — sets the color of the text in the subscription block.
Footer
- 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.
Copyright
- Copyright Background Color — sets the background color of the copyright.
- Copyright Color — set the color of the text in the copyright block.
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!