[deleted] Is there a way, CSS trick, to invert colors when dark/night mode is activated?
I don't know about this extension but you can invert colors with the following rule:
body {
mix-blend-mode: difference;
}
For whatever reason you need to apply a background color to #app as well:
body {
mix-blend-mode: difference;
}
#app {
background: #fff;
}
If you find that some elements don't look nice when inverted, e.g. avatars and smilies, you can apply another inversion to these elements to revert to the original look:
body, .Avatar, .emoji {
mix-blend-mode: difference;
}
#app {
background: #fff;
}
It can be tricky because some elements will behave a little bit stubborn (e.g. in the case of images opacity is interfering with mix-blend-mode), but ultimately it should be doable.
