Skip to content

Add color-scheme selection component #3825

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
amanmahajan7 merged 6 commits into from
Jul 22, 2025
Merged

Add color-scheme selection component #3825

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
24bbfff
Add an open to select color-scheme
amanmahajan7 Jul 21, 2025
35d3314
Add label
amanmahajan7 Jul 21, 2025
fbb82d7
Rename
amanmahajan7 Jul 22, 2025
f79a470
Simplify
amanmahajan7 Jul 22, 2025
331768f
Update src/style/core.ts
amanmahajan7 Jul 22, 2025
a3a1cdb
Add space
amanmahajan7 Jul 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 20 additions & 45 deletions src/style/core.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,34 +3,6 @@ import { css } from '@linaria/core';
import { cell } from './cell';
import { bottomSummaryRowClassname, row, topSummaryRowClassname } from './row';

const lightTheme = `
--rdg-color: #000;
--rdg-border-color: #ddd;
--rdg-summary-border-color: #aaa;
--rdg-background-color: hsl(0deg 0% 100%);
--rdg-header-background-color: hsl(0deg 0% 97.5%);
--rdg-header-draggable-background-color: hsl(0deg 0% 90.5%);
--rdg-row-hover-background-color: hsl(0deg 0% 96%);
--rdg-row-selected-background-color: hsl(207deg 76% 92%);
--rdg-row-selected-hover-background-color: hsl(207deg 76% 88%);

--rdg-checkbox-focus-color: hsl(207deg 100% 69%);
`;

const darkTheme = `
--rdg-color: #ddd;
--rdg-border-color: #444;
--rdg-summary-border-color: #555;
--rdg-background-color: hsl(0deg 0% 13%);
--rdg-header-background-color: hsl(0deg 0% 10.5%);
--rdg-header-draggable-background-color: hsl(0deg 0% 17.5%);
--rdg-row-hover-background-color: hsl(0deg 0% 9%);
--rdg-row-selected-background-color: hsl(207deg 76% 42%);
--rdg-row-selected-hover-background-color: hsl(207deg 76% 38%);

--rdg-checkbox-focus-color: hsl(207deg 100% 89%);
`;

const root = css`
@layer rdg.Defaults {
*,
Expand All @@ -41,21 +13,39 @@ const root = css`
}

@layer rdg.Root {
${lightTheme}
--rdg-selection-width: 2px;
--rdg-selection-color: hsl(207, 75%, 66%);
--rdg-font-size: 14px;
--rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);
--rdg-border-width: 1px;
--rdg-summary-border-width: calc(var(--rdg-border-width) * 2);
--rdg-color: light-dark(#000, #ddd);
--rdg-border-color: light-dark(#ddd, #444);
--rdg-summary-border-color: light-dark(#aaa, #555);
--rdg-background-color: light-dark(hsl(0deg 0% 100%), hsl(0deg 0% 13%));
--rdg-header-background-color: light-dark(hsl(0deg 0% 97.5%), hsl(0deg 0% 10.5%));
--rdg-header-draggable-background-color: light-dark(hsl(0deg 0% 90.5%), hsl(0deg 0% 17.5%));
--rdg-row-hover-background-color: light-dark(hsl(0deg 0% 96%), hsl(0deg 0% 9%));
--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-dark {
Copy link
Copy Markdown
Collaborator Author

@amanmahajan7 amanmahajan7 Jul 22, 2025

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

--rdg-color-scheme: dark;
}

&.rdg-light {
--rdg-color-scheme: light;
}

color-scheme: var(--rdg-color-scheme, light dark);

&:dir(rtl) {
--rdg-cell-frozen-box-shadow: -2px 0 5px -2px rgba(136, 136, 136, 0.3);
}

display: grid;

color-scheme: var(--rdg-color-scheme, light dark);
accent-color: light-dark(hsl(207deg 100% 29%), hsl(207deg 100% 79%));

/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
Expand All @@ -78,21 +68,6 @@ const root = css`
grid-row: 1/-1;
}

&.rdg-dark {
--rdg-color-scheme: dark;
${darkTheme}
}

&.rdg-light {
--rdg-color-scheme: light;
}

@media (prefers-color-scheme: dark) {
&:not(.rdg-light) {
${darkTheme}
}
}

> :nth-last-child(1 of .${topSummaryRowClassname}) {
> .${cell} {
border-block-end: var(--rdg-summary-border-width) solid var(--rdg-summary-border-color);
Expand Down
19 changes: 16 additions & 3 deletions website/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useId } from 'react';
import { useId, useState } from 'react';
import { Link } from '@tanstack/react-router';
import { css } from '@linaria/core';

Expand Down Expand Up @@ -46,10 +46,12 @@ const navClassname = css`
}
`;

const rtlCheckboxClassname = css`
const labelClassname = css`
padding-inline-start: 8px;
`;

export type Theme = 'light' | 'dark' | 'system';

interface Props {
direction: Direction;
onDirectionChange: (direction: Direction) => void;
Expand All @@ -58,10 +60,21 @@ interface Props {
export default function Nav({ direction, onDirectionChange }: Props) {
const demosNavId = useId();
const linksNavId = useId();
const [theme, setTheme] = useState<Theme>('system');

return (
<header className={headerClassname}>
<h1>react-data-grid</h1>

<label className={labelClassname}>
Theme{' '}
<select value={theme} onChange={(e) => setTheme(e.target.value as Theme)}>
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="system">System</option>
</select>
</label>

<nav aria-labelledby={demosNavId} className={navClassname}>
<h2 id={demosNavId}>Demos</h2>
<Link to="/CommonFeatures">Common Features</Link>
Expand Down Expand Up @@ -119,7 +132,7 @@ export default function Nav({ direction, onDirectionChange }: Props) {
</nav>

<h2>Direction</h2>
<label className={rtlCheckboxClassname}>
<label className={labelClassname}>
<input
type="checkbox"
checked={direction === 'rtl'}
Expand Down
11 changes: 10 additions & 1 deletion website/root.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,17 @@ body {
}

:root {
color-scheme: light dark;
&:has([value='light']:checked) {
--rdg-color-scheme: light;
}

&:has([value='dark']:checked) {
--rdg-color-scheme: dark;
}
}

body {
color-scheme: var(--rdg-color-scheme, light dark);
background-color: light-dark(#fff, hsl(0deg 0% 10%));
color: light-dark(#111, #fff);
}
Expand Down