react / react/react-strict-dom

Default value is ignored if device color scheme is dark

Open
#456 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
3.6k
Forks
206
PR merge metrics
No merged PRs in 30d

Description

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',
  }
})
  1. 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,
	},
});
  1. 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:
Image

Dark-mode:
Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in customProperties.js at line 71 and reproduce the provided defineVars example with the device in dark mode. Confirm that a variable with a default and a non-color-scheme media query keeps its default value, then verify the same behavior in light mode and check the existing test coverage for a suitable regression case.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.