docs: fix no-js dark theme bugs #18071
Conversation
✅ Deploy Preview for docs-eslint ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
kecrily
added
the
accepted
Yes, PR was raised but not merged it was not completely done at that time. |
There was a problem hiding this comment.
[Refactor] This adds in a new set of styles that only get hit in dark mode, and may only be tested in production by users with JavaScript disabled. Even if many users are visiting the site with JS disabled, that's still an extra source of truth for these comments. IMO it's not great having an additional (so, at least 2 total) place to manage these styles.
Instead, would it be feasible to figure out why some of the existing styles aren't loading in? E.g. if dark-mode-only styles are only loaded by JS, maybe they can be loaded in with pure HTML/CSS instead?
Sorry if I missed a previous explanation. I looked through the past PR comments and didn't see anything. I also filed #18076 for tracking.
There was a problem hiding this comment.
Thank you for your feedback and suggestion Yes, you are correct this added a new set of styles that are only used when js is disabled and the preferred theme is dark.
An additional place to these styles I am getting it? do you mean a new file specifically for handling no-js mode?
Instead, would it be feasible to figure out why some of the existing styles aren't loading in? E.g. if dark-mode-only styles are only loaded by JS, maybe they can be loaded in with pure HTML/CSS instead?
There is no existing style targeting drak mode with js disabled which is why it falls back to default styles. The styles that are not applied are related to JS.
For example:
let's take the ESLint logo - it is an SVG element. The default style works well in light mode.
eslint/docs/src/_includes/components/logo.html
Lines 11 to 20 in aadfb60
For the dark mode styles specified explicitly based on the data-theme attribute (which gets added based on the user choice)
eslint/docs/src/_includes/components/logo.html
Lines 2 to 10 in aadfb60
If JavaScript is turned off and the chosen theme is light, there is no problem as the default logo functions correctly. However, when the preferred mode is dark, the absence of styles for this scenario results in a fallback to the light mode style, leading to the issue. To resolve this, I have specifically included styles that target the dark theme when JavaScript is disabled.
Additionally, let's examine the behaviour of various elements in a dark theme when JavaScript is disabled. The code block background colour toggles flawlessly between dark and light modes even without JavaScript, Because property value is not hard-coded
eslint/docs/src/assets/scss/syntax-highlighter.scss
Lines 48 to 50 in b844324
Variable --lightest-background-color value is toggled based on the theme
light theme:
dark theme:
preferred theme dark and js disabled:
Preferred them light and js disabled:
Using variables we can solve this issue. Refer: #18077
I believe this provides clarity.
There was a problem hiding this comment.
This makes sense, thanks! +1 to #18077's approach, I'll approve over there.
Prerequisites checklist
What is the purpose of this pull request? (put an "X" next to an item)
[ ] Documentation update
[ ] Bug fix (template)
[ ] New rule (template)
[ ] Changes an existing rule (template)
[ ] Add autofix to a rule
[ ] Add a CLI option
[ ] Add something to the core
[x] Other, please explain:
Fixed no-js (js disabled) dark theme bugs.
Ref: #16612
What changes did you make? (Give an overview)
When javascript is disabled and the prefers-color-scheme is dark
1. Code block texts are not visible.
2. Logo/ tag text not inverted based on the theme.
3. Image background color not applied
Is there anything you'd like reviewers to focus on?
I have addressed the identified issues. Feel free to add if anything missing.