Dark mode for Roundcube

Roundcube Webmail‘s default skin has built-in dark mode. Unfortunately, HTML emails seem to always fall back to black text on white background or use hard-coded light colors while everything else on the screen is pleasantly dark.

Turns out one can force colors for almost all emails with a simple CSS rule. There are extensions like Stylish that can inject custom CSS to a webpage, but one can (still) use Firefox’s built-in userContent.css feature with the following code:

@-moz-document domain("your.mail.server.com") {
  html.dark-mode .message-htmlpart, html.dark-mode .message-htmlpart * {
    color: #c5d1d3 !important;
    background-color: #21292c !important;
  }
  html.dark-mode .message-htmlpart a {
    color: #00acff !important;
  }
}

The key here is the asterisk (universal) selector.

This will remove most fancy colors in your emails, of course. But for me that’s a small price to pay for the soothing dark colors in my inbox: