Elastic: Dark mode

Nowadays, when every major web browser supports dark mode and most people use mobile devices, every application has to have a dark mode. Roundcube 1.5 will have it too.

A few people worked on this in the past, and there’s even a pull request. It looked to me that it might be a lot of work, so it had to wait until I could find some more time. Finally I gave it a try and I found that it didn’t require to write as much of the css code as I expected. It’s implemented as an extension to Elastic, not a separate skin. It makes the styles file about 10-15% bigger.

dark-mail

Changes to the color scheme on a browser/device level are detected automatically. Additionally, in the menu you can find “Light mode”/”Dark mode” switch for older browsers or cases when you want to just switch the mode for Roundcube only.

dark-settings

This is the initial implementation, so there’s still some work planned. We’ll likely polish some colors or contrast here and there, as well as add some missing styles. Of course it works with small factors too.

dark-mobile

An additional work in other areas is also planned. For example, we should make sure that @media (prefers-color-scheme: dark)in HTML messages works. And whether we should add that to HTML messages created by Roundcube, or whether the HTML editor should support dark mode at all.