Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Default value is ignored if device color scheme is dark

Aperta
  • Qualcosa non va?
#456 0 commenti 1 reazione 0 assegnatari Vedi su GitHub

@orhels ci sta già lavorando.

Dal 26/2/2026.

  • #457 di @orhels — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
58/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Ferma
Stack tecnologico
javascript, react
Ambito
frontend

Direzione di ricerca

Inizia in customProperties.js alla riga 71 e riproduci l'esempio defineVars fornito con il dispositivo in modalità scura. Conferma che una variabile con un valore predefinito e una media query non relativa allo schema di colori mantenga il proprio valore predefinito, quindi verifica lo stesso comportamento in modalità chiara e controlla la copertura dei test esistente per trovare un caso di regressione adatto.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

bug
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

Lingua principale
JavaScript
Stelle
3.6k
Fork
208
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di react/react-strict-dom

Tutte le issue di react/react-strict-dom

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.