A common question from the community is: “How can I swap a logo in dark mode?” or more generally, how to control the visibility of a specific element when switching color schemes.
In this article, you’ll learn how to do this in about 30 seconds!
Create 2 global classes
Let’s create 2 global classes: visible-on-lightmode and visible-on-darkmode:
Inside visible-on-lightmode, go to the Custom CSS tab and insert the following CSS snippet:
[data-theme="dark"] %root% {
display: none
}
Let’s do the same for visible-on-darkmode, but with the following snippet instead:
[data-theme="light"] %root% {
display: none
}
How to use these classes?
It’s pretty straightforward: when you want to swap two elements based on the color scheme, such as a light and dark logo, add both elements to your structure panel and assign the visible-on-lightmode class to the light logo element and the visible-on-darkmode class to the dark logo element. This ensures that the element not matching the current color scheme is hidden, displaying only the correct element to the user.
It is that easy!