Theme Preset Tool

1"use client";
2 
3import {
4  createContext,
5  type ReactNode,
6  useCallback,
7  useContext,
8  useEffect,
9  useMemo,
10  useState,
11} from "react";
12 
13type ThemeMode = "light" | "dark";
14type ThemePreference = ThemeMode | "system";
15 
16export type AppThemeProviderProps = {
17  children: ReactNode;
18  attribute?: string | string[];
19  defaultTheme?: ThemePreference;
20  enableSystem?: boolean;
21  enableColorScheme?: boolean;
22  disableTransitionOnChange?: boolean;
23  storageKey?: string;
24  forcedTheme?: ThemeMode;
25  value?: Record<string, string>;
26};
27 
28type AppThemeContextValue = {
29  theme: ThemePreference;
30  resolvedTheme: ThemeMode;
31  systemTheme: ThemeMode;
32  setTheme: (value: ThemePreference | ((current: ThemePreference) => ThemePreference)) => void;
33};
34 
35const MEDIA = "(prefers-color-scheme: dark)";
36 
37const AppThemeContext = createContext<AppThemeContextValue | undefined>(undefined);
38 
39function getSystemTheme(): ThemeMode {
40  if (typeof window === "undefined") {
41    return "light";
42  }
43 
44  return window.matchMedia(MEDIA).matches ? "dark" : "light";
45}
46 
47function disableTransitionsTemporarily() {
48  const style = document.createElement("style");
49  style.appendChild(
50    document.createTextNode(
51      "*,*::before,*::after{-webkit-transition:none!important;transition:none!important}"
52    )
53  );
54  document.head.appendChild(style);
55 
56  return () => {
57    window.getComputedStyle(document.body);
58    window.setTimeout(() => {
59      document.head.removeChild(style);
60    }, 1);
61  };
62}
63 
64export function AppThemeProvider({
65  children,
66  attribute = "class",
67  defaultTheme = "dark",
68  enableSystem = false,
69  enableColorScheme = false,
70  disableTransitionOnChange = true,
71  storageKey = "app-theme",
72  forcedTheme,
73  value,
74}: AppThemeProviderProps) {
75  const [theme, setThemeState] = useState<ThemePreference>(defaultTheme);
76  const [systemTheme, setSystemTheme] = useState<ThemeMode>("light");
77 
78  useEffect(() => {
79    if (typeof window === "undefined") {
80      return;
81    }
82 
83    let frameId = 0;
84 
85    try {
86      const stored = window.localStorage.getItem(storageKey) as ThemePreference | null;
87      if (stored === "light" || stored === "dark" || stored === "system") {
88        frameId = window.requestAnimationFrame(() => {
89          setThemeState(stored);
90        });
91      }
92    } catch {
93      // ignore storage failures
94    }
95 
96    return () => window.cancelAnimationFrame(frameId);
97  }, [storageKey]);
98 
99  useEffect(() => {
100    if (!enableSystem || typeof window === "undefined") {
101      return;
102    }
103 
104// … truncated