README

This plugin for RoundCubeMail version 1.7, patches dark mode for the mail editor and the mail viewer. I think the quality is close to what you get in Thunderbird.

It also includes a customized version of the Inter font made by Rasmus Andersson from Scandinavia, released under SIL Open Font License version 1.1.

https://github.com/rsms/inter/ and https://rsms.me/inter/

It extends the mail editor dark mode work done by Dhiego Cassiano Fogaça Barbosa, which is released under Apache License version 2.0.

https://github.com/modscleo4/roundcube-plugin-dark-html

Inter font

The configurable option use_scandinavian_inter_font lets you choose whether to use the modified Inter font.

Value	Description
yes	Use the Scandinavian Inter font in both the mail viewer and the mail editor.
viewer	Use the Scandinavian Inter font in the mail viewer.
editor	Use the Scandinavian Inter font in the mail editor.
	Any other value will disable use of the Scandinavian Inter font.

When used in the mail editor, the Inter font is added to the available_fonts option and set as default in the default_font option.

A note about custom fonts in the message editor. Even though the font is available in the message css, the @font face is most likely stripped by the receiving mail servers with the result that the message receiver will see an alternative font unless the message receiver has an inter font installed, in which case the message receiver should see the Inter font though not the Scandinavian version.

Dark mode prerequisites

This plugin assumes that RCM adds and removes the dark-mode class on the html element, specifying whether dark mode is enabled or not:

For the web program itself
For the mail viewer iframe
For the mail viewer window or tab
For the mail editor iframe (TinyMCE)

Mail viewer

The configurable option invert_implementation lets you choose which inverting implementation to use.

Value	Description
classic	The initial implementation (see examples below).
colour	An alternative implementation that retains more colours.

Known bugs

Minor: Not all the css and js is minified.

White flash

Sometimes there is a white flash when a mail is selected. It looks like this is coming from white or bright background in the message itself, and the flash is caused by the delay between loading the message and the plugin inverting the message HTML elements.

I have tried to fix this in two ways.

Message shown in the viewer: The IFrame element which is the message viewer is hidden with display = "none", and then shown after the message inversion has been performed. This seems to work as intended.

Message shown in its own tab or window: The element containing the message is hidden with display = 'none', and then shown after the message inversion has been performed. This don't work 100%, because it is not possible (I have not fund a way) to hide the element from plug-in code any earlier then in the DOMContentLoaded event listener. This fix is actually also done in the message viewer, just inside the IFrame.

I am concidering to remove the second fix, because it actually causes a blink because the message is briefly shown, then hidden and inverted if in dark mode, and finally shown again. It is basicly the top 11 lines in darkmode-viewer.js.

Mail editor (TinyMCE)

RCM does not set the dark-mode class on the html element when the mail editor is created/initialised, the plugin fixes that.

RCM does however set the dark-mode class on the html element when the user toggles between dark and light mode.

Fix css

The message editor css is fixed by creating a new css file containing the existing css from skins/elastic/styles/embed.min.css and some additional css. The RCM configuration setting editor_css_location is set with the path to the new combined css file, which causes RCM to use that file when it initialises the mail editor (TinyMCE).

Known bugs

Minor: Not all the css is minified.

File permissions

Because files are written, the following file permissions are required:

chmod  u+w  plugins/rpc_rcm_patches/skin/elastic

Installation

Basic steps to install this plugin:

Download code from GitHub ( https://github.com/rpc-scandinavia/RpcRoundCubeMailPatches)
Extract files, and copy directory rpc_rcm_patches to plugins
Enable plugin in config/config.inc.php by adding rpc_rcm_patches to $config['plugins'] array
Copy configuration file plugins/rpc_rcm_patches/config.inc.php.dist to plugins/rpc_rcm_patches/config.inc.php and modify as needed
Allow plugin to create css file: chmod u+w plugins/rpc_rcm_patches/skin/elastic