From 24bbfff0274a5a68a783069026d51f1b003cb12a Mon Sep 17 00:00:00 2001
From: amahajan <amahajan@freewheel.tv>
Date: Mon, 21 Jul 2025 17:05:21 -0500
Subject: [PATCH 1/6] Add an open to select color-scheme

---
 src/style/core.ts | 70 +++++++++++++++++------------------------------
 website/Nav.tsx   | 12 +++++++-
 website/root.css  | 18 ++++++++++++
 3 files changed, 54 insertions(+), 46 deletions(-)

diff --git a/src/style/core.ts b/src/style/core.ts
index 25dc3c863c..9615aed5f1 100644
--- a/src/style/core.ts
+++ b/src/style/core.ts
@@ -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 {
     *,
@@ -41,13 +13,37 @@ const root = css`
   }
 
   @layer rdg.Root {
-    ${lightTheme}
+    --_rdg-color-scheme: light dark;
     --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%);
+
+    @container style(--rdg-color-scheme) {
+      --_rdg-color-scheme: var(--rdg-color-scheme);
+    }
+
+    &.rdg-dark {
+      --_rdg-color-scheme: dark;
+    }
+
+    &.rdg-light {
+      --_rdg-color-scheme: light;
+    }
+
+    color-scheme: var(--_rdg-color-scheme);
 
     &:dir(rtl) {
       --rdg-cell-frozen-box-shadow: -2px 0 5px -2px rgba(136, 136, 136, 0.3);
@@ -55,7 +51,6 @@ const root = css`
 
     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 */
@@ -78,21 +73,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);
diff --git a/website/Nav.tsx b/website/Nav.tsx
index cb4684f5d7..9b221b3d0e 100644
--- a/website/Nav.tsx
+++ b/website/Nav.tsx
@@ -1,4 +1,4 @@
-import { useId } from 'react';
+import { useId, useState } from 'react';
 import { Link } from '@tanstack/react-router';
 import { css } from '@linaria/core';
 
@@ -50,6 +50,8 @@ const rtlCheckboxClassname = css`
   padding-inline-start: 8px;
 `;
 
+export type Theme = 'light' | 'dark' | 'system';
+
 interface Props {
   direction: Direction;
   onDirectionChange: (direction: Direction) => void;
@@ -58,6 +60,7 @@ 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}>
@@ -118,6 +121,13 @@ export default function Nav({ direction, onDirectionChange }: Props) {
         </a>
       </nav>
 
+      <h2>Theme</h2>
+      <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>
+
       <h2>Direction</h2>
       <label className={rtlCheckboxClassname}>
         <input
diff --git a/website/root.css b/website/root.css
index 6d104d8c09..3c92b83edb 100644
--- a/website/root.css
+++ b/website/root.css
@@ -6,8 +6,26 @@ body {
 }
 
 :root {
+  &:has([value='light']:checked) {
+    --rdg-color-scheme: light;
+  }
+
+  &:has([value='dark']:checked) {
+    --rdg-color-scheme: dark;
+  }
+}
+
+body {
   color-scheme: light dark;
 
+  @container style(--rdg-color-scheme: light) {
+    color-scheme: light;
+  }
+
+  @container style(--rdg-color-scheme: dark) {
+    color-scheme: dark;
+  }
+
   background-color: light-dark(#fff, hsl(0deg 0% 10%));
   color: light-dark(#111, #fff);
 }

From 35d3314a6faba17ba80d9c58bfac3b582ac7fa6a Mon Sep 17 00:00:00 2001
From: amahajan <amahajan@freewheel.tv>
Date: Mon, 21 Jul 2025 17:13:32 -0500
Subject: [PATCH 2/6] Add label

---
 website/Nav.tsx | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/website/Nav.tsx b/website/Nav.tsx
index 9b221b3d0e..6487a9b1b5 100644
--- a/website/Nav.tsx
+++ b/website/Nav.tsx
@@ -46,7 +46,7 @@ const navClassname = css`
   }
 `;
 
-const rtlCheckboxClassname = css`
+const labelClassname = css`
   padding-inline-start: 8px;
 `;
 
@@ -65,6 +65,15 @@ export default function Nav({ direction, onDirectionChange }: Props) {
   return (
     <header className={headerClassname}>
       <h1>react-data-grid</h1>
+
+      <label className={labelClassname}>
+        Mode{' '}
+        <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>
@@ -121,15 +130,8 @@ export default function Nav({ direction, onDirectionChange }: Props) {
         </a>
       </nav>
 
-      <h2>Theme</h2>
-      <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>
-
       <h2>Direction</h2>
-      <label className={rtlCheckboxClassname}>
+      <label className={labelClassname}>
         <input
           type="checkbox"
           checked={direction === 'rtl'}

From fbb82d7a405f072cbb32710035e68b531b3000e6 Mon Sep 17 00:00:00 2001
From: amahajan <amahajan@freewheel.tv>
Date: Mon, 21 Jul 2025 21:57:14 -0500
Subject: [PATCH 3/6] Rename

---
 website/Nav.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/website/Nav.tsx b/website/Nav.tsx
index 6487a9b1b5..839ceab716 100644
--- a/website/Nav.tsx
+++ b/website/Nav.tsx
@@ -67,13 +67,14 @@ export default function Nav({ direction, onDirectionChange }: Props) {
       <h1>react-data-grid</h1>
 
       <label className={labelClassname}>
-        Mode{' '}
+        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>

From f79a470530bcb8e535ecc676be8e16fa56361ffc Mon Sep 17 00:00:00 2001
From: amahajan <amahajan@freewheel.tv>
Date: Tue, 22 Jul 2025 08:21:49 -0500
Subject: [PATCH 4/6] Simplify

---
 src/style/core.ts |  6 +-----
 website/root.css  | 11 +----------
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/src/style/core.ts b/src/style/core.ts
index 9615aed5f1..b6691cbb8e 100644
--- a/src/style/core.ts
+++ b/src/style/core.ts
@@ -13,7 +13,6 @@ const root = css`
   }
 
   @layer rdg.Root {
-    --_rdg-color-scheme: light dark;
     --rdg-selection-width: 2px;
     --rdg-selection-color: hsl(207, 75%, 66%);
     --rdg-font-size: 14px;
@@ -30,10 +29,7 @@ const root = css`
     --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%);
-
-    @container style(--rdg-color-scheme) {
-      --_rdg-color-scheme: var(--rdg-color-scheme);
-    }
+    --_rdg-color-scheme: var(--rdg-color-scheme, light dark);
 
     &.rdg-dark {
       --_rdg-color-scheme: dark;
diff --git a/website/root.css b/website/root.css
index 3c92b83edb..5e21fcd71d 100644
--- a/website/root.css
+++ b/website/root.css
@@ -16,16 +16,7 @@ body {
 }
 
 body {
-  color-scheme: light dark;
-
-  @container style(--rdg-color-scheme: light) {
-    color-scheme: light;
-  }
-
-  @container style(--rdg-color-scheme: dark) {
-    color-scheme: dark;
-  }
-
+  color-scheme: var(--rdg-color-scheme, light dark);
   background-color: light-dark(#fff, hsl(0deg 0% 10%));
   color: light-dark(#111, #fff);
 }

From 331768f87f0b567a5ea80edc801f088164a6d58c Mon Sep 17 00:00:00 2001
From: Aman Mahajan <amahajan@stratag.com>
Date: Tue, 22 Jul 2025 09:09:33 -0500
Subject: [PATCH 5/6] Update src/style/core.ts

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>
---
 src/style/core.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/style/core.ts b/src/style/core.ts
index b6691cbb8e..2f2166887b 100644
--- a/src/style/core.ts
+++ b/src/style/core.ts
@@ -29,17 +29,15 @@ const root = css`
     --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);
-
     &.rdg-dark {
-      --_rdg-color-scheme: dark;
+      --rdg-color-scheme: dark;
     }
 
     &.rdg-light {
-      --_rdg-color-scheme: light;
+      --rdg-color-scheme: light;
     }
 
-    color-scheme: var(--_rdg-color-scheme);
+    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);

From a3a1cdbe1738e62626095c9608769c495322e714 Mon Sep 17 00:00:00 2001
From: amahajan <amahajan@freewheel.tv>
Date: Tue, 22 Jul 2025 09:10:11 -0500
Subject: [PATCH 6/6] Add space

---
 src/style/core.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/style/core.ts b/src/style/core.ts
index 2f2166887b..ec3a0abc6b 100644
--- a/src/style/core.ts
+++ b/src/style/core.ts
@@ -29,6 +29,7 @@ const root = css`
     --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 {
       --rdg-color-scheme: dark;
     }