Skip to content

respect-user-color-scheme enables checking of prefers-color-scheme media query#12426

Merged
gordonwoodhull merged 2 commits intomainfrom
bugfix/1470
Apr 2, 2025
Merged

respect-user-color-scheme enables checking of prefers-color-scheme media query#12426
gordonwoodhull merged 2 commits intomainfrom
bugfix/1470

Conversation

@gordonwoodhull
Copy link
Copy Markdown
Member

@gordonwoodhull gordonwoodhull commented Apr 1, 2025

Fixes #1470

When respect-user-color-scheme is enabled (default false), user preference for color scheme will be read from the prefers-color-scheme media query.

This mean that the author preference (via order of light and dark theme or brand in YAML) is unused, as long as JS is enabled. NoJS still uses stylesheet ordering based on author preference. 1

If the UI dark mode toggle is used, it gets saved to local storage and that take precedence. Currently the user can delete their local storage for the site to go back to their OS default, but in the future we might consider e.g. deleting the local storage setting if it matches the OS setting.

This doesn't do dynamic changes if the OS setting changes, so people who use Auto will have to refresh the page for now.

This tests correctly manually across browsers, but unfortunately it breaks automated tests in unexpected ways, and I haven't figured out how to fix those yet.

In particular, I have tried Changing Color Scheme in Playwright Test to no avail.

Footnotes

  1. We might consider a grand refactor using proper media queries, but I am just finding my way around the code and haven't considered that yet.

@gordonwoodhull
Copy link
Copy Markdown
Member Author

gordonwoodhull commented Apr 1, 2025

🗝️  When we test prefers-color-schema, we need to set it globally for those tests with test.use().

We don't have dynamic switching in Quarto (yet), so

await page.emulateMedia({ colorScheme: "dark" });

within a test won't work.

@gordonwoodhull gordonwoodhull marked this pull request as ready for review April 1, 2025 20:02
@gordonwoodhull gordonwoodhull force-pushed the bugfix/1470 branch 2 times, most recently from 665b0a2 to 03287fd Compare April 1, 2025 20:05
@gordonwoodhull gordonwoodhull changed the title use user prefers-color-schema setting instead of author default respect user prefers-color-schema setting instead of author default Apr 1, 2025
@gordonwoodhull gordonwoodhull changed the title respect user prefers-color-schema setting instead of author default respect user prefers-color-schema setting instead of author preference Apr 1, 2025
@gordonwoodhull
Copy link
Copy Markdown
Member Author

Seems to be dependency failure

    ! package or namespace load failed for 'flextable':
     package 'openssl' does not have a namespace
    Backtrace:
      1. global .main()
      2. execute(...)
      3. rmarkdown::render(...)
      4. knitr::knit(knit_input, knit_output, envir = envir, quiet = quiet)
      5. knitr:::process_file(text, output)
         ...
           at evaluate/R/evaluate.R:141:5
     17. base (local) withRestartList(expr, restarts)
     18. base (local) withOneRestart(withRestartList(expr, restarts[-nr]), restarts[[nr]])
     19. base (local) docall(restart$handler, restartArgs)
     21. evaluate (local) fun(base::quote(`<smplErrr>`))

@cderv
Copy link
Copy Markdown
Member

cderv commented Apr 2, 2025

Yes possibly a conflict between package that would require update. I'll look at it.

@cderv cderv self-assigned this Apr 2, 2025
@gordonwoodhull gordonwoodhull changed the title respect user prefers-color-schema setting instead of author preference respect user prefers-color-scheme setting instead of author preference Apr 2, 2025
@cscheid cscheid added this to the v1.7 milestone Apr 2, 2025
@gordonwoodhull gordonwoodhull force-pushed the bugfix/1470 branch 2 times, most recently from a592a95 to 8b29a4a Compare April 2, 2025 19:19
@gordonwoodhull gordonwoodhull changed the title respect user prefers-color-scheme setting instead of author preference respect-user-color-scheme enables checking of prefers-color-scheme media query Apr 2, 2025
…r default

fixes #1470

respect-user-color-schema defaults to false

use static tests for user default color scheme
since we do not support dynamic change of prefers-color-scheme yet
@gordonwoodhull
Copy link
Copy Markdown
Member Author

gordonwoodhull commented Apr 2, 2025

Still seeing those flextable / openssl errors. I'm going to merge - pretty sure my tests are not on any of those buckets.

Curious that it only affects this branch and we haven't seen this elsewhere.

@gordonwoodhull gordonwoodhull merged commit cf2be96 into main Apr 2, 2025
46 of 49 checks passed
@gordonwoodhull gordonwoodhull deleted the bugfix/1470 branch April 2, 2025 20:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

FR: Websites automatically detect user preference for dark mode from OS

3 participants