setup-ui-template

src/components/kbar/use-theme-switching.tsx

@@ -0,0 +1,36 @@
+import { useRegisterActions } from 'kbar';
+import { useTheme } from 'next-themes';
+
+const useThemeSwitching = () => {
+  const { theme, setTheme } = useTheme();
+
+  const toggleTheme = () => {
+    setTheme(theme === 'light' ? 'dark' : 'light');
+  };
+
+  const themeAction = [
+    {
+      id: 'toggleTheme',
+      name: 'Toggle Theme',
+      shortcut: ['t', 't'],
+      section: 'Theme',
+      perform: toggleTheme
+    },
+    {
+      id: 'setLightTheme',
+      name: 'Set Light Theme',
+      section: 'Theme',
+      perform: () => setTheme('light')
+    },
+    {
+      id: 'setDarkTheme',
+      name: 'Set Dark Theme',
+      section: 'Theme',
+      perform: () => setTheme('dark')
+    }
+  ];
+
+  useRegisterActions(themeAction, [theme]);
+};
+
+export default useThemeSwitching;