Move useCssVariable into ui package

resources/js/packages/ui/src/utils/useCssVariable.ts

@@ -0,0 +1,49 @@
+import { ref, onMounted, onUnmounted } from 'vue';
+
+export function useCssVariable(variableName: string) {
+    const value = ref('');
+    let observer: MutationObserver | null = null;
+    let mediaQuery: MediaQueryList | null = null;
+
+    const updateValue = () => {
+        const computedStyle = getComputedStyle(document.documentElement);
+        const cssValue = computedStyle.getPropertyValue(variableName).trim();
+        value.value = cssValue;
+    };
+
+    onMounted(() => {
+        // Initialize with current value
+        updateValue();
+
+        // Watch for class changes on document.documentElement (where theme classes are applied)
+        observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    updateValue();
+                }
+            });
+        });
+
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+
+        // Also watch for system color scheme changes
+        if (window.matchMedia) {
+            mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            mediaQuery.addEventListener('change', updateValue);
+        }
+    });
+
+    onUnmounted(() => {
+        if (observer) {
+            observer.disconnect();
+        }
+        if (mediaQuery) {
+            mediaQuery.removeEventListener('change', updateValue);
+        }
+    });
+
+    return value;
+}