Add CSS color-scheme utilities

tailwindlabs · May 22, 2023 · f2a9102 · f2a9102
1 parent 0af64ee
commit f2a9102
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 0 deletions.
diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -2846,4 +2846,13 @@ export let corePlugins = {
   content: createUtilityPlugin('content', [
     ['content', ['--tw-content', ['content', 'var(--tw-content)']]],
   ]),
+  colorScheme: ({ addUtilities }) => {
+    addUtilities({
+      '.color-scheme-dark': { 'color-scheme': 'dark' },
+      '.color-scheme-light': { 'color-scheme': 'light' },
+      '.color-scheme-light-dark': { 'color-scheme': 'light dark' },
+      '.color-scheme-dark-only': { 'color-scheme': 'dark only' },
+      '.color-scheme-light-only': { 'color-scheme': 'light only' },
+    })
+  },
 }
diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css
@@ -1026,3 +1026,6 @@
   --tw-content: none;
   content: var(--tw-content);
 }
+.color-scheme-dark {
+  color-scheme: dark;
+}
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
@@ -1056,3 +1056,6 @@
   --tw-content: none;
   content: var(--tw-content);
 }
+.color-scheme-dark {
+  color-scheme: dark;
+}
diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js
@@ -198,6 +198,7 @@ crosscheck(({ stable, oxide }) => {
             <div class="will-change-scroll will-change-transform"></div>
             <div class="content-none"></div>
             <div class="aspect-square aspect-video"></div>
+            <div class="color-scheme-dark"></div>
           `,
         },
       ],