I have been using the Dark Reader plugin in firefox for quite some time now and I quite like it. However, there is one drawback - it has made me procrastinate building a dark theme for my blog. As it turns out, exporting and using the Dark Reader generated theme for your website is pretty damn easy.

Frist you need the plugin installed in your browser, you can get it from the Firefox Add-ons page here

Next You have to switch darkreader to the "new design" (the old design looks more modern IMHO) from the dev tools popup in order to access the export button found in the settings dialogue.

• Click Dark Reader icon.
• Click Dev tools (in the bottom-right corner).
• Click Preview new design.
• Click on settings in the popup
• Click on Manage Settings
• Click on Export Dynamic Theme

Source: Question: Export CSS?

Once you have the css, oen it up in an editor and wrap it in the css media rule for the dark perferd color scheme. Then it's a simple matter of adding it to your webpage as you would any other css file, boom a dark theme for your website with little to no effort.

@media (prefers-color-scheme: dark) {
    /*
                         _______
                        /       \
                       .==.    .==.
                      ((  ))==((  ))
                     / "=="    "=="\
                    /____|| || ||___\
        ________     ____    ________  ___    ___
        |  ___  \   /    \   |  ___  \ |  |  /  /
        |  |  \  \ /  /\  \  |  |  \  \|  |_/  /
        |  |   )  /  /__\  \ |  |__/  /|  ___  \
        |  |__/  /  ______  \|  ____  \|  |  \  \
     ___|_______/__/ ____ \__\__|___\__\__|___\__\_______
    |  ___  \ |  ____/ /    \   |  ___  \ |  ____|  ___  \
    |  |  \  \|  |___ /  /\  \  |  |  \  \|  |___|  |  \  \
    |  |__/  /|  ____/  /__\  \ |  |   )  |  ____|  |__/  /
    |  ____  \|  |__/  ______  \|  |__/  /|  |___|  ____  \
    |__|   \__\____/__/      \__\_______/ |______|__|   \__\
                    https://darkreader.org
    */

    /*! Dark reader generated CSS | Licensed under MIT https://github.com/darkreader/darkreader/blob/main/LICENSE */

    [...]
}

As the mail app developers don’t want to add a horizontal reading pane to the app I have been using the custom css app 5 in order to do so, I also wrote a quick user script to automatically expand all my folders as that isn't an option in the mail app.

Jump to the Auto Expand script

Horizontal reading pane in mail app

Note: Tested in Firefox and Nextcloud 15

Usage:

1. Know what you are doing.
2. Install the custom css app.
3. Navigate to Admin -> Theming.
4. Paste contents of this CSS file into the custom CSS text area 6.
5. Save.

Currently I have:

• The basic Horizontal layout
• Added a resize to the message list so you can drag it up and down for simpler management of mail
• Added a yellow highlight to The images have been blocked to protect your privacy notification
• Added the color #ebebeb as the message header background to better separate panes
• Added a thick border color #ebebeb to the top of the reply field to better separate it from the current message
• Shrunk the load more messages scroll down area
• Realigned the empty messages background
• Changed subfolder background color from gradient to solid
• Added indicator line to subfolder Parent
• Added indicator line and Bold text to open Parent Folder

Auto Expand mail folders using GreaseMonkey

Requirements:

1. The Latest Firefox
2. Greasemonkey 4.3 or greater

Open the Greasemonkey dashboard and click the + sign to add a new script.

Past the following code, changing the yourdomain.tld to your domain:

// ==UserScript==
// @name     Nextcloud Mail Expand folders
// @namespace   https://yourdomain.tld/
// @include     https://yourdomain.tld/apps/mail/*
// @require     https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @version  1
// @grant    NEXTCLOUDMAIL
// ==/UserScript==

/* Paste Here */

this.$ = this.jQuery = jQuery.noConflict(true);

console.log('[ NMEF ] - Waiting');
waitForKeyElements (".navigation-account", expandALL, true);

function expandALL() {
  console.log('[ NMEF ] - Expand ALL Folders');
  $('.account-toggle-collapse').trigger("click");
  console.log('[ NMEF ] - Expand individual Folders');
    $('.with-counter.collapsible > button').trigger('hover').trigger("click");
    $('.with-counter.collapsible.ui-droppable > button').trigger('hover').trigger("click");
}

Note: this loads the remote content jquery and waitForKeyElements.js, if you wish to have them bound locally open the // @require links and past the contents at the / Paste Here / line. Then just delete the lines:

// @require     https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js