Switching between 'system' and user toggled Color Modes

[fbolcic]

Hi all,

We are having some difficulties in implementing the desired color modes behaviour in our app and would appreciate some help.

We are using color modes in our app. We have a settings area where users can toggle between color modes. We would like to implement the following feature:

1. System Default -> color mode tracks the OS color mode and switches accordingly
2. Light -> light color mode is toggled via useColorMode() and setMode('light')
3. Dark -> dark color mode is toggled with setMode('dark')

We tried to implement this behaviour with the useColorSchemeMediaQuery.
According to the docs, when this value is set to system the color mode should track changes in OS (bullet 1). The problem is, when users then try to toggle dark or light they are able to, but after the page reload the color mode is reset to the one set in OS.
On the other hand, if we do not set useColorSchemeMediaQuery: 'system', we cannot get the OS tracking behaviour.

Our color modes are properly implemented in the Theme object and switching works, per se. So our main problem is switching between system mode (which tracks OS) and toggling a mode specifically (eg. dark), which should also persist between page reloads.

Ideally, we would like to use the setMode() API with this values: 'light' | 'dark' | 'system'.
Is this kind of switch even supported in the library? If not, do you have an idea of some elegant way to achieve this?

[hasparus]

Yes, this would be the perfect behaviour. This is a very good question.

So the problem is, because of useColorSchemeMediaQuery is set to system, Theme UI disregards the color scheme value in localStorage, right?

Unfortunately, I don't have a built-in convenient solution for you. Unifying color mode state and the color scheme media query options into one value is a very neat idea for future versions.

I've hacked a workaround really quickly — https://codesandbox.io/s/loving-clarke-iofv4t?file=/src/App.tsx
This is by no means elegant, but maybe it can help you just a bit.

[fbolcic]

I am not so sure about the internals, but I believe that useColorSchemeMediaQuery with value system short-circuits the other, local storage logic. So if this is set, on page reload theme-ui checks the prefers-color-scheme media query and sets the mode accordingly (and also sets the value in local storage).

Anyway, we will look into your solution and try it out. Thanks for all the help and I agree, this would be a neat idea for the future, since then you would have the best of both worlds!

[hasparus]

I am not so sure about the internals, but I believe that useColorSchemeMediaQuery with value system short-circuits the other, local storage logic. So if this is set, on page reload theme-ui checks the prefers-color-scheme media query and sets the mode accordingly (and also sets the value in local storage).

Oh yes, it does.

So, ideally... we could get rid of the useColorSchemeMediaQuery config option, and handle a special color mode value called system, which would use light and dark... unless you have a color scheme called "system", then we'd use this one for backcompat. How would you like such an API?

[fbolcic]

That would fit us perfectly!
I would love to provide help on this if possible. The problem is, this would be my first OSS contribution and I am not sure if it is too challenging for me to do, at least by myself. I forked the source code already and could not really make any progress on this.
If you could provide some guidance or blueprint, I would love to help!

PS. we implemented a solution based on the approach you drew up and it works fine for now. So thanks again!

[fbolcic]

Ahh, so there is a slight problem with your proposed solution.
It happens when you have the colorMode set to system and then switch to, for example light. The explicit switch is respected (so the theme is now indeed light) but the changes in OS will also still be reflected (so, for example, if you toggle the preferred mode in OS to light or dark, theme-ui will follow suit even though we explicitly set the mode to light).

I am looking at this code and it seems to me that the event listener cleanup does not cooperate with your solution.

[hasparus]

current code

@fbolcic yeah, this seems to be a bug, actually.

I can't test it right now, but something like this could work ⬇️

We should return the cleanup function inside of the if statement.

 if (useColorSchemeMediaQuery === 'system' && window.matchMedia) { 
   // It doesn't matter if we add the listener only to the dark media query 
   // Because in our callback function we'll check for both media queries (light and dark). 
   const darkMQL = window.matchMedia(DARK_QUERY) 
   if (typeof darkMQL.addEventListener === 'function') { 
     darkMQL.addEventListener('change', setPreferredColorScheme) 
   } else if (typeof darkMQL.addListener === 'function') { 
     darkMQL.addListener(setPreferredColorScheme) 
   }
   
   return () => { 
     if (typeof darkMQL.removeEventListener === 'function') { 
       darkMQL.removeEventListener('change', setPreferredColorScheme) 
     } else if (typeof darkMQL.removeListener === 'function') { 
       darkMQL.removeListener(setPreferredColorScheme) 
     }
   }  
 }