Make deeper widgets darker (dark theme)

[joeytwiddle]

I read a suggested principle of dark theme design, that:

Deeper UI elements should be darker, and raised elements should be lighter.

(Because that is how shadows work in real life)

Traditionally edit boxes and search boxes are considered deeper elements (we put things inside them), while buttons are considered raised (we push them).

So I thought I would try to apply that principle to the new Dwitter dark theme.

Caveat: Unfortunately I cannot find the original source of that principle right now, and when I looked at Twitter, Telegram and Discord dark themes I found mixed evidence, mostly contradictory! But I find this design style resonates with me, so I would like to offer it anyway.

Before (current beta)

After (this PR)

This applies the principle to the dweet cards, but not to the page background.

Extreme version

The extreme version is somewhat similar to the original dwitter dark theme (in that the cards are lighter than the background, although that also had very dark input boxes). I feel this one is most analogous to the real world, it almost looks 3D.

If you prefer the extreme version, here is the CSS:

``` dark: { key: "dark", mainTextColor: "#eee", pageBackgroundColor: "#0b0b0b", headerBackgroundColor: "#131313", mainBackgroundColor: "#1b1b1b", secondaryBackgroundColor: "#131313", secondaryTextColor: "#888", secondaryBorderColor: "#333", codeEditorBackgroundColor: "#131313", focusedTextInputBackgroundColor: "#222", focusedTextInputTextColor: "#fff", modalBackgroundColor: "#0b0b0b", }, ```

[joeytwiddle]

What are the arguments against this design principle?

1. Because sunken elements are relatively rare, we will end up with a screen that is not all that dark!

2. ...

[sigvef]

Makes sense! Seems like a popular approach is to nudge the hues slightly towards blue as well. I might experiment a bit with that as well.