This is done by moving the code that's responsible for color mode into a separate file that's loaded early.
Bonus: this file is included only for non-default dark mode settings.
Also add an optional toggle button for it.
Three new config options have been added:
1. 'color_mode' which can be set to one of 'light', 'dark', or 'auto'.
Default is 'light' for backward compatability. The 'auto' color mode
will check the system settings and automaticaly switch to light or
dark mode on page load or when the system's color mode changes.
2. 'hljs_style_dark': the Highlight.js theme to use in 'dark_mode'.
Default is 'github-dark' which matches the light mode default of
'github'. The preexisting config option 'hljs_style' is used for
'light' mode.
3. 'user_color_mode_toggle':
Allow users to select their prefered color mode (light, dark, auto) from
within the browser and save their preference for future page loads. The
new config option 'user_color_mode_toggle' (default: 'False') can be
enabled to display a toggle menu in the nav bar. The default value of the
toggle menu on first load is the value set to 'color_mode'.
MkDocs' own documentation is now configured with 'color_mode: auto'.
Co-authored-by: Oleh Prypin <oleh@pryp.in>
The font files have been moved from 'mkdocs/themes/mkdocs/fonts/' to
'mkdocs/themes/mkdocs/webfonts'. The 'brands', 'regular', and 'solid'
collections (all free collections) have been included as has the
'v4-font-face' shim for backward compatability.
Javascript has been updated to Bootstrap version 5.3.2 and CSS has been
updated to the the Bootswatch Cerulean theme version 5.3.2. Adding support
for a dark mode to the mkdocs theme is now possible.
All local colors (in base.css, extra.css, etc.) are now defined using
Bootstrap variables so that any future color modes (such as dark mode)
will be consistent.
Admonition styles have also been fully fleshed out with all colors being
Bootstrap colors (via variables) rather than our own custom colors.
Note that while Bootstrap version 5 dropped a dependency on jQuery, the
mkdocs theme is still making use of jQuery at this time. However, future
changes could remove the need for this dependency.
Co-authored-by: Oleh Prypin <oleh@pryp.in>
