Elastic: Dark mode

[chris-kruining]

Would love to have a toggle to swap the color palette of the new elastic skin to a 'dark mode'. I technically could ask the server maintainer to change the .less files, but then I imagine the change would be for everybody, which is undesirable.

[alecpl]

There's some work on this front in #6691.

[chris-kruining]

awesome!

[thrdroom]

Why was this removed from the 1.5-beta milestone? Is there a new milestone for this feature/theme?

[mcnesium]

As a workaround to this we can add some tiny CSS snippet to the stylesheet, that just inverts the colors of everything plus rotates the colors back to their original tone, and then re-inverts images and iframes (the actual mail content).

Since I run RC in Docker, I volume-mount the stylesheet into the container. Here is the script I run after each update:

#!/usr/bin/env bash

CSS="
@media (prefers-color-scheme: dark) {
    body img,
    body iframe,
    body {
        filter: invert(1) hue-rotate(180deg);
    }
}
"

# copy possibly updated stylesheet
docker cp roundcube_app:/var/www/html/skins/elastic/styles/styles.css styles.css

# append the CSS snipped to the file
echo "$CSS" | xargs >> styles.css

# restart container to apply changes to the mounted stylesheet
docker-compose restart app

It then looks like this (minus the blurryness):

[ghost]

Check it: Roundcube Elastic Dark, required Stylus

[thrdroom]

Check it: Roundcube Elastic Dark, required Stylus

Please port your theme to roundcube as a native theme. Browser extensions like Stylus are just a workaround and not a proper solution. Thanks

[thrdroom]

@alecpl Why was this removed from the 1.5-beta milestone? Is there a new milestone for this feature/theme? Why was this issue closed when there is still no dark theme for elastic? tia

[alecpl]

The ticket was closed by his author. I guess we can re-open.

[alecpl]

I just pushed the initial implementation to master. Work in progress. https://kolabian.wordpress.com/2020/07/07/elastic-dark-mode/

[chris-kruining]

awesome, thank you for your hard work!

[gianlucagiacometti]

great job indeed!

[alecpl]

I consider this done. If you find any issues create a new ticket(s).

[Advewave]

where can i find the option for this? it isn't specified in your blog post and i cannot find it on my own roundcube installation.

[alecpl]

@Advewave This hasn't been released yet. The beta version is planned somewhere in the end of 2020.

[poblabs]

Downloading the master repo and uploading the skins/elastic initially gave me an error about the deps folder missing, so I merged it with my existing elastic theme folder, yet it doesn't give me the dark menu. Is there a way to activate it?

I can see it enabled in meta.json.

[AlphaJack]

@alecpl Any update on the beta version?

[alecpl]

There's a tremendous amount of work needed for PHP8 support, so maybe next month.

[DoCheckor]

Can't wait!

[mkmark]

Please port your theme to roundcube as a native theme. Browser extensions like Stylus are just a workaround and not a proper solution. Thanks

mkmark/elastic-dark

Here is a personal dark theme built based on an earlier version of the official Elastic theme. Tested on 1.4.6 and 1.4.10 (latest stable 20210131).

[Offerel]

One question: Is it possible to auto-enable the dark mode, upon browser request? For example, if a browser switch to night time automatically to dark mode, can this browser request an automatic switch to dark mode for elastic skin?

[mkmark]

One question: Is it possible to auto-enable the dark mode, upon browser request? For example, if a browser switch to night time automatically to dark mode, can this browser request an automatic switch to dark mode for elastic skin?

Yes. See prefers-color-scheme

[Offerel]

Currently it seems not to be implemented. At least I tested it with Firefox mobile. If I switch Android and with that Firefox, to dark mode, elastic stay with the bright theme. I must switch manually to the dark theme.

[mcnesium]

There is a clue in the layout but it is invoked by javascript. This might lead to unexpected behaviour and leaves the question behind, why it is not baked into the CSS directly.

[alecpl]

There's also code in ui.js that catches prefers-color-scheme changes. Works for me when switching prefers-color-scheme using developer tools in Firefox as well as Chromium on Linux. So, maybe this is Firefox mobile issue. Do you have it working with other pages?

[Offerel]

Yes, it's working fine on all other sites with Firefox Android stable. For example https://arnowelzel.de/automatischer-dark-mode-websites

[alecpl]

Please, check with a7b9d76. Delete the cookie first.

[Offerel]

At least with this change, dark mode is set equal to system mode, if the browser follows the system setting. Many thx. I have another wish for the mail list view, will open a new request for this.

[mcnesium]

@alecpl no offense, just curious: could you explain, why you are using javascript to invoke this instead of a media query?

[alecpl]

To have it easily available everywhere, e.g. on my desktop browser. Maybe at some point we can remove the button and do it only automatic.

[AlphaJack]

Is there a way to enable the dark mode everywhere by default, including the login screen?