Default value is ignored if device color scheme is dark
評価
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 初心者へのやさしさ
- 58/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- javascript, react
- 領域
- frontend
調査の方向性
customProperties.js の 71 行目から始め、デバイスをダークモードにして、提示された defineVars の例を再現します。デフォルト値と、カラースキーム以外のメディアクエリを持つ変数がデフォルト値を維持することを確認し、次にライトモードでも同じ動作を検証して、既存のテストカバレッジに適切なリグレッションケースがあるか確認します。
索引モデルが issue の本文から書いたものです。
説明
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
- Define a css-var like this:
// fontSize.css.js
export const fontSize = css.defineVars({
small: {
default: '32px',
'@media (min-width: 800px)': '20px',
}
})
- 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,
},
});
- 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:
- 主要言語
- JavaScript
- スター
- 3.6k
- フォーク
- 208
- PR マージ指標
- 30日以内にマージされた PR はありません
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
react/react-strict-dom のほかの issue
-
Outline styles aren't parsed in React Native対応中かも @hoangvvo が 147 日前に担当しました。 オープンbug
難易度 2/5 1〜3時間 初心者へのやさしさ 65/100
react/react-strict-dom#467 · コメント 1 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
react/react-strict-dom#465 · コメント 2 件 ·
-
postcss plugin re-transforms every included file on each rebuild under Turbopack (minutes-long HMR in large projects)対応中かも @borisyankov が 16 日前に担当しました。 オープン
難易度 5/5 1週間以上 初心者へのやさしさ 35/100
react/react-strict-dom#520 ·
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 35/100
react/react-strict-dom#505 · リアクション 2 件 ·
-
Button remains unclickable after disabled state changes対応中かも @MoOx が 130 日前に担当しました。 オープンbug
難易度 3/5 1〜2日 初心者へのやさしさ 62/100
react/react-strict-dom#491 · コメント 4 件 ·
react/react-strict-dom の issue をすべて見る
似ている issue
-
[Bug] Composer can submit an IME confirmation when keyCode is 229 but isComposing is false対応中かも このイシューにリンクされたプルリクエストがオープン中、またはマージ済みです。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
apache/rocketmq-dashboard#6067 ·
メンテナーはふだん 4 日以内に返信
-
severity: low
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
luainkernel/lunatik#1853 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
メンテナーはふだん 1 日以内に返信
-
factory-active factory-automatic harness/claude-code task-identify-harness-labels-done task-identify-issue-type-done
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 62/100
メンテナーはふだん 1 日以内に返信