Docs
← Back to site

Adding Your Logo (Light and Dark Mode)

3 min readUpdated October 31, 2026

Add your logo to show it at the top of the account menu, in the phone top bar and on the login page. You can add two versions: one for light backgrounds and one for dark backgrounds, and the portal shows the right one for the mode each visitor is using.

  1. Go to WooCommerce > Account Portal > Appearance.
  2. In section 4. Logo & login page, find the Logo row. It has two fields: Light mode and Dark mode.
  3. Under Light mode, click Select image and choose or upload your logo in the Media Library. This is the logo for light backgrounds (usually a dark or coloured logo).
  4. Optional: under Dark mode, click Select image and choose a version for dark backgrounds (usually a white or light logo).
  5. Click Save Settings.

To remove a logo, click Remove under it and save.

Logo row with a dark logo under Light mode and a white logo under Dark mode, with Select image and Remove buttons
Tip

SVG or PNG with a transparent background works best. A logo with a solid white or coloured box around it will show that box on every background.

What each field does#

FieldWhen emptyUsed for
Light mode“No logo: the site name is shown”Light mode, and dark mode too when there is no dark-mode logo.
Dark mode“Uses the light-mode logo”Dark mode, and the brand panel on the login page.

When both logos are set, the portal prints both and shows the one that matches the mode. In Auto mode it follows the device’s light or dark setting. When the mode is fixed (Light or Dark), the logo for the other mode loads lazily, so it is only downloaded if a visitor switches.

Where the logo appears#

PlaceSize
Top of the sidebar (links to your home page)Up to the Logo max height and the sidebar width
Top tabs layout (computers)40px tall, up to 170px wide
Icon rail layout (computers)44px tall, up to 60px wide
Floating dock layout: top bar (computers)40px tall, up to 180px wide
Phone top barUp to 35px tall and 120px wide
Login page, brand panelUp to twice the Logo max height
Login page, above the formUp to the Logo max height (Centered card and Minimal layouts; smaller on phones with Split)

The logo’s alt text is your site name (Settings > General > Site Title). The image width and height are added to the page so nothing jumps while it loads (for SVG files without a set size, the size comes from CSS).

The logo on the login brand panel#

The brand panel (the coloured side of the Split and Full background login layouts) sits on your primary colour or background image, so it needs a light logo:

  • With a dark-mode logo: the panel shows the dark-mode logo as it is, in its own colours.
  • Without a dark-mode logo: the panel shows the light-mode logo in white (the plugin turns every visible pixel white). A multi-colour logo becomes a white silhouette.

If your logo should keep its colours on the brand panel, add a dark-mode logo made for coloured backgrounds.

Split login page with the logo and tagline on the brand panel beside the sign-in form

With no logo, the portal shows your site name as text in the same places.

For developers#

The wap_logo_image filter lets you supply the logo from code, for example to use a different logo per language. Return an array with src, width and height (use 0 when the size is unknown), or null to keep the saved logo. $mode is light, dark (the dark logo, or the light one when there is none) or dark_only (the dark logo, or nothing).

add_filter( 'wap_logo_image', function ( $logo, $mode ) {
    if ( 'light' === $mode ) {
        return array(
            'src'    => 'https://example.com/wp-content/uploads/logo-portal.svg',
            'width'  => 0,
            'height' => 0,
        );
    }
    return $logo; // null: use the logos set in the settings.
}, 10, 2 );

Put this in your child theme’s functions.php or a code snippets plugin.

Share:

Was this helpful?