Element-web: Dark theme

[gwicke]

It would be great if there was an option to use a dark theme.

Here is a very minimal set of CSS tweaks as a start:

body {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
/* Do not invert avatar images:
  invert(invert()) = not inverted */

.mx_BaseAvatar_image {
    -webkit-filter: invert(100%) !important;
    filter: invert(100%) !important;
    background: white;
}
/* Ensure the right panel has a defined background, too */

.mx_RightPanel {
    background: white;
}
/* Increase text contrast */

.mx_SenderProfile {
    color: #060606 !important;
}
.mx_MessageComposer_input textarea,
.mx_EventTile {
    color: black;
}

Combined with #1633, this looks like this:

[ara4n]

We do have an official dark theme that we need to get on and implement. This inverted one is fun too though :)

[ara4n]

@antikewl - i just realised that whilst we have an official dark theme for mobile, we don't have one for web. Would it be possible to get one? thanks!

[clopez]

Yes please. I would love a dark theme for the Web client. It would make much more pleasant the user experience for those of us that spend many hours at a day in front of a screen.

[Mikaela]

i just realised that whilst we have an official dark theme for mobile

How does one enable this dark theme for mobile? I haven't heard of it before.

---

Dark theme for Riot Web would be very nice to see, I cannot even use the Stylish plugin as I run Riot in nativefier and white screen is a lot worse for oversensitive sense of seeing than dark one even with laptop screen dimmed as down as possible.

I think Riot Web is currently also unusable to people with photosensitive eyes.

[k3vmcd]

I suggest allowing user to pick theme colors with templates to start from. My preference for an initial dark theme is the Solarized theme: http://ethanschoonover.com/solarized

[ara4n]

The official dark theme designs (as seen on iOS; they'd need to be ported to Web & Android) are as follows, if anyone has some bandwidth to contribute the necessary CSS:

[ara4n]

(i started work on this over christmas on the https://github.com/vector-im/riot-web/tree/matthew/scss branch)

[ara4n]

the official dark theme has now landed on web on /develop. #2988 has been started to track any bits which got missed in the theming :)

[ara4n]

we'll release it this week. in the interim, use the develop branch or riot.im/develop

[Torxed]

@ara4n yepp, jumped on the official app and asked, thought it'd be better than asking here so removed my comment. Not sure if my first comment mentioned it but I'll probably refuse to build anything called js in the name, node.js or otherwise :) hence why I'd like a pre-built release.

Thanks for getting back to me and looking forward to the next release.

[knfiey]

I also can't wait for the dark theme for android... 6 months later I can't find it...

[sabrehagen]

Where is the dark theme in the current release?

[t3chguy]

It's in settings, not room settings. @sabrehagen