test

Author: comhon-project

packages/vue/playground/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, reactive, ref, shallowRef } from 'vue';
+import { computed, onMounted, reactive, ref, shallowRef } from 'vue';
 import { locale } from '@query-kit/vue';
 import { generateRow } from './core/MockDataGenerator';
 import RequestDisplay from './components/RequestDisplay.vue';
@@ -140,9 +140,22 @@ function onFieldClick(value, item, fieldId, event) {
 }
 
 const theme = ref('auto');
+// Temporary diagnostic for the mobile dark-mode issue: `set` is the inline
+// color-scheme assigned to <html>, `computed` is what the browser resolves it
+// to. The template swatch uses light-dark() directly to show whether the forced
+// scheme actually flips colors.
+const themeDebug = ref({ set: '', computed: '' });
+function refreshThemeDebug() {
+  themeDebug.value = {
+    set: document.documentElement.style.colorScheme || '(unset)',
+    computed: getComputedStyle(document.documentElement).colorScheme,
+  };
+}
 function onThemeChange() {
   document.documentElement.style.colorScheme = theme.value === 'auto' ? 'light dark' : theme.value;
+  refreshThemeDebug();
 }
+onMounted(refreshThemeDebug);
 </script>
 
 <template>
@@ -174,6 +187,16 @@ function onThemeChange() {
       </select>
     </div>
 
+    <div
+      class="theme-debug"
+      style="margin: 8px 0; padding: 8px; border: 2px dashed currentColor; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; font: 13px/1.4 monospace"
+    >
+      <span>select: <b>{{ theme }}</b></span>
+      <span>style.colorScheme: <b>{{ themeDebug.set }}</b></span>
+      <span>getComputedStyle: <b>{{ themeDebug.computed }}</b></span>
+      <span style="padding: 4px 10px; border: 1px solid currentColor; background: light-dark(#fff, #111); color: light-dark(#111, #fff)">light-dark() swatch</span>
+    </div>
+
     <!-- Default -->
     <div v-if="activeTab === 'default'">
       <p class="playground-description">