Light switch

[pdmosses]

Implement #234

• Use media queries to choose light or dark color scheme
• Update docs and configuration

[pdmosses]

Note that this PR does not provide a button to toggle between light and dark, and it is independent of #302.

The improved code highlighting for the dark scheme from PR #463 is included in this PR, because it could be very annoying if browsed code becomes significantly less legible due to a system-level switch to dark mode.

[clberube]

I'm interested in trying this, however I get the following error when I try to use this branch as a remote theme:

Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/just-the-docs-dark.scss':
                    File to import not found or unreadable: ./vendor/pygments/css-github/pygments-tomorrow-night. Load paths: /Library/Ruby/Gems/2.6.0/gems/jekyll-theme-primer-0.5.4/_sass /private/var/folders/xk/p58885bx1d7d42rnw_8pd2380000gn/T/jekyll-remote-theme-20201120-9770-gqr946/_sass /Library/Ruby/Gems/2.6.0/gems/jekyll-theme-primer-0.5.4/_sass /private/var/folders/xk/p58885bx1d7d42rnw_8pd2380000gn/T/jekyll-remote-theme-20201120-9770-gqr946/_sass on line 22
jekyll 3.9.0 | Error:  File to import not found or unreadable: ./vendor/pygments/css-github/pygments-tomorrow-night.
Load paths:
  /Library/Ruby/Gems/2.6.0/gems/jekyll-theme-primer-0.5.4/_sass
  /private/var/folders/xk/p58885bx1d7d42rnw_8pd2380000gn/T/jekyll-remote-theme-20201120-9770-gqr946/_sass
  /Library/Ruby/Gems/2.6.0/gems/jekyll-theme-primer-0.5.4/_sass
  /private/var/folders/xk/p58885bx1d7d42rnw_8pd2380000gn/T/jekyll-remote-theme-20201120-9770-gqr946/_sass on line 22

When using

remote_theme: pdmosses/just-the-docs@light-switch

in _config.yml.

[pdmosses]

@clberube Thanks for the bug report. The changes that I've just committed should have fixed the issue.

In fact I had previously checked locally that the light-or-dark color scheme was working when using Jekyll 4.1.1, and GitHub Pages had checked that the site built also with Jekyll 3.8.5. However, I had overlooked that the build on GitHub Pages does not have the dark media preference, so it didn't check that part of the light-or-dark color scheme code. I have now checked it works locally using Jekyll 3.8.7 and 3.9.0.

[pdmosses]

@pmarsceill The move of the @charset directive (from content.scss to just-the-docs.scss.liquid) appears to be necessary for the switch to the dark mode to work with Jekyll 3.8.5. I hope that does not affect the robustness of the theme for systems where files have different default file encodings.

[pdmosses]

I have now checked it works locally using Jekyll 3.8.7 and 3.9.0.

@clberube The previous version didn't provide the intended code highlighting in the dark mode. The above update appears to have fixed that.

[clberube]

I have now checked it works locally using Jekyll 3.8.7 and 3.9.0.

@clberube The previous version didn't provide the intended code highlighting in the dark mode. The above update appears to have fixed that.

Thank you for the quick fixes, @pdmosses. I confirm my sites are building properly after 19eba11.

This and the included changes to the code syntax highlighting for dark mode are great, I hope this can be reviewed soon.

[pdmosses]

This PR currently supports switching only between the light and dark color schemes provided by the theme. However, it could easily be enhanced to switch between custom color schemes: setting dark_color_scheme to any color scheme would enable the switch (as in #560) and the current light-or-dark color scheme would not be needed.

[pdmosses]

Although this PR worked, it led to excessively large CSS files. I'm closing it in favour of PR #560 and PR #858, which appear to be simpler solutions. See #234 for further discussion.