[dashboard] Implement a dark theme

[jankeromnes]

Fixes #3806

How to test:

• Change your System default theme (prefers-color-scheme: dark works, and any changes are detected & applied automatically)
• Force Light or Dark theme, or reset to System, in https://jx-dark-theme.staging.gitpod-dev.com/preferences

[jankeromnes]

🎰
/werft run

👍 started the job as gitpod-build-jx-dark-theme.3

[jankeromnes]

🎰
/werft run

👍 started the job as gitpod-build-jx-dark-theme.4

[jankeromnes]

🎰
/werft run

👍 started the job as gitpod-build-jx-dark-theme.5

[jankeromnes]

🎰
/werft run

👍 started the job as gitpod-build-jx-dark-theme.6

[jankeromnes]

🎰
/werft run

👍 started the job as gitpod-build-jx-dark-theme.8

[meysholdt]

Can we add a "System" option to "Preferences" -> "Color Schema" (like Vercel does it)?

Or do it like Slack does it?

I would love this because macOS changes my desktop to "light" every morning and to "dark" every eventing (setting: "auto") and I would love Gitpod to blend in.

[jankeromnes]

Can we add a "System" option to "Preferences" -> "Color Schema" (like Vercel does it)?

Sure. The value already defaults to your System preference, but we could add an extra option that removes any forced theme:

• Light --> localStorage.theme = 'light'
• Dark --> localStorage.theme = 'dark'
• System/OS/Auto --> localStorage.removeItem('theme')

[gtsiolis]

Strong vote for adding a system default option! This was already the plan! 🌙

[jankeromnes]

Strong vote for adding a system default option! This was already the plan! 🌙

Alrighty, done! ✅

[svenefftinge]

/werft run

👍 started the job as gitpod-build-jx-dark-theme.20

[gtsiolis]

Taking a first second look at this now! 👀

[jankeromnes]

I think the biggest remaining items here are the inputs (e.g. in Account and in the "New Env Variable" modal).

What should inputs look like? Still like this?

[gtsiolis]

These are the initial specs for the inputs which are using a slightly different stroke (border color and width) on the product right now. For example, we decided to go for 1px border width for now. However, enabled and disabled state colors should be good to use as is.

[jankeromnes]

Update: Styled all inputs + other minor improvements. Starting to run out of things that don't look awesome. 😇

Would love to merge this soon 🚀 because the PR touches many places in the UI and thus has a high risk of conflicts.

[gtsiolis]

Thanks for resolving the conflicts and updating the input styles @jankeromnes! 🙏

Looks good, getting better and better. 🌟

Will take another look now with an old fashioned on the side. 🥃

[gtsiolis]

Thanks for pushing this through the finish line @jankeromnes! 🏁

Left a few comments below covering most of the pages. Once we have these changes in place we can continue tackling the rest of the product. 😅

Cross-posting here for visibility that the amazing @aledbf is removing tailwind.output.css in #3830. Maybe we should add this file to .gitignore but this is certainly out of the scope of this PR.

[gtsiolis]

question: Can we set the scrollbar shadow to dark everywhere when using dark theme to avoid having scrollbars pop up when having scrollbars visible? See css-scrollbar.

[jankeromnes]

@gtsiolis On my mac, all scrollbars are native to the OS (whether in Chrome or Firefox, I can't seem to change anything about their style, but in fact they always look just right whether in light theme or dark theme).

Which OS was this screenshot taken on? Also, does the example from https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color work there? (On my mac, the MDN example shows always the same native scrollbar in Firefox, and the example widget doesn't even load in Chrome).

[gtsiolis]

@jankeromnes this is only shown when you have scrollbars always enabled, see relevant docs. Running macOS 10.15.7. See also relevant article on scrollbars. 👀

[jankeromnes]

Good suggestion but needs further research. Leaving as follow-up. 😇

EDIT: #3981

[gtsiolis]

Thanks for opening the follow-up issue, @jankeromnes! 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯 💯

[filiptronicek]

It looks like in the dark mode version the user is more driven to click on Go to Dashboard instead of Open Workspace, because the white button makes the contrast that much higher, can we do something like make it greyer or make the contrast lower in some way? This may be a bad idea but it just popped into my head looking at the designs.

/cc @jankeromnes

[gtsiolis]

Thanks for noticing @filiptronicek! This will be improved with #3901 (comment). Keep in mind this is still work in progress. 🏁

[jankeromnes]

Wow, thank you for the best code review ever @gtsiolis. 🤯 💯 🥇 Will address your feedback this morning.

And indeed, good catch @filiptronicek! However, please note that the screenshots posted above are already very outdated. The view the latest state, please use the PR preview: https://jx-dark-theme.staging.gitpod-dev.com/workspaces/ (when it's available, that is -- the PR previews get dismantled after they're unused for 2 hours).

[filiptronicek]

Cool, looks way better now, I found this look a bit weird (/admin/[users|workspaces]), but maybe it's intentional @jankeromnes:

[jankeromnes]

Cool, looks way better now

Thanks! All credits go to @gtsiolis 😇

I found this look a bit weird (/admin/[users|workspaces]), but maybe it's intentional @jankeromnes:

Ah, indeed, great catch! That's because inputs have a non-transparent background by default in dark theme. However, that looks weird for search bars, so I've specifically fixed the Workspaces search bar, but obviously forgot about the admin panel search bars.

Will make a more generic fix for search bars. 😁 Thanks!