Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark theme #1635

Closed
gwicke opened this issue Jun 13, 2016 · 13 comments
Closed

Dark theme #1635

gwicke opened this issue Jun 13, 2016 · 13 comments
Assignees
Milestone

Comments

@gwicke
Copy link

gwicke commented Jun 13, 2016

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:

image

@ara4n
Copy link
Member

ara4n commented Jun 14, 2016

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

@ara4n
Copy link
Member

ara4n commented Oct 11, 2016

@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
Copy link

clopez commented Nov 4, 2016

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
Copy link
Contributor

Mikaela commented Dec 21, 2016

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
Copy link
Contributor

k3vmcd commented Dec 27, 2016

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
Copy link
Member

ara4n commented Dec 27, 2016

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:

screen shot 2016-12-27 at 15 45 34

screen shot 2016-12-27 at 15 45 25

@ara4n ara4n added this to the UX Fixes milestone Jan 12, 2017
@ara4n
Copy link
Member

ara4n commented Jan 12, 2017

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

@ara4n ara4n self-assigned this Jan 16, 2017
@ara4n
Copy link
Member

ara4n commented Jan 20, 2017

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
Copy link
Member

ara4n commented Jan 30, 2017 via email

@Torxed
Copy link

Torxed commented Jan 30, 2017

@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
Copy link

knfiey commented May 2, 2017

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

@sabrehagen
Copy link

Where is the dark theme in the current release?

image

@t3chguy
Copy link
Member

t3chguy commented Jan 3, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests