Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft: Add a Dark Mode #3857

Merged
merged 3 commits into from
Jan 5, 2023
Merged

Draft: Add a Dark Mode #3857

merged 3 commits into from
Jan 5, 2023

Conversation

ndd7xv
Copy link
Contributor

@ndd7xv ndd7xv commented Dec 6, 2022

Fixes #2274 (if merged)

Hello! Saw this on TWiR and thought I'd give it a go; I have no experience with frontend work so I'm completely OK with scrapping this PR too.

This sets dark mode for users who have dark color schemes preferred. I tried replicating a similar color scheme to docs.rs' Dark theme because I thought it'd look nice. I'm also down to change the color scheme, but I kind of agree about not liking straight white-on-black, which is discussed in a previous attempt to bring a dark mode (#1089 (comment)).

Preview:
image
image

I understand that this doesn't give users the option to change between themes. If that prevents a merge, I'll try and spend additional time to implement some tri-state widget as mentioned by @flying-sheep.


I also added a tiny commit that's unrelated to dark mode that fixes a typo (developments in Rust community -> developments in THE Rust Community). In addition, I added margins to make it look nicer and aligned with the other components like the input and header text. Without the margins:

image
image

With margins and fixed typo:

image
image

Adding margins is kind of a subjective choice, and my choice in color scheme is also just my preference, so please let me know what you all think!

@nellshamrell
Copy link
Contributor

Ty so much! I will get this reviewed either before or during the weekend!

@flying-sheep
Copy link
Contributor

I like it! The only thing that jumps out to me as something I’d change is that the <code/> elements are still dark-on-light. I think they should have less contrast with the background and be light-on-dark in dark mode.

makes code blocks have light text on dark background and made it so that pre blocks (seen in quote of the week at https://this-week-in-rust.org/blog/2017/06/20/this-week-in-rust-187/) also have text colors that correspond to their theme (instead of boostrap defaults)
@ndd7xv
Copy link
Contributor Author

ndd7xv commented Dec 8, 2022

I modified the code/pre block so it looks like this (screenshot of what https://this-week-in-rust.org/blog/2017/06/20/this-week-in-rust-187/ would look like in dark mode):

Screenshot 2022-12-08 at 17-30-37 This Week in Rust 187 · This Week in Rust

@nellshamrell
Copy link
Contributor

That does look nice! I do want there to be an option to switch between dark and light mode, though, as people have different preferences (and sometimes it depends on the light of the room you are in, etc.)

@flying-sheep
Copy link
Contributor

If someone has a preference, they can configure it in their OS or their browser.

So the only advantage would be if someone wants dark mode, but is on windows 10 or lower and is forced to use a browser that doesn’t have an addon with a toggle switch. Given the complexity of the implementation, I think adding a toggle should probably go into a separate PR: keep this one focused on style, the next one can be bike shedding about how to best implement a toggle.

@holly-hacker
Copy link

Is there anything blocking this PR? It seems quite useful :)

@nellshamrell
Copy link
Contributor

I think this is good to merge! Ty so much @ndd7xv!

@nellshamrell nellshamrell merged commit 4799c89 into rust-lang:master Jan 5, 2023
@ndd7xv
Copy link
Contributor Author

ndd7xv commented Jan 5, 2023

Thanks! With this change live, I noticed I hadn't changed some CSS for tables! I'll try and do that tonight since it shouldn't take too long.

I'll also open an issue/request to implement a tri-state toggle or button to change the theme - sorry I didn't get to that, I've been kind of busy and I don't know to much in this domain.

PR to fix table row colors in dark mode: #3937
Issue to change color themes on site: #3938

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature request: Dark theme for the website
4 participants