add CSS color-scheme utilities

Co-authored-by: Luke Warlow <luke@warlow.dev>
tailwindlabs · Apr 17, 2024 · 6b161f8 · 6b161f8
1 parent cc8c069
commit 6b161f8
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 0 deletions.
diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -613,6 +613,11 @@ exports[`getClassList 1`] = `
   "col-start-9",
   "col-start-auto",
   "collapse",
+  "color-scheme-dark",
+  "color-scheme-dark-only",
+  "color-scheme-light",
+  "color-scheme-light-dark",
+  "color-scheme-light-only",
   "columns-1",
   "columns-10",
   "columns-11",

diff --git a/packages/tailwindcss/src/utilities.test.ts b/packages/tailwindcss/src/utilities.test.ts
@@ -10677,6 +10677,65 @@ test('content', () => {
   expect(run(['content', '-content-["hello_world"]'])).toEqual('')
 })
 
+test('color-scheme', () => {
+  expect(
+    run([
+      'color-scheme-dark',
+      'color-scheme-light',
+      'color-scheme-light-dark',
+      'color-scheme-dark-only',
+      'color-scheme-light-only',
+    ]),
+  ).toMatchInlineSnapshot(`
+    ".color-scheme-dark {
+      --lightningcss-light: ;
+      --lightningcss-dark: initial;
+      color-scheme: dark;
+    }
+
+    .color-scheme-dark-only {
+      --lightningcss-light: ;
+      --lightningcss-dark: initial;
+      color-scheme: dark only;
+    }
+
+    .color-scheme-light {
+      --lightningcss-light: initial;
+      --lightningcss-dark: ;
+      color-scheme: light;
+    }
+
+    .color-scheme-light-dark {
+      --lightningcss-light: initial;
+      --lightningcss-dark: ;
+      color-scheme: light dark;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      .color-scheme-light-dark {
+        --lightningcss-light: ;
+        --lightningcss-dark: initial;
+      }
+    }
+
+    .color-scheme-light-only {
+      --lightningcss-light: initial;
+      --lightningcss-dark: ;
+      color-scheme: light only;
+    }"
+  `)
+  expect(
+    run([
+      'color-scheme',
+      '-color-scheme-dark',
+      '-color-scheme-light',
+      '-color-scheme-light-dark',
+      '-color-scheme-dark-only',
+      '-color-scheme-light-only',
+    ]),
+  ).toEqual('')
+})
+
 test('forced-color-adjust', () => {
   expect(run(['forced-color-adjust-none', 'forced-color-adjust-auto'])).toMatchInlineSnapshot(`
     ".forced-color-adjust-auto {

diff --git a/packages/tailwindcss/src/utilities.ts b/packages/tailwindcss/src/utilities.ts
@@ -813,6 +813,15 @@ export function createUtilities(theme: Theme) {
   staticUtility('box-border', [['box-sizing', 'border-box']])
   staticUtility('box-content', [['box-sizing', 'content-box']])
 
+  /**
+   * @css `color-scheme`
+   */
+  staticUtility('color-scheme-dark', [['color-scheme', 'dark']])
+  staticUtility('color-scheme-light', [['color-scheme', 'light']])
+  staticUtility('color-scheme-light-dark', [['color-scheme', 'light dark']])
+  staticUtility('color-scheme-dark-only', [['color-scheme', 'dark only']])
+  staticUtility('color-scheme-light-only', [['color-scheme', 'light only']])
+
   /**
    * @css `line-clamp`
    */