prefers-color-scheme and usage of _osDark

[Southclaws]

Hey! I'm switching my usage of Park-UI from copying in the templates to just using the preset - mainly to save time and make use of the Radix colour system.

One issue I'm running in to is that it doesn't seem that Park-UI makes use of the native CSS prefers-color-scheme, or in Panda terms: _osDark for semantic colours.

I have quite a lot of components using, what was originally, my own colors.bg.default token, which used to look like this:

      default: {
        value: { base: "{colors.white}", _osDark: "{colors.gray.800}" },
      },

And on the docs, I can see both variants of all the default semantic tokens are set up to work with a dark and light mode: https://park-ui.com/docs/panda/theme/semantic-tokens

But I realise you're using a manual toggle rather than prefers-color-scheme:

While I've considered setting up a manual button in my app, it's not something I'm focusing on at the moment and I'm sticking with the native CSS approach for now.

What I'm wondering is, how can I tell Park-UI's preset to use prefers-color-scheme as the driver for switching the semantic token colour source?

[dannylin108]

What I'm wondering is, how can I tell Park-UI's preset to use prefers-color-scheme as the driver for switching the semantic token colour source?

The following works for me:

1. Add this into panda.config.ts:

   //...
   conditions: {
   extend: {
     dark: '.dark &, [data-theme="dark"] &',
     light: '.light &, [data-theme="light"] &',
   },
   }

2. Then add data-theme attribute depending of system preferences:

   onMount(() => {
   const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
   document.documentElement.dataset.theme = prefersDarkScheme  ? 'dark' : 'light';
   });

3. Can use _dark pseudo-class :

   <Box borderColor={{
           base: 'white.a10',
           _dark: 'black.a10'
       }}> 
       ...
   </Box>