Use "Logo inverse" for dark mode

Feature Requests / Improvements
1

I’d like to carry this discussion here, as a feature request:

When the dark mode is toggled, there is no easy way to also toggle the logo.

Bricks’ Logo element natively supports inverse versions (used for sticky headers etc). Once this inverse asset is set, we should be able to also reference it via the dark mode toggle.

7 Likes
2

I agree this would be very handy

3

If you use SVG you can easily invert colors in dark mode. Just an idea.

4

Not sure about this, i usually wrap the logo and put a background there for dark mode. Changing client’s logo might break their identity IMO

5

Hey im not sure if it can help, but it works for me.

%root% {
    transition: filter 0.3s ease;
    filter: brightness(0) !important;
}

html[data-brx-theme="dark"] %root% {
    filter: none !important;
}

@media (prefers-color-scheme: dark) {
    html:not([data-brx-theme="light"]) %root% {
        filter: none !important;
    }
}