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

[turt2live]

"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

---

• Markdown code blocks
  

• "Unencrypted room" indicator

  • 
  • 
  • UI issues with the v1 dark theme (pre-redesign) #2988 (comment)

• Chrome - Doesn't play nice when changing the theme for the first time
  Fixed via matrix-org/matrix-react-sdk@a88f9fd

• Context menu on a message
  

• Radio buttons are hard to see in Chrome (I'm not sure there's much that can be done, however)
  

• Currently opened room's background color is pure black

• Icon overlay on room hover doesn't match the theme very well

• Light background menus hard to see

• Start chat dialog text field

• Icons too dark 1 | 2 | 3

• Scrollbars don't match theme

• Invite selector too light 1 2

• Manage integration dialog

• Rich Text Editor

• Logout woes

  • Prefix/placeholder assists on login page

• Caching woes

• Room does not exist warning

• Tables (markdown)

• Selected text is hard to see - dark theme selected text is illegible #3140

• File upload icon is broken (?) - file upload icon is broken on dark theme #3138

• Queued vs sent message diff not working - queued and sent msg diff is broken on dark theme #3134

• Voip bar - dark theme on voip bar is buggered #3182

• RTE Markdown indicator unclear - Markdown indicator in RTE is unclear #3208

• White halos on avatars - Ugly white halos on black avatars #3203

• Vertical scrollbar on wide code blocks falls behind text, leading to zebra stripes
  

• Kick (and presumably ban) dialog reason text entry Font in field too dim. #3927 and Font in field too dim. #3927
  

• Dark tint makes buttons look disabled - Dark theme on dark tint makes buttons look greyed out #3328

• Redactions
  

• Unread messages banner - 'X' button on 'Jump to first unread message' bar is hard to see in dark theme #3783

• Quoted text/url previews makes things look like gaps. Dark theme: you can't see the quote mark in the dark theme, so for unrenderable URL previews it looks like a oddly-large gap. #3393

• Quoted text is hard to read

• Room directory join icon too dark join button broken on dark theme roomdirectory #3349

• new code block coloring Code blocks without syntax highlighting illegible on dark theme #4444

• close icons hard to see

• changelog text hard to read Change log text too dark on dark theme #4637

• IRC bridged colors hard to see

• Autocomplete field not themed

[alexmat2on]

In the following screenshot, there are two issues:

• 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.

• 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.

[turt2live]

• Another case: Ping notifications are a bit harsh on the eyes.
  

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

[alexmat2on]

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

• 

• 

[turt2live]

• Start chat dialog (Chrome).

[turt2live]

• Mute icon under the room's context menu for notifications
  

[ara4n]

• 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]

• non-Gemini scrollbars are too light:

• ...and gemini ones are too dark

[ara4n]

• selector when inviting is white-on-white

[turt2live]

• Manage integrations dialog - close button, text, icons
  

More screenshots for integrations:

• Github (adding)
  

[turt2live]

• RTE
  

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]

• Logging out of an account that had the dark theme enabled. (This is post-logout, no page refresh)
  

Edit: Added more information

• And then logging in to an account later (guest, in this case)...
  

[turt2live]

• 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).
  

This is probably a non-issue in a way.

[turt2live]

• Join room 'room does not exist' message
  

[turt2live]

• Markdown tables
  
  https://matrix.to/#/!UcYsUzyxTGDxLBEvLz:matrix.org/$1486578180361WpSMO:safaradeg.net (#offtopic)

see #3178

[lukebarnard1]

mx_Login_field_prefix, mx_Login_field_suffix background colour

[turt2live]

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

[t3chguy]

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

[tessgadwa]

@t3chguy are you still working on this theme?

[t3chguy]

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

[tessgadwa]

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

[ara4n]

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

[turt2live]

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

[t3chguy]

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

[t3chguy]

@turt2live sorted :)

[tessgadwa]

thanks @ara4n all good.

[turt2live]

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

[t3chguy]

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

[uhoreg]

• "X" icon when viewing user is hard to see (as reported by jgkamat at https://matrix.to/#/!DgvjtOljKujDBrxyHk:matrix.org/$14992830915197160WLwNO:matrix.org)

[grahamperrin]

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

Borrowed from issue 4403:

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

[Mikaela]

@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.

[grahamperrin]

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

Should there be separate issues for each bot?

[t3chguy]

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

[aidalgol]

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?

[grahamperrin]

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?

[turt2live]

The new new dark theme stuff is being tracked here: #8554

[aaronraimist]

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

[ghost]

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

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

[yannicka]

1. UI issues with the v1 dark theme (pre-redesign) #2988 (comment) seems to be fixed
2. Checkboxes "Autocomplete field not themed" and "Room directory join icon too dark join button broken on dark theme roomdirectory #3349" can be checked

[turt2live]

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.