SOLVED: 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

3 Likes
9

Hey Matej, it’s not yet implemented, right?

10

Hey @DanielShuster96,

no, not yet implemented, but we have it internally already, so should be released soon :slight_smile:

Best regards,
Matej

2 Likes
11

It would be great if two new interactions were added for this feature. Beyond solving the challenge at hand, this would allow us to implement a wide range of scenarios—for instance, having a pop-up appear when dark mode is activated.

12

Hey @jolia, care to explain more? I don’t understand how new interactions are connected to the “Logo Inverse” feature.

If you think the new interactions would be needed, please open new Feature Requests / Improvements, and explain how they should work. Then I can take a look at them :slight_smile:

Best regards,
Matej

13

Hi @Matej,

Thanks for your reply.

What I have in mind is two new interaction triggers: Switch to dark mode and Switch to light mode. This enables the execution of various scenarios, including the subject of this report.

This enables the execution of various scenarios, including the subject of this report. For example, we apply an interaction to the light and dark logos so that if a “switch to dark mode” occurs, the light logo is hidden—and vice versa.

Or, for example, when dark mode is activated, a pop-up with the message “Dark mode activated” should appear.

As a professional programmer, does the implementation of this idea make sense to you? If so, I’ll submit a feature request.

14

Hi @jolia,

I think it’s best if you open a new forum topic for this. This would require two new general interactions (or one, but with an option to select a condition). While the current task is about the Light/Dark mode logo inverse, it’s not connected to this, so it’s best if you open a new one. :slight_smile:

Feel free to tag me there.

Thank you,
Matej

1 Like
New interaction trigger for Dark/Light mode
15

I am using svg element as logo and modify the fill/stroke property via css when in dark mode. I can elaborate if interested.

16

We’ve addressed this in Bricks 2.4-beta (beta release), now available for manual download from your Bricks account.

Please read the changelog entry before testing, and let us know if you experience any issues. Note: beta builds are not recommended for production sites.

1 Like