Light, Dark and Auto Mode

3 min readUpdated October 31, 2026

The account portal and the login page come in a light mode and a dark mode. You choose the mode customers see first, and whether they can switch: with Auto, the portal follows the light or dark setting of each customer’s phone or computer.

Set the mode#

Go to WooCommerce > Account Portal > Appearance.
In section 6. Light / dark mode, decide on Mode switch:
- Tick Let visitors switch to show the Light / Dark / Auto switch to customers.
- Untick it to use one mode for everyone.
Pick the mode: Light, Dark or Auto (follows the device). With the switch on, this is the Default on first visit; with the switch off, the label changes to Mode for everyone.
Click Save Settings.

Light / dark mode section with Mode switch ticked and Auto selected as the default on first visit

The settings#

Setting	Default	What it does
Mode switch	On	Shows the mode switch to visitors. Full label: “Let visitors switch: Light / Dark / Auto switch in the sidebar and mobile menu, plus a quick icon in the mobile top bar and on the login page”.
Default on first visit (switch on)	Dark	“What a visitor sees the first time. Once they pick on the switch, their choice is remembered on that device.”
Mode for everyone (switch off)	Dark	“The switch is off, so every visitor sees this mode.”

The default is Dark because the default theme style is Deep Dark. Until you save the Appearance tab for the first time, the mode follows the theme style (Clean Light opens in light mode). After that, the mode you pick here is used whichever theme style you choose.

What customers see#

With Mode switch on:

Sidebar (computers): a Light / Dark / Auto switch at the bottom of the menu. With the Top tabs and Icon rail layouts it shows as icons only (the names are kept for screen readers).
Phones: the same switch in the slide-out menu, plus a quick icon in the top bar.
Login page: a quick icon at the top of the form.

The quick icon switches straight to the other mode (light to dark, or dark to light). The Light / Dark / Auto switch also offers Auto, with the hint “Match your device setting”.

Light, Dark and Auto switch at the bottom of the portal sidebar with Dark selected

How it works#

Remembered per device: a visitor’s choice is saved in their browser (local storage, key wap_color_mode), not in their account. On another device or browser they see your default again.
Switch turned off: a choice saved earlier is ignored, and everyone sees the Mode for everyone.
Auto: the portal reads the device’s setting (prefers-color-scheme) and follows it live: if the device switches to dark at sunset, the portal does too, without a reload.
No flash: the mode is applied before the page is drawn, so customers do not see a light page flash before dark mode (or the other way round).
Logos: with a dark-mode logo set, the portal swaps the logo with the mode.
Keyboard: the switch is a radio group; arrow keys move between Light, Dark and Auto (reversed in RTL languages).

Styling each mode#

The portal adds wap-mode-light or wap-mode-dark to the <body> (always the mode in use, also with Auto) and a data-wap-mode attribute to <html>. Use these to target one mode in Advanced CSS:

.wap-portal-body.wap-mode-dark .wap-dash-tile {
    border: 1px solid rgba(255, 255, 255, .12);
}

To change the colours of each mode, use Fine-tune colours (choose Full Custom to set both modes) or Brand theme with AI.