Skip to content

Add dark mode to documentation landing page #1291

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.

Sign up for GitHub

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

Jump to bottom
Closed
bkoelman opened this issue Jul 20, 2023 · 5 comments · Fixed by #1549
Closed

Add dark mode to documentation landing page #1291

bkoelman opened this issue Jul 20, 2023 · 5 comments · Fixed by #1549
Labels
documentation enhancement good first issue help wanted

Comments

@bkoelman
Copy link
Member

bkoelman commented Jul 20, 2023 •
edited
Loading

The docfx site features dark mode, but our landing page (based on this template) at www.jsonapi.net does not. Ideally, it would reuse the setting that docfx stores in the browser settings.
@bkoelman
Copy link
Member Author

bkoelman commented Sep 21, 2023 •
edited
Loading

Here's one way to do it:

The Chrome addin Night Eye renders the page pretty nice when switched to dark mode. It has a free trial for one month.

image

What I think needs to be done:

  1. Update the existing HTML page at https://github.com/json-api-dotnet/JsonApiDotNetCore/tree/master/docs/home based on the latest template, because it uses Bootstrap v5.3.2, which includes support for dark mode.
  2. Somehow extract the changed colors, after turning on dark mode in Night Eye, and apply them to the .css file. I can see the new colors using Inspect Element in Chrome Dev Tools, but I don't understand where they come from.
  3. Write JavaScript that sets data-bs-theme on the root <HTML> element, based on the theme (dark/light/auto) property that docfx stores in local storage (see docfx theme.ts).
  4. Add a drop-down button (similar to what docfx provides) to toggle the mode.

Unfortunately, I'm pretty clumsy and inexperienced when it comes to styling. Any help would be immensely appreciated! If you know of a different landing page template with built-in dark-mode support, that could be an even better solution!

@bkoelman
Copy link
Member Author

Another browser add-in that produces a nice dark mode is Dark Reader.

@verdie-g

This comment was marked as off-topic.

Sign in to view
@bkoelman

This comment was marked as off-topic.

Sign in to view
@bkoelman
Copy link
Member Author

A different (simpler) approach is described at https://radu-matei.com/blog/dark-mode/.

@bkoelman bkoelman mentioned this issue May 20, 2024
Merged
4 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation enhancement good first issue help wanted
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

New logo, dark mode on landing page json-api-dotnet/JsonApiDotNetCore
2 participants
@verdie-g @bkoelman