search

rust-lang / rust-playground

The Rust Playground
https://play.rust-lang.org/
Apache License 2.0
1.2k stars 203 forks source link

Add dark mode #1023

Open jprochazk opened 7 months ago

jprochazk commented 7 months ago

Fixes https://github.com/rust-lang/rust-playground/issues/544

This uses the media query approach described in the issue. The dark theme I came up with here was created using the dark reader extension and some manual tweaking. I'm not a designer, so happy to change the colors further until it looks acceptable.

prefers-color-scheme: dark

image

prefers-color-scheme: light (unchanged)

image

shepmaster commented 6 months ago

Thanks, this is a great start!

Like you, I'm not a designer and I think it's fine to iterate on specific colors after getting all the CSS variables in place. There are two main points I have with the current state:

  1. There are more colors that seem like they should be updated. Key ones:

    • Notifications image
    • Menus image
    • Links (these are basically unreadable) image
    • Help page (and code samples) image

  2. Making the color scheme choosable by the user. I think that basically we should have a user setting that is { light, dark, system } that defaults to system.

I think point 1 should be addressed in this PR. Point 2 can be done later, I'd just like to make sure that we can see a path forward to that world.

jprochazk commented 6 months ago
  1. There are more colors that seem like they should be updated

I went through all the ones you listed, and found a few more along the way, such as the <select> and <option> element background colors.

  1. Making the color scheme choosable by the user

I have a PoC for that on this branch: https://github.com/jprochazk/rust-playground/tree/dark-mode-selector

It adds a website.theme configuration option, and a selector for it in the Config menu. The configuration option is persisted in local storage. The theme is now controlled by both JS and the media query:

To avoid duplicating all the theme variables, I added the postcss-mixins plugin and defined the variables in mixins.