Element-web: UI issues with the v1 dark theme (pre-redesign)

Created on 19 Jan 2017  Â·  39Comments  Â·  Source: vector-im/element-web

"Issues" being a loose term. This is intended to be a collection of hard-to-see and similar oddities in the dark theme.

Edit: Reference #2984
Edit: I'll try to keep this list updated as issues are fixed/added

bug p2 cosmetic theming uux
Source
picture turt2live
👍6

Most helpful comment

  • [ ] "X" icon when viewing user is hard to see (as reported by jgkamat at https://matrix.to/#/!DgvjtOljKujDBrxyHk:matrix.org/$14992830915197160WLwNO:matrix.org)
picture uhoreg on 5 Jul 2017
🎉1 👍1

All 39 comments

In the following screenshot, there are two issues:

  • [x] The currently opened room's background color is pure black, which looks out of place with the slate/dark grey of everything else. The selected room should be darker than the others, but not that dark. In the screenshot, I have #riot open.

  • [x] When you hover over other rooms, the room icon gets an overlay to indicate it's being hovered on. The overlay seems to be too light though, (i.e., it lightens the room icon) which also feels out of place in the dark theme. Perhaps darkening would work better. In the screenshot, I'm hovering over #matrix.

dark theme issues

alexmat2on picture alexmat2on on 19 Jan 2017
  • [x] Another case: Ping notifications are a bit harsh on the eyes.
    image

(I quite like it like this... --Matthew)
~ Fair point. It does entice me to actually read my messages. - Travis

turt2live picture turt2live on 19 Jan 2017

  • [x] The light-grey text on white background in these sorts of menus is a little hard to read:

  • [x] 2light1

  • [x] 2light2
alexmat2on picture alexmat2on on 19 Jan 2017
  • [x] Start chat dialog (Chrome).

image

turt2live picture turt2live on 19 Jan 2017
  • [x] Mute icon under the room's context menu for notifications
    image
turt2live picture turt2live on 19 Jan 2017
  • [x] dark icons in general are too dark - e.g. padlock, close-buttons, photo button on User Settings.

thanks for enumerating all these (and continuing to do so); will get them all sorted before we release it.

For big lists like this, please do use * [ ] markdown notation to make it easy to track all the subissues and check them off as they're sorted.

ara4n picture ara4n on 20 Jan 2017
  • [ ] non-Gemini scrollbars are too light:

screen shot 2017-01-20 at 20 11 00

  • [x] ...and gemini ones are too dark
ara4n picture ara4n on 20 Jan 2017
  • [x] selector when inviting is white-on-white
ara4n picture ara4n on 31 Jan 2017
  • [x] Manage integrations dialog - close button, text, icons
    image

More screenshots for integrations:

  • Github (adding)
    image
turt2live picture turt2live on 2 Feb 2017
  • [x] RTE
    image

Steps:

  1. Enabled RTE
  2. Clicked bold (without text in field)

Entering text after the asterisks causes it to be readable, however backspacing back to the asterisks causes the same effect as above.

turt2live picture turt2live on 3 Feb 2017
  • [x] Logging out of an account that had the dark theme enabled. (This is post-logout, no page refresh)
    image

Edit: Added more information

  • [ ] And then logging in to an account later (guest, in this case)...
    image
turt2live picture turt2live on 3 Feb 2017
  • [x] Some images end up caching to the light version for long-time light theme users (or those starved of having the dark theme until recently).
    image

This is probably a non-issue in a way.

turt2live picture turt2live on 3 Feb 2017
  • [x] Join room 'room does not exist' message
    image
turt2live picture turt2live on 7 Feb 2017

see https://github.com/vector-im/riot-web/issues/3178

turt2live picture turt2live on 8 Feb 2017

mx_Login_field_prefix, mx_Login_field_suffix background colour

2017-05-08-161844_530x583_scrot

lukebarnard1 picture lukebarnard1 on 8 May 2017

For those not watching this aggressively, I've updated the OP.

turt2live picture turt2live on 27 May 2017

I think "Unencrypted room" indicator is done now. It was an ambiguous inconsistency, one of my first PRs :P
image

t3chguy picture t3chguy on 9 Jun 2017

@t3chguy are you still working on this theme?

tessgadwa picture tessgadwa on 10 Jun 2017

Me? Working on this theme? I fixed any issues that hurt my eyes is all :P
I have 0 UI skillz

t3chguy picture t3chguy on 10 Jun 2017

Cool. I've been wanting to dive back in, but a little discouraged since my PR for the light contrast theme never completed review.

tessgadwa picture tessgadwa on 10 Jun 2017

the light contrast theme is still on my radar; we are just drowning in PRs and releases atm. I haven't forgotten it.

ara4n picture ara4n on 10 Jun 2017

@t3chguy there's two icons for the encrypted icon, the one you mention is fixed:
image

turt2live picture turt2live on 10 Jun 2017

ah @turt2live I must've missed it
that one is plainly missing an invert, I will sort it

t3chguy picture t3chguy on 10 Jun 2017

@turt2live sorted :)

t3chguy picture t3chguy on 10 Jun 2017

thanks @ara4n all good.

tessgadwa picture tessgadwa on 10 Jun 2017

Encrypted room icon in room settings is purple now...
image

turt2live picture turt2live on 13 Jun 2017

oh heck, I guess it should only have the flipColour class when its unlocked. I shall fixy @turt2live
...
fixed by #1088

t3chguy picture t3chguy on 13 Jun 2017
  • [ ] "X" icon when viewing user is hard to see (as reported by jgkamat at https://matrix.to/#/!DgvjtOljKujDBrxyHk:matrix.org/$14992830915197160WLwNO:matrix.org)
uhoreg picture uhoreg on 5 Jul 2017
🎉1 👍1

Texts: legibility of dark blue and other troublesome colours on the dark grey background

Borrowed from issue 4403:

2017-07-30 11 03 35 without mx_roomheader_avatar

Troublesome colours include:

  • dark blue (e.g. the word _Shrustika_)
  • mid blue (e.g. _geraldobarros_)
  • red (e.g. _michaelkohler_)
  • purple (e.g. _karanganesan_ and _Jandit_).

Related

Optionally include higher contrast colour scheme · Issue #2300 · vector-im/riot-web

grahamperrin picture grahamperrin on 30 Jul 2017
👍1

@grahamperrin I think that is an issue with the bot using those colours rather than Riot as I think it would also affect many IRC clients with dark backgrounds.

Mikaela picture Mikaela on 31 Jul 2017

With a different bot, a different troublesome colour (darker purple, I think):

2017-08-02 18 58 45

Should there be separate issues for each bot?

grahamperrin picture grahamperrin on 2 Aug 2017

@grahamperrin the bot related issues should probably end up in their respective repository

t3chguy picture t3chguy on 2 Aug 2017
👍1

The mx_filterFlipColor apprach seems to me to put the logic in the wrong place. Why not instead select these same elements, by their semantic names, in the SCSS code, instead of making styling decisions in the components?

aidalgol picture aidalgol on 15 Apr 2018

label: _redesign_, https://github.com/vector-im/riot-web/labels/redesign

… or, is the dark theme in the current _redesign_ distinct from this older _new_ dark theme?

grahamperrin picture grahamperrin on 26 Jan 2019

The new new dark theme stuff is being tracked here: https://github.com/vector-im/riot-web/issues/8554

turt2live picture turt2live on 13 Feb 2019
👍1

I don't see anything else in here that is still applicable to the new dark theme

aaronraimist picture aaronraimist on 18 Jan 2020

Close this, and replace #8554 on your Roadmap ->

SMALL: Implement Black Theme and make dark theme lighter [issue]

I actually believe adding this to First Time User Experience roadmap would be better. The current Dark Theme doesn't look good. Example; the lines
image
image

And the loading, as said before. But the outlines around the loading box doesn't have the harsh lines which should be default everywhere :+1:
image

ghost picture ghost on 9 Jun 2020
  1. https://github.com/vector-im/riot-web/issues/2988#issuecomment-313205493 seems to be fixed
  2. Checkboxes "Autocomplete field not themed" and "Room directory join icon too dark #3349" can be checked
yannicka picture yannicka on 18 Jul 2020

I'm closing this as it is now 2 brands old and isn't really in a useful format by today's standards - please open new issues for each issue, though preferably they are zoned for the design team to take a look when they encounter the area.

turt2live picture turt2live on 31 Aug 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

richvdh picture richvdh  Â·  3Comments
arthurlutz picture arthurlutz  Â·  3Comments
bagage picture bagage  Â·  3Comments
ara4n picture ara4n  Â·  3Comments
NotAFile picture NotAFile  Â·  3Comments