Theme Provider

1"use client";
2 
3import Umbra, { type Options } from "@emrocode/umbra";
4import { createContext, type ReactNode, useContext, useState } from "react";
5import { KeyboardShortcut } from "./plugins";
6 
7const options: Partial<Options> = {
8  autoMatchTheme: true,
9  useColorScheme: ["#ffffff", "#000000"],
10  useStorage: "local",
11  usePlugins: [KeyboardShortcut],
12};
13 
14const umb = new Umbra(options);
15 
16const ThemeContext = createContext<{
17  theme: string;
18  toggleTheme: () => void;
19} | null>(null);
20 
21export const ThemeProvider = ({ children }: { children: ReactNode }) => {
22  const [theme, setTheme] = useState<string>(umb.getCurrentTheme());
23 
24  const toggleTheme = () => {
25    umb.toggleTheme();
26    setTheme(umb.getCurrentTheme());
27  };
28 
29  return (
30    <ThemeContext.Provider value={{ theme, toggleTheme }}>
31      {children}
32    </ThemeContext.Provider>
33  );
34};
35 
36export const useTheme = () => {
37  const context = useContext(ThemeContext);
38  if (!context) {
39    throw new Error("useTheme must be used within a ThemeProvider");
40  }
41  return context;
42};