docs: fix no-js dark theme bugs #16612

amareshsm · 2022-12-04T18:21:08Z

Prerequisites checklist

I have read the contributing guidelines.

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.

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.

Before	After

netlify · 2022-12-04T18:21:12Z

✅ Deploy Preview for docs-eslint ready!

Name	Link
🔨 Latest commit	`5005a10`
🔍 Latest deploy log	https://app.netlify.com/sites/docs-eslint/deploys/6394d52929a13b0008a86304
😎 Deploy Preview	https://deploy-preview-16612--docs-eslint.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

docs/src/assets/scss/no-js.scss

harish-sethuraman

LGTM thanks

kecrily

I noticed that warning, tip blocks, etc. seem to be broken as well.

JS	no-JS

amareshsm · 2022-12-06T05:06:25Z

I noticed that warning, tip blocks, etc. seem to be broken as well.

JS no-JS

Thanks. I will fix this also.

amareshsm · 2022-12-10T18:50:09Z

I noticed that warning, tip blocks, etc. seem to be broken as well.

JS no-JS

Fixed.

nzakas · 2022-12-26T21:12:57Z

@kecrily has your concern been addressed? If so, please approve and merge.

kecrily

LGTM

kecrily · 2022-12-27T16:00:06Z

@kecrily has your concern been addressed?

Sorry for the many notifications in my inbox that I didn't notice this update. I am looking for tools to improve this situation

If so, please approve and merge.

I've approved it, but I don't have the authority to merge

mdjermanovic

With dark mode preferred but light mode selected on the site, I'm getting a mix of light and dark themes:

kecrily · 2022-12-28T14:20:46Z

docs/src/assets/scss/no-js.scss

+@media (prefers-color-scheme: dark) {
+    pre[class*="language-"] {
+        color: var(--color-neutral-100);
+    }
+
+    .token {
+        &.comment,
+        .prolog,
+        .doctype,
+        .cdata {
+            color: #8e9fae;
+        }
+    }
+
+    .logo-component {
+        fill: #fff;
+    }
+
+    #logo-center {
+        opacity: 0.6;
+    }
+
+    .rule__categories,
+    .rule__status {
+        background: var(--body-background-color);
+    }
+
+    .algolia-docsearch-suggestion--highlight {
+        background-color: var(--link-color);
+        color: var(--color-neutral-900);
+    }
+
+    .alert {
+        &.alert--warning {
+            color: var(--color-rose-300);
+            background-color: var(--color-rose-900);
+            border: 1px solid var(--color-rose-300);
+        }
+
+        &.alert--important {
+            color: var(--color-warning-300);
+            background-color: var(--color-warning-900);
+            border: 1px solid var(--color-warning-300);
+        }
+
+        &.alert--tip {
+            color: var(--color-success-300);
+            background-color: var(--color-success-900);
+            border: 1px solid var(--color-success-300);
+        }
+    }
+
+    .alert__type,
+    .alert__learn-more {
+        .alert--warning & {
+            color: var(--color-rose-200);
+        }
+
+        .alert--important & {
+            color: var(--color-warning-200);
+        }
+
+        .alert--tip & {
+            color: var(--color-success-200);
+        }
+    }
+}


Adding a :not([data-theme="light"]) range would have solved the problem @mdjermanovic found.

Details

Suggested change

@media (prefers-color-scheme: dark) {

pre[class*="language-"] {

color: var(--color-neutral-100);

}

.token {

&.comment,

.prolog,

.doctype,

.cdata {

color: #8e9fae;

}

}

.logo-component {

fill: #fff;

}

#logo-center {

opacity: 0.6;

}

.rule__categories,

.rule__status {

background: var(--body-background-color);

}

.algolia-docsearch-suggestion--highlight {

background-color: var(--link-color);

color: var(--color-neutral-900);

}

.alert {

&.alert--warning {

color: var(--color-rose-300);

background-color: var(--color-rose-900);

border: 1px solid var(--color-rose-300);

}

&.alert--important {

color: var(--color-warning-300);

background-color: var(--color-warning-900);

border: 1px solid var(--color-warning-300);

}

&.alert--tip {

color: var(--color-success-300);

background-color: var(--color-success-900);

border: 1px solid var(--color-success-300);

}

}

.alert__type,

.alert__learn-more {

.alert--warning & {

color: var(--color-rose-200);

}

.alert--important & {

color: var(--color-warning-200);

}

.alert--tip & {

color: var(--color-success-200);

}

}

}

@media (prefers-color-scheme: dark) {

:not([data-theme="light"]) {

pre[class*="language-"] {

color: var(--color-neutral-100);

}

.token {

&.comment,

.prolog,

.doctype,

.cdata {

color: #8e9fae;

}

}

.logo-component {

fill: #fff;

}

#logo-center {

opacity: 0.6;

}

.rule__categories,

.rule__status {

background: var(--body-background-color);

}

.algolia-docsearch-suggestion--highlight {

background-color: var(--link-color);

color: var(--color-neutral-900);

}

.alert {

&.alert--warning {

color: var(--color-rose-300);

background-color: var(--color-rose-900);

border: 1px solid var(--color-rose-300);

}

&.alert--important {

color: var(--color-warning-300);

background-color: var(--color-warning-900);

border: 1px solid var(--color-warning-300);

}

&.alert--tip {

color: var(--color-success-300);

background-color: var(--color-success-900);

border: 1px solid var(--color-success-300);

}

}

.alert__type,

.alert__learn-more {

.alert--warning & {

color: var(--color-rose-200);

}

.alert--important & {

color: var(--color-warning-200);

}

.alert--tip & {

color: var(--color-success-200);

}

}

}

}

We can wrap it inside the no-js class. It will fix the issue I guess.

We can wrap it inside the no-js class. It will fix the issue I guess.

Sounds good to me. @kecrily what do you think?

Sounds good for me

github-actions · 2023-02-20T22:31:48Z

Hi everyone, it looks like we lost track of this pull request. Please review and see what the next steps are. This pull request will auto-close in 7 days without an update.

amareshsm · 2023-02-21T03:26:03Z

bump

github-actions · 2023-03-10T22:31:47Z

Hi everyone, it looks like we lost track of this pull request. Please review and see what the next steps are. This pull request will auto-close in 7 days without an update.

Rec0iL99 · 2023-03-13T17:49:34Z

@amareshsm is still working on this. Don't close.

docs: fix no-js dark theme bugs

a7326a6

amareshsm requested a review from a team as a code owner December 4, 2022 18:21

eslint-github-bot bot added documentation Relates to ESLint's documentation triage An ESLint team member will look at this issue soon labels Dec 4, 2022

amareshsm added 3 commits December 4, 2022 23:55

docs: import no-js file

1d6d526

lint no-js scss

3c4374a

fix lint issue

e3e689a

harish-sethuraman reviewed Dec 5, 2022

View changes

docs/src/assets/scss/no-js.scss Outdated Show resolved Hide resolved

amareshsm added 2 commits December 5, 2022 10:47

nit: fix nit

93834cc

fix: update no-js.scss

76bea6f

harish-sethuraman approved these changes Dec 5, 2022

View changes

kecrily reviewed Dec 5, 2022

View changes

amareshsm added accepted There is consensus among the team that this change meets the criteria for inclusion and removed triage An ESLint team member will look at this issue soon labels Dec 5, 2022

fix alerts

787bb25

lint scss

5005a10

kecrily approved these changes Dec 27, 2022

View changes

mdjermanovic reviewed Dec 28, 2022

View changes

kecrily requested changes Dec 28, 2022

View changes

amareshsm marked this pull request as draft January 18, 2023 15:13

github-actions bot added the Stale label Feb 20, 2023

amareshsm removed the Stale label Feb 21, 2023

github-actions bot added the Stale label Mar 10, 2023

Rec0iL99 removed the Stale label Mar 13, 2023

docs: fix no-js dark theme bugs #16612

docs: fix no-js dark theme bugs #16612

amareshsm commented Dec 4, 2022 •

edited

netlify bot commented Dec 4, 2022 •

edited

harish-sethuraman left a comment

kecrily left a comment

amareshsm commented Dec 6, 2022

amareshsm commented Dec 10, 2022

nzakas commented Dec 26, 2022

kecrily left a comment

kecrily commented Dec 27, 2022

mdjermanovic left a comment

kecrily Dec 28, 2022 •

edited

amareshsm Dec 28, 2022

mdjermanovic Feb 10, 2023

kecrily Feb 28, 2023

github-actions bot commented Feb 20, 2023

amareshsm commented Feb 21, 2023

github-actions bot commented Mar 10, 2023

Rec0iL99 commented Mar 13, 2023

docs: fix no-js dark theme bugs #16612

Are you sure you want to change the base?

docs: fix no-js dark theme bugs #16612

Conversation

amareshsm commented Dec 4, 2022 • edited

Prerequisites checklist

What is the purpose of this pull request? (put an "X" next to an item)

What changes did you make? (Give an overview)

netlify bot commented Dec 4, 2022 • edited

✅ Deploy Preview for docs-eslint ready!

harish-sethuraman left a comment

Choose a reason for hiding this comment

kecrily left a comment

Choose a reason for hiding this comment

amareshsm commented Dec 6, 2022

amareshsm commented Dec 10, 2022

nzakas commented Dec 26, 2022

kecrily left a comment

Choose a reason for hiding this comment

kecrily commented Dec 27, 2022

mdjermanovic left a comment

Choose a reason for hiding this comment

kecrily Dec 28, 2022 • edited

Choose a reason for hiding this comment

amareshsm Dec 28, 2022

Choose a reason for hiding this comment

mdjermanovic Feb 10, 2023

Choose a reason for hiding this comment

kecrily Feb 28, 2023

Choose a reason for hiding this comment

github-actions bot commented Feb 20, 2023

amareshsm commented Feb 21, 2023

github-actions bot commented Mar 10, 2023

Rec0iL99 commented Mar 13, 2023

amareshsm commented Dec 4, 2022 •

edited

netlify bot commented Dec 4, 2022 •

edited

kecrily Dec 28, 2022 •

edited