Add redesigned dark theme

[jryans]

This adds the new unified palette to the dark theme to define a few top level colors and let those flow down to the more specific color names. It also updates some global colors (like accent) that are the same for all themes. Many more icons are also converted to mask in CSS approach to support easy theming.

Used in element-hq/element-web#8540
Implements the bulk of element-hq/element-web#7578

[aaronraimist]

It would be nice to use a white [m] logo in the room directory

[aaronraimist]

Also the LLP is still using a black scroll bar for me

[aaronraimist]

Should there be a more visible vertical line here?

[aaronraimist]

On the Create Community page, it is quite hard to read the + and domain

[aaronraimist]

Placeholder text is hard to read

[aaronraimist]

Editing an event in developer tools is hard to read

[aaronraimist]

The markdown button status appears to be reversed

and when markdown is disabled these formatting buttons are hard to see

[ara4n]

@nadonomy in terms of feedback on the overall theme design, i think we also need to make the hairlines more visible for dragging purposes - plus i wonder if we're too high contrast, at least for a dark theme, especially when compared with the old dark theme. This feels more like a black theme to me?

I wonder whether the less contrasty primary bg/fg colours from jouni's mockup might be helpful:

[nadonomy]

@nadonomy in terms of feedback on the overall theme design, i think we also need to make the hairlines more visible for dragging purposes - plus i wonder if we're too high contrast, at least for a dark theme, especially when compared with the old dark theme. This feels more like a black theme to me?

I wonder whether the less contrasty primary bg/fg colours from jouni's mockup might be helpful:

Increasing the legibility of the hairlines is a no brainer but let's chat more on Riot about the overall darkness and fg/bg colours as they're extremely multifactorial (unifying accent colours across themes, platforms and branding, avoiding 'shoulder surfing' similarity to Discord, Ryan's screenshot taken in FF with heavier font rendering, exacerbating the contrast compared to the Sketch comp with lighter weights and lashings of negative space... and perhaps some subjectivity ;).

[jryans]

Thanks @aaronraimist for the early feedback! I had addressed some of the issues in this branch:

• Composer icons (markdown disabled still needs some work though)
• <textarea>, <input> text / placeholder color
• Prefix / suffix on create community

For the others, let's track them elsewhere so the feedback isn't lost.