Describe the issue

When using dark mode on device the default value of defineVars with media-queries other than preferes-color-scheme are ignored. If using light mode the default value is used as expected.

From researching this a bit if think the issue is at line 71 in customProperties.js:

   if (variableValue != null) {
    if (typeof variableValue === 'object' && variableValue.default != null) {
      let defaultValue = variableValue.default;
      if (colorScheme === 'dark') {
        defaultValue = variableValue['@media (prefers-color-scheme: dark)'];
      }
      return defaultValue;
    }
    return variableValue;

It looks like the if-check if (colorScheme === 'dark') should also check if the variableValue['@media (prefers-color-scheme: dark)'] exists before setting the defaultValue.

Expected behavior

When device is set to dark mode styling should behave the same as in light mode.

Steps to reproduce

1. Define a css-var like this:

// fontSize.css.js
export const fontSize = css.defineVars({
  small: {
    default: '32px',
    '@media (min-width: 800px)': '20px',
  }
})

2. Use the var in a component:

import { fontSize } from './fontSize.css';

export function ComponentA() {
	return <html.p style={styles.componentA}>Responsive test</html.p>;
}

const styles = css.create({
	componentA: {
		fontSize: fontSize.small,
	},
});

3. Check the component on device/simulator in dark-mode.

Test case

No response

Additional comments

Images from the above example running in our test-app. (Ignore the ugly theme switcher in the upper right)

Light-mode:

Dark-mode: