3 ms·
An invert-rotate approach to a dark mode works great until you have any sort of layering (i.e. modals). This is where it really falls apart. Shadows become glow
by jjcm 6y ago
An invert-rotate approach to a dark mode works great until you have any sort of layering (i.e. modals). This is where it really falls apart. Shadows become glows, and make it much harder to differentiate between layers.
If you're going for a quick hack like the above code, I'd recommend at least separating out your shadow styles into a css variable. I.e.
:root {
--shadow-color: #000;
}
.modal {
box-shadow: 0 0 8px var(--shadow-color);
}
@media (prefers-color-scheme: dark) {
:root {
--shadow-color: #fff;
}
html {
filter: hue-rotate(180deg) invert(1);
}
}
- lewisl9029 6y agoThanks for the call out. I took a look at the modals in our dashboard and by default they have a super-subtle, barely visible shadow on top of an overlay, which looked fine. I exaggerated the shadow a lot and this is what it ended up looking like: https://imgur.com/a/ustLofp https://imgur.com/a/ustLofp Definitely not pretty, but also probably not the end of the world. I can see this becoming problematic if we have more than a single additional layer, but we generally try to keep layering to a minimum so it hasn't been a problem for us yet. Definitely something for folks looking to try this to keep in mind though.