Add dark mode

[lukebemish]

This adds a dark mode using the relevant @media css by default, with a button to toggle on desktop

---

Preview URL: https://pr-8.neoforged-website-previews.pages.dev

[lukebemish]

Note that this switches some of the style stuff around to separate out the color and other parts of it, and to use partials to share most of the styling between the two themes.

[neoforged-pages-deployments[bot]]

Deploying with Cloudflare Pages

Name	Result
Last commit:	e63ab6d6ef4a9809abfddd681445b33d83be9c0a
Status:	✅ Deploy successful!
Preview URL:	https://8ca0273f.neoforged-website-previews.pages.dev
PR Preview URL:	https://pr-8.neoforged-website-previews.pages.dev

[ChampionAsh5357]

How can you switch between the two modes?

[PlatinPython]

Browser preference

[lukebemish]

How can you switch between the two modes?

It uses the CSS @media query - so whatever your browser asks for, which is a pretty common approach. Something to manually switch could be added later in theory, but that gets more complicated

[ChampionAsh5357]

Okay, I was thinking since we have something for the docs that can switch manually, there should be one for the webpage. But, I will acquiesce for now.

[ChampionAsh5357]

After a quick look through the pages, my only comment is that the buttons for github and mastodon embeds doesn't look that great. Also, there's a line underneath that's not seen in light mode.

[cpw]

HAWT, but also fix the authorbox.

[lukebemish]

Okay, I was thinking since we have something for the docs that can switch manually, there should be one for the webpage. But, I will acquiesce for now.

Not a bad idea - I've got the infrastructure set up so that it's all in separate stylesheets, so that could probably be added in the future with relative ease

[lukebemish]

Added a mode toggle button. It should all default to the system preference, unless you hit the button. The button is disabled on mobile, and it follows the browser preference, as I couldn't find any good place for it that didn't look bad.

[ChampionAsh5357]

I'll do a proper code review when I get home. Until then, can you fix the mixing tabs and spaces in the files you created?

Looks great!

[lukebemish]

Fixed; that was actually because it was mixed tabs and spaces, as VSCode doesn't handle that well without an editorconfig or something, and GH renders tabs as 8 spaces

[lukebemish]

The difference is literally just "handles stuff that might have to do with colors or needs to go after colors" and "doesn't". Made it easier to work on when I was changing around what was conditional and what wasn't - especially because earlier on I used Hugo templating for variable stuff, with a built in media query, instead of CSS variables. Could theoretically merge it together but it seemed more readable this way

[lukebemish]

Let me know if there's any changes you'd like from me on this; it should be ready to go as far as I'm aware

[ChampionAsh5357]

Yep yep. I think it's fine. I'm letting anyone else on the team do any checks of their own. If no one comments, it'll be merged in about 6ish hours.

[cpw]

This looks great to me @ChampionAsh5357 i'm ok with merging :+1: