How to switch logos in native dark mode (Bricks 2.3.5) – Simple method

How To
1

Since the built-in “Logo Inverse” field only works for sticky scroll, not for dark mode, here is an easy solution that worked for me:

1. Structure

Inside your header container (the one with your logo and navigation):

  • Add a Div → name it logo-wrapper
  • Inside the logo-wrapper add two Logo elements:
    • Logo 1 (normal / light mode) → add class: hide-on-dark
    • Logo 2 (inverse / dark mode) → add class: hide-on-light

Logo settings (both logos):

  • Width: same value (e.g. 260px)
  • Height: Auto

logo-wrapper settings (recommended):

  • Display: Flex
  • Align main axis: Center
  • Align cross axis: Center

2. CSS (Global)

Go to Bricks → Settings → Custom Code → Custom CSS and paste:

/* Dark Mode Logo Switching */
html[data-brx-theme="dark"] .hide-on-dark,
body.bricks-is-frontend html[data-brx-theme="dark"] .hide-on-dark {
    display: none !important;
}

html:not([data-brx-theme="dark"]) .hide-on-light,
body.bricks-is-frontend html:not([data-brx-theme="dark"]) .hide-on-light {
    display: none !important;
}

Remember to click “Save” after pasting the CSS.

3. Final Steps

Note: In the builder canvas you will only see the light logo. Preview/Render the site to see both logos switching correctly.

  • Open the rendered page (Preview).
  • Hard refresh the page (Ctrl/Cmd + Shift + R)
  • Test with the native Toggle – Mode element

Done. Works with Auto mode and remembers the user’s choice (localStorage).