json-api-dotnet
Add dark mode to documentation landing page
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.
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.
What I think needs to be done:
- 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.
- 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.
- Write JavaScript that sets
data-bs-themeon the root<HTML>element, based on thetheme(dark/light/auto) property that docfx stores in local storage (see docfx theme.ts). - 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!
In https://github.com/dotnet/docfx/pull/8482 a "modern" template was introduced. From that screenshot it seems to implement dark mode
A different (simpler) approach is described at https://radu-matei.com/blog/dark-mode/.