feat: migrate visual fixtures to storybook

apps/web/src/composables/useTheme.js

@@ -0,0 +1,30 @@
+import { onMounted, onUnmounted, ref } from 'vue';
+
+const preference = ref('system');
+
+function applyTheme() {
+  const resolved = preference.value === 'system'
+    ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+    : preference.value;
+  document.documentElement.dataset.theme = resolved;
+}
+
+export function useTheme() {
+  function setTheme(nextTheme) {
+    preference.value = nextTheme;
+    localStorage.setItem('pokemon-inventory-theme', nextTheme);
+    applyTheme();
+  }
+
+  onMounted(() => {
+    preference.value = localStorage.getItem('pokemon-inventory-theme') ?? 'system';
+    applyTheme();
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyTheme);
+  });
+
+  onUnmounted(() => {
+    window.matchMedia('(prefers-color-scheme: dark)').removeEventListener('change', applyTheme);
+  });
+
+  return { preference, setTheme };
+}