Docs
← Back to site

Choosing a Theme Style

3 min readUpdated October 31, 2026

The theme style is the starting look of the account portal and the login page: the background, sidebar, card, text and border colours that sit around your brand colours. Pick the one closest to your store, then add your brand colours and (if you want) fine-tune the rest.

Choose a theme style#

  1. Go to WooCommerce > Account Portal > Appearance.
  2. In section 1. Theme style, click one of the three cards: Clean Light, Deep Dark or Full Custom.
  3. Set your colours in Brand colours (section 2).
  4. Click Save Settings and open your account page (/my-account/) to check the result.
Theme style section with Clean Light, Deep Dark (selected) and Full Custom cards and their previews

The three theme styles#

Theme styleCard textWhat it sets
Clean LightWhite sidebar, one accent colorA light palette (white sidebar and cards, a very light grey page background, dark text) in your primary and secondary colours.
Deep Dark (default)Dark sidebar, one accent colorA dark palette (near-black page, dark grey sidebar and cards, light text) in your primary and secondary colours.
Full CustomEvery color under your controlThe built-in light and dark palettes in your brand colours, plus any colours you pick for light mode and dark mode in Fine-tune colours.

What happens in the other mode#

Clean Light and Deep Dark each style one mode:

  • Clean Light sets the light-mode colours. If a visitor switches to dark mode, they see the portal’s built-in dark colours (with your brand colours), not a mix of light and dark.
  • Deep Dark sets the dark-mode colours. A visitor who switches to light mode sees the built-in light colours.
  • Full Custom is the one to choose when you want to control both modes yourself.

This also decides what Fine-tune colours > Pick colours shows: the light-mode colours for Clean Light, the dark-mode colours for Deep Dark, and both sets for Full Custom. When you click Full Custom, Fine-tune colours switches to Pick colours for you (you can change it back).

Note

The theme style does not decide which mode your customers see. That is set in Light / dark mode (section 6) with Default on first visit (or Mode for everyone when the switch is off). Until you save the Appearance tab for the first time, the portal opens in the mode that matches the theme style: dark for Deep Dark (the default) and light for Clean Light.

Which one to pick#

  • Your site is mostly white or light: start with Clean Light and set the default mode to Light.
  • Your site is dark, or you want a bold app-like look: keep Deep Dark.
  • You want the light and dark modes to both match your brand closely: choose Full Custom and pick the colours, or use Brand theme with AI in Fine-tune colours, which always covers both modes whichever theme style you picked.

How it works#

The theme style is printed as CSS variables (for example --wap-surface, --wap-bg, --wap-card-bg, --wap-on-s) scoped to .wap-portal-body.wap-mode-light or .wap-portal-body.wap-mode-dark. The order of the colour layers is:

  1. The built-in light and dark palettes in assets/css/portal.css.
  2. The theme style (Clean Light or Deep Dark).
  3. Colours picked in Fine-tune colours > Pick colours.
  4. The CSS from Brand theme with AI (only while that option is selected).
  5. Advanced CSS, which is applied last.

Each later layer wins over the earlier ones, so you can always fine-tune a single colour without starting again. The same colours are used on the login and registration page, in RTL languages and on every account menu layout.

Share:

Was this helpful?