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

Docs: Page does not update when prefers-color-scheme changes #18189

Open
1 task done
JoshuaKGoldberg opened this issue Mar 11, 2024 · 3 comments
Open
1 task done

Docs: Page does not update when prefers-color-scheme changes #18189

JoshuaKGoldberg opened this issue Mar 11, 2024 · 3 comments
Labels
accepted There is consensus among the team that this change meets the criteria for inclusion documentation Relates to ESLint's documentation

Comments

@JoshuaKGoldberg
Copy link
Contributor

JoshuaKGoldberg commented Mar 11, 2024 •
edited

Docs page(s)

all of them

What documentation issue do you want to solve?

The ESLint docs currently default to the browser's prefers-color-scheme setting for light/dark mode by default. Opening or refreshing a new eslint.org with no previous localStorage will change the page to the preferred light/dark theme.

But, if the browser's prefers-color-scheme changes while the page is already open and the user hasn't selected a color scheme override, nothing happens. You have to refresh the page or set the override yourself to see a new light/dark theme.

Screen.Recording.2024-03-11.at.9.02.21.AM.mov

IMO this is a bug. If the browser indicates a new light/dark mode is preferred, the page should switch to that. Cases where this is a necessary accessibility feature for users include:

  • hardware and/or lighting conditions changing while the page is open
  • passing control/sight of the browser to a different user
  • web developers wanting to quickly change what's being tested

What do you think is the correct solution?

If the user hasn't selected a color scheme override, I'd like the ESLint docs to update the visual theme when the browser's prefers-color-scheme changes.

Participation

  • I am willing to submit a pull request for this change.

Additional comments

I've even accidentally set a color scheme override because I wanted the page to adhere to my browser/system preference and not have to refresh. But that triggered #18190 and de-synced my page from the system.

Right now, the <html> element's data-theme is initialized in an inline script:

eslint/docs/src/_includes/layouts/base.html

Lines 77 to 81 in dbf831e

var theme = window.localStorage.getItem("theme");
if (theme) document.documentElement.setAttribute('data-theme', theme)
else if (window.matchMedia('(prefers-color-scheme: dark)').matches)
document.documentElement.setAttribute('data-theme', 'dark');
else document.documentElement.setAttribute('data-theme', 'light');

...while updates are set in a 'DOMContentLoaded' event:

eslint/docs/src/assets/js/themes.js

Line 11 in 4d1ed22

document.addEventListener('DOMContentLoaded', function() {

We can listen for the preferred theme changing with window.matchMedia. From https://stackoverflow.com/questions/59621784/how-to-detect-prefers-color-scheme-change-in-javascript:

function activateDarkMode() {
  // ...
}

const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");

darkModePreference.addEventListener("change", e => e.matches && activateDarkMode());
@JoshuaKGoldberg JoshuaKGoldberg added the documentation Relates to ESLint's documentation label Mar 11, 2024
@JoshuaKGoldberg JoshuaKGoldberg mentioned this issue Mar 11, 2024
Open
1 task
@Rec0iL99
Copy link
Member

👍 I could reproduce.

ping @eslint/eslint-team

@Tanujkanti4441
Copy link
Contributor

I too could reproduce this in windows, i am up for this fix.

@nzakas nzakas added the accepted There is consensus among the team that this change meets the criteria for inclusion label Mar 21, 2024
@nzakas
Copy link
Member

nzakas commented Mar 21, 2024

If there's an easy way to fix this, I'd say go for it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
accepted There is consensus among the team that this change meets the criteria for inclusion documentation Relates to ESLint's documentation
Projects
Triage
Status: Ready to Implement
Milestone
No milestone
Development

No branches or pull requests
4 participants
@nzakas @JoshuaKGoldberg @Rec0iL99 @Tanujkanti4441