Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Default value is ignored if device color scheme is dark

Đang mở
  • Có gì không ổn?
#456 0 bình luận 1 reaction 0 người được giao Xem trên GitHub

@orhels đang làm issue này rồi.

Từ ngày 26/2/2026.

  • #457 của @orhels — đang mở

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
58/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
javascript, react
Lĩnh vực
frontend

Hướng nghiên cứu

Bắt đầu trong customProperties.js tại dòng 71 và tái hiện ví dụ defineVars được cung cấp với thiết bị ở chế độ tối. Xác nhận rằng một biến có giá trị mặc định và một media query không liên quan đến lược đồ màu vẫn giữ giá trị mặc định của nó, sau đó xác minh hành vi tương tự ở chế độ sáng và kiểm tra phạm vi bao phủ của các bài kiểm thử hiện có để tìm một trường hợp hồi quy phù hợp.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
JavaScript
Star
3.6k
Fork
208
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react/react-strict-dom

Tất cả issue của react/react-strict-dom

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.