Set the color-scheme property based on Wagtail theming support. Fix #11309

client/tailwind.config.js

@@ -168,13 +168,18 @@ module.exports = {
           ...transparencies,
           ...generateColorVariables(staticColors),
           ...generateThemeColorVariables(colorThemes.light),
+          'color-scheme': 'light',
         },
         '.w-theme-system': {
-          '@media (prefers-color-scheme: dark)': generateThemeColorVariables(
-            colorThemes.dark,
-          ),
+          '@media (prefers-color-scheme: dark)': {
+            ...generateThemeColorVariables(colorThemes.dark),
+            'color-scheme': 'dark',
+          },
+        },
+        '.w-theme-dark': {
+          ...generateThemeColorVariables(colorThemes.dark),
+          'color-scheme': 'dark',
         },
-        '.w-theme-dark': generateThemeColorVariables(colorThemes.dark),
       });
     }),
     /** Support for aria-expanded=true variant */