Skip to content
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

Light switch #464

Closed
wants to merge 6 commits into from
Closed

Light switch #464

wants to merge 6 commits into from

Conversation

pdmosses
Copy link
Contributor

Implement #234

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

@pdmosses
Add GitHub Dark highlighting to dark.scss
e7e157f 
Move highlighting colours from `code.scss` to `light.scss`.
Add GitHub Dark hihlighting colurs to `dark.scss`.
Test using `Preview dark...` button in Configuration page.
@pdmosses
Merge branch 'master' into dark-highlight
ad342b6
@pdmosses
Update to use Pygments Base16 Tomorrow Dark
e1278f7 
- Add copies of CSS files from Pygments
- Replace GitHub Dark colours in _sass/color_schemes/dark.scss by an import
@pdmosses
Add color scheme light-or-dark
7db8661 
Implement just-the-docs#234
- Use media queries to choose light or dark color scheme
- Update docs and configuration
@pdmosses pdmosses linked an issue Oct 18, 2020 that may be closed by this pull request
Support system-/browser-level dark mode #234
Open
@pdmosses pdmosses mentioned this pull request Oct 18, 2020
Closed
@pdmosses
Copy link
Contributor Author

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.

@pdmosses pdmosses requested a review from pmarsceill October 18, 2020 11:17
@pdmosses pdmosses linked an issue Oct 24, 2020 that may be closed by this pull request
Code snippet/blocks barely readable on black theme #374
Closed
@pdmosses pdmosses mentioned this pull request Nov 14, 2020
Open
@clberube
Copy link

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
Update to work also with Jekyll >= 3.8.5
78dde52 
- Add the extension `css` to the import filename in `_sass/color_schemes/dark.css`.
- Move `@charset "UTF-8";` from `_sass/content.scss` to `_includes/just-the-docs.scss.liquid`.
Before these changes, Jekyll 3.8.7 fails to build due to errors about `File to import not found` and `@charset not at the root`, whereas Jekyll 4.1.1 built without errors.
@pdmosses
Copy link
Contributor Author

@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
Copy link
Contributor Author

@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
Updated to work with Jekyll >= 3.8.5
19eba11 
Correct the dark code highlighting:
- Omit the `.css` extension in the `@import` in `_sass/color_schemes/dark.scss`.
- Change the extension of the imported SCSS file to `scss`.
- Remove unused `pygments` folders and files.
Dark code highlighting tested with Jekyll 3.8.7 and 4.1.1.
@pdmosses
Copy link
Contributor Author

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
Copy link

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 pdmosses mentioned this pull request Dec 11, 2020
Closed
This was referenced Jan 30, 2021
Open
Open
@pdmosses
Copy link
Contributor Author

pdmosses commented Feb 2, 2021

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 pdmosses mentioned this pull request Apr 1, 2021
Closed
@ChunkyProgrammer ChunkyProgrammer mentioned this pull request Sep 20, 2021
Open
@pdmosses pdmosses mentioned this pull request Jun 16, 2022
Open
@mattxwang mattxwang mentioned this pull request Jul 20, 2022
Closed
@mattxwang mattxwang added the status: needs discussion Issues that need more discussion before they can be properly triaged. label Jul 20, 2022
@pdmosses
Copy link
Contributor Author

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.

@pdmosses pdmosses closed this Sep 16, 2022
@pdmosses pdmosses deleted the light-switch branch November 27, 2022 12:15
@simonebortolin simonebortolin mentioned this pull request Dec 26, 2022
Open
This was referenced Dec 29, 2022
Open
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pmarsceill pmarsceill Awaiting requested review from pmarsceill

Assignees
No one assigned
Labels
status: needs discussion Issues that need more discussion before they can be properly triaged.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Support system-/browser-level dark mode Code snippet/blocks barely readable on black theme
3 participants
@pdmosses @clberube @mattxwang