Add CSS color-scheme utilities

Author: lukewarlow

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' },
+    })
+  },
 }

tests/basic-usage.oxide.test.css

@@ -1026,3 +1026,6 @@
   --tw-content: none;
   content: var(--tw-content);
 }
+.color-scheme-dark {
+  color-scheme: dark;
+}

tests/basic-usage.test.css

@@ -1056,3 +1056,6 @@
   --tw-content: none;
   content: var(--tw-content);
 }
+.color-scheme-dark {
+  color-scheme: dark;
+}

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>
           `,
         },
       ],