Roundcubemail: 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):

[Skorpion]

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!