Merging @media prefers-color-scheme and Quarto Dark Theme Toggle

[cadojo]

I like having the light / dark theme toggle that Quarto provides, but it's also nice for the website to default to whatever the system's default is. Ideally, I'd like to set the Quarto toggle to only have "memory" for the last 6 hours or so, and otherwise default to the system default using @media prefers-scolor-scheme. Has anyone figured out how to do this?

• Website Source: https://github.com/cadojo/aperiodic
• Website Render: https://aperiodic.dev

[EdoardoCostantini]

I would love this feature too!

[effigies]

Furo has a model that I like a lot: Toggle between system preference (default), light theme and dark.

This makes sense to me as the default behavior whenever both light and dark themes are specified.

[effigies]

Hey all, I figured out a way to do this. This code does two things:

1. Queries media preference on readyState == 'interactive' (happens before DOMContentLoaded, which Quarto loads themes on)
2. Patches Quarto's quartoToggleColorScheme to also toggle the visibility of images with class="only-light" or class="only-dark".

Quarto config

format:
  html:
    theme:
      light: flatly
      dark: darkly
    css: styles.css
    toc: true
    include-in-header:
      - toggle.js

toggle.js

<script id="toggle-light-dark-elements" type="application/javascript">
// Extend Quarto theme toggling to allow elements to be displayed/hidden in light/dark themes

// Replicated from https://github.com/quarto-dev/quarto-cli/blob/84d4659/src/resources/formats/html/templates/quarto-html.ejs
const getColorSchemeSentinel = () => {
  const localAlternateSentinel = 'default';
  if (window.location.protocol !== 'file:') {
    const storageValue = window.localStorage.getItem('quarto-color-scheme');
    return storageValue != null ? storageValue : localAlternateSentinel;
  } else {
    return localAlternateSentinel;
  }
};

// Function to toggle light and dark elements based on color scheme
const toggleColorSchemeElements = () => {
  const scheme = getColorSchemeSentinel();
  const lightElements = document.getElementsByClassName('only-light');
  const darkElements = document.getElementsByClassName('only-dark');

  for (var i = 0; i < lightElements.length; i++) {
    lightElements[i].style.display = scheme == 'default' ? 'block' : 'none';
  }
  for (var i = 0; i < darkElements.length; i++) {
    darkElements[i].style.display = scheme == 'default' ? 'none' : 'block';
  }
};

// Function to check if the user's browser prefers dark themes
const prefersDarkTheme = () => {
  if (window.matchMedia) {
    return window.matchMedia('(prefers-color-scheme: dark)').matches;
  }
  return false;
};

document.addEventListener('readystatechange', function() {
  // Set the default color scheme based on browser preference
  if (document.readyState === 'interactive' && window.location.protocol !== 'file:') {
    const storageValue = window.localStorage.getItem('quarto-color-scheme');
    if (storageValue == null && prefersDarkTheme()) {
      window.localStorage.setItem('quarto-color-scheme', 'alternate');
    }
  }
  // Add event listener for when the readyState is complete (and default toggler is set)
  if (document.readyState === 'complete') {
    // Toggle scheme once
    toggleColorSchemeElements();
    // Append our toggle function to the old one
    const oldToggle = window.quartoToggleColorScheme;
    window.quartoToggleColorScheme = () => {
      oldToggle();
      toggleColorSchemeElements();
    }
  }
});

</script>

[effigies]

It doesn't for me. It should behave the same as reloading a page that's already been toggled to dark, as it will just set the cookie for you.

That said, my browsers may have had too much cached and ready to execute for things to behave like a new visitor. But it didn't appear to when opening up in private/incognito mode.

[cscheid]

Unfortunately, I just tested it and it flashed for me :( (I'm on dark mode by default.)

[cscheid]

CW: Bright flashes

Screen.Recording.2023-06-05.at.9.56.21.AM.mov

[cscheid]

I will note that this "only" flashes on Chrome and Firefox, but not on Safari. With that said, that's still unacceptably dangerous for people with PSE, and also (in my personal opinion) just exceedingly annoying.

[effigies]

Hmm. Okay. Can reproduce, but sometimes it seems to load pages smoothly. I don't really understand that, but I'm definitely not a web developer.