WIP: 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
NO BUG: Logo inverse doesnt work
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;
    }
}
6

Are there any news on this feature request?

7

Hey @katrine,

like mentioned in the other topic, I don’t have any news to share. But I bumped up this discussion internally, and I’ll get back to you once we have a decision.

Thanks,
Matej

8

Hey all,

we decided to add “Dark mode logo” option to the logo element as well :slight_smile:

We will update this task once we implement it.

Best regards,
Matej

2 Likes