Element-web: Dark theme follow up issues

[jryans]

[nadonomy]

Awesome! Small stuff, but:

• [x] E2E icons should use primary/notice colours (fixed in https://github.com/matrix-org/matrix-react-sdk/commit/feb92957c0aca8782455a8eff83cae885613e87a)
• [x] Vertical bar splitting top right icons isn't skinned (should we take the primary icon colour and apply 50% opacity?) (fixed in https://github.com/matrix-org/matrix-react-sdk/commit/4409636c0b969d12785eaee4e3d127ebcfdf4381)
• [x] (+) icons in room list not skinned
• [x] @mention backgrounds not skinned (for now using the room highlight bg would be ok) (fixed in https://github.com/matrix-org/matrix-react-sdk/commit/422750082d16017599625df04637bfb1f4050c15)
• [x] Adjust gradient to use rgba for Safari (fixed in https://github.com/matrix-org/matrix-react-sdk/commit/5f6907c85eafd5083e000bf4b977a492544e547c)
• [x] Change box shadow on top left menu to use bg value (fixed in https://github.com/matrix-org/matrix-react-sdk/commit/f64f39f773cbe484d2dbeb1c1d2cb78d607f7574)
• [x] LLP should be #15171B not #1C1F24 (subtle, but important to establish the same depth hierarchy as the light theme)
• [ ] E2E composer decoration, and message hover decoration should use new palette (we're missing a yellow, maybe use the orange if we don't have a yellow when you tackle this)

[jryans]

• [x] Tweak color values to v2 from Nad (fixed in https://github.com/matrix-org/matrix-react-sdk/commit/e09963cdfb660019377f9046ddbe151e0e6949e5)

[aaronraimist]

• [x] Markdown button status appears reversed
  
• [x] Should there be a more visible vertical line here?
  
  
• [ ] It would be nice to use a white [m] logo in the room directory
  
• [x] "INVITED" in user list is hard to see (https://github.com/matrix-org/matrix-react-sdk/pull/2656)
  
• [x] Room settings that you can't update are hard to read
  
• [ ] Safari scrollbars are dark but (one of the) Firefox scrollbars is light. Which is intended? Is Gemini getting killed before 1.0?

[Half-Shot]

Can I chuck in:

• [x] \

[turt2live]

• [x] [dialogs don't feel like they have enough of a backdrop on the dark theme · Issue #8584](https://github.com/vector-im/riot-web/issues/8584)
• [x] [no hover effect on messages in new dark theme](https://github.com/vector-im/riot-web/issues/8580) (fixed in https://github.com/matrix-org/matrix-react-sdk/pull/2654)

[anoadragon453]

• [x] https://github.com/vector-im/riot-web/issues/8586: Impossible to tell difference between sent/not-sent messages
• [x] https://github.com/vector-im/riot-web/issues/8589: Typing indicator on dark theme
• [x] #8603: Home screen text is unreadable on dark theme

[turt2live]

• [x] [Pills are hard to read in new dark theme · Issue #8587](https://github.com/vector-im/riot-web/issues/8587)

[turt2live]

• [x] Widgets blend in with the timeline
  

[nadonomy]

@jryans re widgets blending; they should be using the header/panel background colour

[Half-Shot]

(could people put names next to their issues if possible so I don't have to mouse over all of them?)

[Cadair]

The spinner looks particularly bad on the dark theme I think. It's got a white line around the edges etc.

[Cadair]

• [x] Also, the redacted message bar thing seems much more stark than on the light theme. (fixed in matrix-org/matrix-react-sdk@91c91c5ca9cec166d90b71211a4f14b61ffcdf93)

[turt2live]

re: redaction bar. There is a dark theme asset from the old design somewhere.

[jryans]

• [x] [make dark names more readable when using dark theme · Issue #8611](https://github.com/vector-im/riot-web/issues/8611)

[jryans]

• [x] [Markdown indicator on dark theme is invisible when in RTE mode · Issue #8637](https://github.com/vector-im/riot-web/issues/8637)

[nadonomy]

• [x] 'back' Chevron in member panel

[turt2live]

• [x] [Redaction thingy](https://github.com/vector-im/riot-web/issues/8559)
• [ ] [File drop UI](https://github.com/vector-im/riot-web/issues/8663)

[Cadair]

Some large code blocks are unreadable:

https://matrix.to/#/!pSKzsvYeCMfoKeaeZc:matrix.org/$1550177025286HfaRh:openastronomy.org?via=cadair.com&via=openastronomy.org&via=matrix.org

[turt2live]

• [ ] [Concerns with color scheme being hard on the eyes](https://github.com/vector-im/riot-web/issues/8664)

[Half-Shot]

@Cadair https://github.com/vector-im/riot-web/issues/8554#issuecomment-463222141 :)

[turt2live]

• [x] ["INVITED" header in member list](https://github.com/vector-im/riot-web/issues/8679)

[jryans]

• [x] [Member search is impossible to read on dark theme and has no clear button](https://github.com/vector-im/riot-web/issues/8673)

[progserega]

Dark theme is very contrast - it is heavy for eyes.
Old dark theme was more nice for eyes. Do you can add third theme with old grey color?

[jryans]

• [ ] [visibility labels on roomdirectory need to be designed and inverted on dark theme](https://github.com/vector-im/riot-web/issues/8721)

[jryans]

• [ ] [Distinguishing rooms with new events is hard in the dark theme](https://github.com/vector-im/riot-web/issues/8729)

[anoadragon453]

• [ ] [Code Scrollbars in dark theme are invisible](https://github.com/vector-im/riot-web/issues/9052)

[SilverWolf32]

Spinners should _definitely_ be inverted to match the background. I don't know if this is OS X-specific, but on here it looks awful.

[SilverWolf32]

Also, the desktop app's window title bar on OS X is still light, even when using the dark theme. I'm not quite sure whether to put that here or somewhere else, since it's desktop-specific, but it's definitely noticeable, pretty much forcing me to use the client full screen. (The latest OS X has system-wide dark mode, and apps have to explicitly opt in to get dark-themed.)

[dkasak]

Username highlights on the dark theme look awful while unselected due to the brownish background colour:

It's a bit better when selected since it then changes to a grey shade:

[Mattwmaster58]

Also, the desktop app's window title bar on OS X is still light

This is also the case with Windows

[t3chguy]

When inactive yes, when active it matches the theme colour as expected.

[Mattwmaster58]

@t3chguy, huh, that's strange. Here's a screenshot with the window active:

I've never seen the title bar styled properly.

riot-web version: 1.5.12
olm version: 3.1.3

[t3chguy]

What does your explorer window look like in comparison?

[Mattwmaster58]

Dark - I have windows dark theme on. I have set 'follow system theme set' in riot web settings

[HelderFSFerreira]

I have the same issue as @Mattwmaster58 on windows 10 with dark mode enabled.