set explicit color-scheme on storefront theme roots

Align native browser controls with the active light or dark theme instead of using light dark on html.

Co-authored-by: Cursor <cursoragent@cursor.com>

backend/src/modules/storefrontCore/public/css/storefront.css

@@ -1,4 +1,5 @@
 :root {
+    color-scheme: light;
     --sf-font-sans:
         'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
     --sf-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
@@ -52,6 +53,7 @@
 
 @media (prefers-color-scheme: dark) {
     :root:not([data-theme='light']) {
+        color-scheme: dark;
         --sf-bg: #0a0a0a;
         --sf-surface: #141414;
         --sf-surface-muted: #262727;
@@ -85,6 +87,7 @@
 }
 
 :root[data-theme='dark'] {
+    color-scheme: dark;
     --sf-bg: #0a0a0a;
     --sf-surface: #141414;
     --sf-surface-muted: #262727;
@@ -117,6 +120,7 @@
 }
 
 :root[data-theme='light'] {
+    color-scheme: light;
     --sf-bg: #ffffff;
     --sf-surface: #ffffff;
     --sf-surface-muted: #f5f7fa;
@@ -154,10 +158,6 @@
     box-sizing: border-box;
 }
 
-html {
-    color-scheme: light dark;
-}
-
 body.sf-body {
     margin: 0;
     min-height: 100vh;