Add color-scheme selection component (Comcast#3825)

* 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>

Author: amanmahajan7

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,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 {
+      --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 */
@@ -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);

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';
 
@@ -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;
@@ -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>
@@ -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'}

website/root.css

@@ -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);
 }