doc: add dark mode styles

[jabyrd3]

Pulled colors from nodejs.dev

Refs: #35793

Checklist

• make -j4 test (UNIX), or vcbuild test (Windows) passes
• commit message follows commit guidelines

[Trott]

Can you please remove the trailing whitespace?

[jabyrd3]

sure thing, 2 minutes

[Trott]

Also the trailing whitespace here.

[Trott]

...and here as well.

[Trott]

Before:

After:

[Trott]

The colors on hovering appear low-contrast to me?

EDIT: Checked, and yeah, the contrast is only 1.42 which fails WCAG AA.

[Trott]

Are the different background colors between the nav pane on the left and the main display area intentional? They're similar...but not quite the same.

[Trott]

Thanks for doing this! The color contrast issue is definitely something we'd want fixed before landing but all my other comments are things that can be ignored for now as minor.

[Trott]

@nodejs/website If we do this for the docs, I imagine we'd want to do it for the rest of the site as well? So I imagine you'll have some thoughts....

[silverwind]

Needs to handle borders, dividers, etc. Essentially dark mode should remap every color. I suggest using CSS variables instead of hardcoding colors which among maintenance benefits also allows easier third-party theming.

Also, that shade of blue seems rather opinionated to me. suggest a neutral dark gray like #181818 for the background.

Also, I do think we need it toggleable via JS, not just via prefers-color-scheme because some users may like to switch manually.

[jabyrd3]

The colors on hovering appear low-contrast to me?

EDIT: Checked, and yeah, the contrast is only 1.42 which fails WCAG AA.

Good catch, changing link over color to white.

[jabyrd3]

Are the different background colors between the nav pane on the left and the main display area intentional? They're similar...but not quite the same.

They are; I mimicked https://nodejs.dev as requested in the original ticket. If we want to use different values though, I'm open to suggestions.

[jabyrd3]

Needs to handle borders, dividers, etc. Essentially dark mode should remap every color. I suggest using CSS variables instead of hardcoding colors which among maintenance benefits also allows easier third-party theming.

For the borders/dividers, the existing values for borders (usually lighter shades), meshed well with the values from https://nodejs.dev. As far as using CSS variables go, nothing else in either stylesheet for this set of pages is using CSS variables, so it seemed reasonable to me to match the existing patterns instead of refactoring the entire stylesheet, or only using variables for the darkmode theme.

Also, that shade of blue seems rather opinionated to me. suggest a neutral dark gray like #181818 for the background

I pulled all color values from https://nodejs.dev; I've got no preferences for these, if we want to change the values I'm open to suggestions.

Also, I do think we need it toggleable via JS, not just via prefers-color-scheme because some users may like to switch manually.

I'm amenable to this, I can push another commit to this PR this evening, EST, if its a blocking concern.

[silverwind]

One example of a border that will not work is the | between the menu entries on top. I'm sure there are more such cases. Any dark color in the stylesheet can cause this.

Regarding variables: I think it's reasonable to do now. This indirection for colors was not necessary before but is now with two themes.

[DerekNonGeneric]

This is a very good start! Something that I would be interested in seeing is having a way to toggle between the two modes. If that's not included in this PR, it can surely come later, though.

[jabyrd3]

This is a very good start! Something that I would be interested in seeing is having a way to toggle between the two modes. If that's not included in this PR, it can surely come later, though.

Yeah, I intended to add a toggle yesterday evening but my day job ended up running a bit long, will try to add something in today.

[aduh95]

@jabyrd3 do you still want to work on this? You'd need to rebase the PR to resolve the git conflict.

Also, it'd be nice to use the .dark-mode class that are now using the docs instead of the @media block.

[github-actions]

This issue/PR was marked as stalled, it will be automatically closed in 30 days. If it should remain open, please leave a comment explaining why it should remain open.

[github-actions]

Closing this because it has stalled. Feel free to reopen if this PR is still relevant, or to ping the collaborator who labelled it stalled if you have any questions.