Implement dark mode for rustup.rs website

[Bogay]

This PR introduces dark mode for rustup.rs website. For simplicity, I haven't added theme-switching logic in javascript. Instead, it relies solely on @media (prefers-color-scheme: dark) to override css variables for dark mode. The color palette is adapted from the blog's dark mode with a little modification (rust-lang/blog.rust-lang.org#1343).

However, I am not sure whther the I should adjust of the copy button. It currently uses the browser's default styles, which makes the "Copied!" feedback text slightly difficult to read in dark mode.

Screenshots

before:

after:

Close #4209

[rami3l]

Thanks a lot! Not using JavaScript is also what I'd prefer with the problem you are trying to resolve. Please feel free to adjust the remaining elements with the light theme background :)

View changes since this review

[Bogay]

I've moved the "Copied!" text out of the button so that it displays over body background like other link text. I think this make it a little more readable. BTW, I found that #platform-xxx-yyy selectors in rustup.css seems to be unused. Should I remove them?

light:

dark:

[rami3l]

I've moved the "Copied!" text out of the button so that it displays over body background like other link text. I think this make it a little more readable.

@Bogay Good idea! Lemme have a test locally and get back to you later, please be patient 🙏

BTW, I found that #platform-xxx-yyy selectors in rustup.css seems to be unused. Should I remove them?

I believe they are not "dead code" per se but rather reserved for future use, see below for an usage example :)

rustup/www/index.html

Line 45 in a373a2c

<div id="platform-instructions-win32" class="instructions display-none">

... the visibility is controlled either by your host platform, or by typing test and clicking n.

[rami3l]

Can we make the copy button dark mode-aware as well? Something among the lines of...

...
#platform-instructions-unknown button.copy-button {
    ...
    background-color: var(--code-shadow-color);
    color: var(--copy-button-text-color);
}

div.copy-icon {
    ...
}

div.copy-icon svg {
    fill: var(--body-color)
}

PS: Sorry if I misused your palette, I'm not super good at this 🙏

Otherwise, LGTM!

View changes since this review

[Bogay]

Can we make the copy button dark mode-aware as well?

Sure, but it seems that setting background color remove the hover effect. I've added a simple hover effect on it. The icon become teal when hover. Let me know if you have other concerns.

light:

	normal	hover
light
dark

I believe they are not "dead code" per se but rather reserved for future use, see below for an usage example :)

Thanks for the clarification! To clarify, I didn't intend to remove those IDs from index.html. My intention was to simplify the CSS selectors. Since the elements with the platform-instruction-* IDs already have the instructions class, we can just use that class to select them instead.

[rami3l]

I've added a simple hover effect on it. The icon become teal when hover.

@Bogay Looks cool, thanks!

My intention was to simplify the CSS selectors. Since the elements with the platform-instruction-* IDs already have the instructions class, we can just use that class to select them instead.

Sure, that's a good idea :)

[rustbot]

This PR was rebased onto a different main commit. Here's a range-diff highlighting what actually changed.

Rebasing is a normal part of keeping PRs up to date, so no action is needed—this note is just to help reviewers.

[Bogay]

I've updated the css selectors. Maybe it's ready to merge now?