Skip to content

Add color-scheme selection component#3825

Merged
amanmahajan7 merged 6 commits intomainfrom
color-scheme-2
Jul 22, 2025
Merged

Add color-scheme selection component#3825
amanmahajan7 merged 6 commits intomainfrom
color-scheme-2

Conversation

@amanmahajan7
Copy link
Copy Markdown
Collaborator

@amanmahajan7 amanmahajan7 commented Jul 21, 2025

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark

System
image

Dark
image

Light
image

Adding rdg-dark classname in light mode
image

Adding rdg-light classname in dark mode
image

@amanmahajan7 amanmahajan7 self-assigned this Jul 21, 2025
@amanmahajan7 amanmahajan7 changed the title Add an open to select color-scheme Add an open to select mode (color-scheme) Jul 21, 2025
@amanmahajan7 amanmahajan7 changed the title Add an open to select mode (color-scheme) Add an control to select mode (color-scheme) Jul 21, 2025
@amanmahajan7 amanmahajan7 changed the title Add an control to select mode (color-scheme) Add color-scheme selection component Jul 22, 2025
@codecov
Copy link
Copy Markdown

codecov Bot commented Jul 22, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 98.61%. Comparing base (3c3b617) to head (a3a1cdb).
Report is 1 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #3825      +/-   ##
==========================================
- Coverage   98.61%   98.61%   -0.01%     
==========================================
  Files          46       46              
  Lines        3615     3611       -4     
  Branches      773      773              
==========================================
- Hits         3565     3561       -4     
  Misses         50       50              
Files with missing lines Coverage Δ
src/style/core.ts 100.00% <ø> (ø)

... and 4 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Comment thread src/style/core.ts
--_rdg-color-scheme: var(--rdg-color-scheme);
}

&.rdg-dark {
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can still force dark mode using this class

@amanmahajan7 amanmahajan7 marked this pull request as ready for review July 22, 2025 13:25
@amanmahajan7 amanmahajan7 requested a review from nstepien as a code owner July 22, 2025 13:25
Comment thread src/style/core.ts Outdated
--rdg-row-selected-background-color: light-dark(hsl(207deg 76% 92%), hsl(207deg 76% 42%));
--rdg-row-selected-hover-background-color: light-dark(hsl(207deg 76% 88%), hsl(207deg 76% 38%));
--rdg-checkbox-focus-color: hsl(207deg 100% 69%);
--_rdg-color-scheme: var(--rdg-color-scheme, light dark);
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is easy to override the default light/dark styles if needed by setting a variable

:root {
  --rdg-color-scheme: light;
}

grid is now always rendered in the light mode

Comment thread src/style/core.ts Outdated
amanmahajan7 and others added 2 commits July 22, 2025 09:09
Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
@amanmahajan7 amanmahajan7 merged commit 8842595 into main Jul 22, 2025
2 checks passed
@amanmahajan7 amanmahajan7 deleted the color-scheme-2 branch July 22, 2025 14:20
royue pushed a commit to royue/react-data-grid that referenced this pull request Dec 17, 2025
* Add an open to select color-scheme

* Add label

* Rename

* Simplify

* Update src/style/core.ts

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

* Add space

---------

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants