Setting Your Brand Colours

Two colours brand the whole account portal and login page: a primary colour for buttons, the active menu item and the login brand panel, and a secondary colour for links. The portal works out the lighter, darker and soft tinted shades it needs from these two, in light and dark mode.

Set your brand colours#

1. Go to WooCommerce > Account Portal > Appearance.
2. In section 2. Brand colours, click the swatch next to Primary Color and pick a colour, or paste a hex value such as #3D3BF3.
3. Do the same for Secondary Color.
4. Click Save Settings, then open /my-account/ and check both light and dark mode.

The two colours#

Setting	Default	Where it is used
Primary Color	#3D3BF3	Active menu item (background tint, text and icon), menu hover tint, primary buttons, focus rings, the login brand panel background, the customer initial circle, the announcement bar (Brand colour style), the finished steps of the order progress, and the browser theme colour used by Add to home screen.
Secondary Color	#22C55E	Links in portal content: account pages, custom pages and the login and register forms.

Only valid hex colours are saved. If a value is not a valid hex colour, the previous colour is kept.

Shades the portal works out for you#

You do not need to pick hover or active colours: they come from the primary colour.

Shade	Light mode	Dark mode
Active menu item text and icon	The primary colour mixed with 25% black (15% with Clean Light)	The primary colour mixed with 35% white
Active menu item background	Primary at 12% opacity (13% with Clean Light)	Primary at 18% opacity
Menu item hover background	Primary at 8% opacity	Primary at 12% opacity
Links	The secondary colour mixed with 40% black, so links stay readable on white	The secondary colour as is

These shades are available as CSS variables: --wap-primary, --wap-primary-rgb, --wap-primary-light, --wap-primary-dark, --wap-secondary, --wap-secondary-rgb, --wap-secondary-light and --wap-secondary-dark.

Choosing colours that work#

• Text on the primary colour is white. Buttons and the login brand panel use white text, so pick a primary colour dark or saturated enough for white text to be readable (aim for a contrast ratio of at least 4.5:1). A very light primary colour (pale yellow, light grey) makes button text hard to read.
• Check both modes. The same primary colour is used in light and dark mode. Use the Light / Dark switch in the portal sidebar to check both.
• Very light or very dark brand colours: if one value cannot work in both modes, keep your brand colour as the primary and use Fine-tune colours to change the menu colours per mode, or use Brand theme with AI, which can set a different text colour on the primary (--wap-on-primary) and separate shades per mode.

Related#

• Choosing a Theme Style
• Fine-Tuning Colours
• Creating a Brand Theme with AI
• Light, Dark and Auto Mode