Readability during dark-mode

[Jongwoo-Shim]

Acknowledge the following

• I carefully read and followed the Getting Started guide.
• I read through FAQ and searched through the past issues, none of which addressed my issue.
• The issue I am raising is a potential bug in al-folio and not just a usage question.
  [For usage questions, please use gitter chat instead of raising an issue.]

Describe the bug
Several areas are difficult to read during dark mode.
I found that the main offenders are the following :

• Distill page.
• Project page.
• Code

To Reproduce
Steps to reproduce the behavior:

1. Turn on dark mode by setting enable_darkmode: true in _config.yml file
2. Run the site bundle exec jekyll serve
3. Click on the dark/light switch button on the top right corner to turn on dark mode

Screenshots

System (please complete the following information):

• Windows 10
• Firefox 84.0
• Jekyll version: 3.9.0
• Ruby version: 2.6.0

[Jongwoo-Shim]

@alshedivat I've been playing around with the css and have resolved most of the major offenders; however I want input on fixing the code blocks.

There are a few possible fixes for the legibility of code blocks.

1. Modify the css to have a background for code snippets during dark-mode :
   
2. Change the default to another syntax highlighter theme. Personally I think that Monokai or Native would work best for this.
3. Find a way to toggle between highlighter themes <- This one would be the most difficult to write in I think.

Sidenote : I think that the background color of the code during light mode should be light-grey. It's a bit hard to delineate the code sections.

[Jongwoo-Shim]

@alshedivat Should we continue the discussion about the distill css here?
If we want a quick fix for everything else, I can create a pull request for the css not related to the distill blog style.

[huyen-nguyen]

Hi! Thank you for all your work on this topic. I'm just wondering is there a way to set the light theme as the default one when we first open the site? Currently, the default is set to the dark theme.

[Jongwoo-Shim]

@huyen-nguyen I believe that it was written to be based off your computer settings. Check the theme.js file for the logic.
ie. If you've set your computer to dark-mode, it'll default to dark-mode for the website.

This is for the first time you jump on the website, and then it stores said preference in local memory. If you're having issues where it's consistently loading up in dark-mode :

• Check your computer settings.
• Clear your local storage.

[Jongwoo-Shim]

@huyen-nguyen Additionally you can rewrite the logic on lines 4-7 of theme.js if you need it to start in light theme.

[huyen-nguyen]

@huyen-nguyen I believe that it was written to be based off your computer settings. Check the theme.js file for the logic.
ie. If you've set your computer to dark-mode, it'll default to dark-mode for the website.

This is for the first time you jump on the website, and then it stores said preference in local memory. If you're having issues where it's consistently loading up in dark-mode :

• Check your computer settings.
• Clear your local storage.

That makes sense. Got it. Thanks! By local storage do you mean cache and stuff?

[Jongwoo-Shim]

Yup. Just clear that stuff and you should be good to go.

[alshedivat]

@Jongwoo-Shim, thanks for opening this issue. Just got a chance to take a look.

• If you already have fixes to some/most of the issues, it'd be great if you could create a PR.
• Re: code blocks -- I think a combination of 1+2 (i.e., adjusting background color + switching to a different highlighter theme). For toggling highlight themes, this article might be useful (or maybe not, I just glanced through it).
• I remember you mentioned issues with distillpub (Issue 180 - Distill Bugfix #182). Did you manage to find an elegant way to override distillpub styles?

[Jongwoo-Shim]

@alshedivat

• Sure thing, however I wasn't able to really resolve the issue with distillpub.
• Should the distill fixes be included?
• Should I make a separate issue for the code block?

[alshedivat]

@Jongwoo-Shim, let's keep a single issue for readability. Feel free to create a separate PR that resolves non-distill issues.

For the distill stuff, I think the best way to go about it is to update styles in my mirror of distillpub/template. For example, to fix the color of the author links in the byline, we can change this line:

color: rgba(0, 0, 0, 0.8);

to (I think it's better to create separate variables for distill, for example --global-distill-author-color):

color: var(--global-text-color);

After such changes are made, I'll need to re-generate template.v2.js. In this case, we won't need to hack the auto-generated template.v2.js directly, so it's a cleaner solution.

[alshedivat]

Adding to the collection of readability issues footnotes and citations:

Project titles in the dark mode are also too pale:

[Jongwoo-Shim]

Here are some of the fixes : #192

I'll get around to the distill stuff and code theme toggling when I get the chance, bit swamped at the moment.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.