one-file-cli/template/src/lib/toggle-theme-mode.ts

Run shadcn/ui React components instantly with zero config - perfect for quick prototypes

import { useThemeStore } from "@/stores/theme"

export const toggleThemeMode = () => {
    const themeState = useThemeStore.getState().themeState
    const newMode = themeState.currentMode === "light" ? "dark" : "light"

    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches

    console.log("prefersReducedMotion", prefersReducedMotion)

    if (!document.startViewTransition || prefersReducedMotion) {
        useThemeStore.getState().setThemeState({
            ...themeState,
            currentMode: newMode
        })
        return
    }

    document.startViewTransition(() => {
        useThemeStore.getState().setThemeState({
            ...themeState,
            currentMode: newMode
        })
    })
}