Docs: Page does not update when prefers-color-scheme changes #18189
Labels
accepted
There is consensus among the team that this change meets the criteria for inclusion
documentation
Relates to ESLint's documentation
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 neweslint.org
with no previouslocalStorage
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:
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
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'sdata-theme
is initialized in an inline script:eslint/docs/src/_includes/layouts/base.html
Lines 77 to 81 in dbf831e
...while updates are set in a
'DOMContentLoaded'
event:eslint/docs/src/assets/js/themes.js
Line 11 in 4d1ed22
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:The text was updated successfully, but these errors were encountered: