question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Use `prefers-color-scheme` preference over localStorage color mode

See original GitHub issue

Describe the bug

When toggling between light/dark mode on a supoprted device (in this case iOS, or MacOS via Firefox), Theme-UI’s color scheme does not update. Updating the app to reflect the user’s color mode requires the localstorage to be deleted.

but may I add, setting up dark/light mode in it’s current state has been an absolute breeze - thank you!

To Reproduce Steps to reproduce the behavior:

  1. Follow steps outlined in https://theme-ui.com/color-modes/
  2. Clear local storage and refresh
  3. App should render with your system preferences
  4. Try toggling between light/dark mode in your system preferences and watch the behaviour of the app.

Expected behavior

As I’ve enabled useColorSchemeMediaQuery, I would expect the color modes to behave as a media query (in other words, on user-agent change - much like a breakpoint).

Screenshots

An example in Theme-UI: (using useColorSchemeMediaQuery)

Demo site toggling between dark and light mode on an iPhone

Examples of ‘expected behaviour’ in non-Theme-UI applications

Twitter toggling dark and light mode

DuckDuckGo

Additional context Related issues: https://github.com/system-ui/theme-ui/issues/367

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:4
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
dannykeanecommented, Mar 23, 2020

I agree, this would be awesome.

As a supplement, I went ahead and created a workaround to automatically update (and override) the color mode when the prefers-color-scheme media-query changes.

Feel free to use this for the time being if it’s helpful.

useEffect(() => { const switchMode = e => { const isDarkMode = e.matches isDarkMode ? setMode("dark") : setMode("light") } const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)") darkModeMediaQuery.addListener(switchMode) }, [setMode])

That said, something I have noticed (and I’m not sure if this is the case for those using Gatsby), but when a default theme is set and useColorSchemeMediaQuery is true, I still seem to get a flicker from light to dark upon first load when prefers-color-scheme: dark — for reference, this happens with the Gatsby package installed…

This issue happens when visiting the page for the first time, I’m assuming it may be due to the color mode method initially looking for a stored value in local storage? Could there be a better way to prevent this from happening?

1reaction
CanRaucommented, Apr 8, 2020

Extending on @dannykeane’s snippet I think it should cleanup on unmount

import { jsx, useColorMode } from "theme-ui";
// ..
const [, setColorMode] = useColorMode();
useEffect(() => {
  const switchMode = (e) => {
    const isDarkMode = e.matches;
    isDarkMode ? setMode("dark") : setMode("light");
  };
  const darkModeMediaQuery = window.matchMedia(
    "(prefers-color-scheme: dark)"
  );
  darkModeMediaQuery.addListener(switchMode);
  // cleanup on unmount
  return () => darkModeMediaQuery.removeEventListener(switchMode);
}, [setMode]);

Please correct me if I’m wrong

Read more comments on GitHub >

github_iconTop Results From Across the Web

Dark Mode - The prefers-color-scheme Website Tutorial
The prefers-colors-scheme media query gets applied depending on the user's color scheme preference in the OS. For example, if you selected dark mode...
Read more >
jQuery - Toggle dark mode using local storage and prefers ...
If localStorage is missing (e.g. the user is visiting for the first time or has cleared localStorage) then set it to be the...
Read more >
How to store theme color preferences using the Local Storage ...
In this tutorial, we'll take a look at how to use the Local Storage API to store theme color preferences and preserve them...
Read more >
Color Mode - Chakra UI
To get dark mode working correctly, you need to do two things: ... Note: When using system as initial color mode, the theme...
Read more >
prefers-color-scheme - CSS: Cascading Style Sheets | MDN
The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found