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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s