fix: prettier config

This commit is contained in:
hamster1963
2024-12-13 17:26:28 +08:00
parent 1483ce56fa
commit 9a2f3ea8e6
81 changed files with 1666 additions and 2286 deletions
+30 -43
View File
@@ -1,73 +1,60 @@
import { createContext, useEffect, useState, ReactNode } from "react";
import { ReactNode, createContext, useEffect, useState } from "react"
export type Theme = "dark" | "light" | "system";
export type Theme = "dark" | "light" | "system"
type ThemeProviderProps = {
children: ReactNode;
defaultTheme?: Theme;
storageKey?: string;
};
children: ReactNode
defaultTheme?: Theme
storageKey?: string
}
type ThemeProviderState = {
theme: Theme;
setTheme: (theme: Theme) => void;
};
theme: Theme
setTheme: (theme: Theme) => void
}
const initialState: ThemeProviderState = {
theme: "system",
setTheme: () => null,
};
}
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
export function ThemeProvider({
children,
storageKey = "vite-ui-theme",
}: ThemeProviderProps) {
export function ThemeProvider({ children, storageKey = "vite-ui-theme" }: ThemeProviderProps) {
const [theme, setTheme] = useState<Theme>(
() => (localStorage.getItem(storageKey) as Theme) || "system",
);
)
useEffect(() => {
const root = window.document.documentElement;
const root = window.document.documentElement
root.classList.remove("light", "dark");
root.classList.remove("light", "dark")
if (theme === "system") {
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
.matches
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
: "light"
root.classList.add(systemTheme);
const themeColor =
systemTheme === "dark" ? "hsl(30 15% 8%)" : "hsl(0 0% 98%)";
document
.querySelector('meta[name="theme-color"]')
?.setAttribute("content", themeColor);
return;
root.classList.add(systemTheme)
const themeColor = systemTheme === "dark" ? "hsl(30 15% 8%)" : "hsl(0 0% 98%)"
document.querySelector('meta[name="theme-color"]')?.setAttribute("content", themeColor)
return
}
root.classList.add(theme);
const themeColor = theme === "dark" ? "hsl(30 15% 8%)" : "hsl(0 0% 98%)";
document
.querySelector('meta[name="theme-color"]')
?.setAttribute("content", themeColor);
}, [theme]);
root.classList.add(theme)
const themeColor = theme === "dark" ? "hsl(30 15% 8%)" : "hsl(0 0% 98%)"
document.querySelector('meta[name="theme-color"]')?.setAttribute("content", themeColor)
}, [theme])
const value = {
theme,
setTheme: (theme: Theme) => {
localStorage.setItem(storageKey, theme);
setTheme(theme);
localStorage.setItem(storageKey, theme)
setTheme(theme)
},
};
}
return (
<ThemeProviderContext.Provider value={value}>
{children}
</ThemeProviderContext.Provider>
);
return <ThemeProviderContext.Provider value={value}>{children}</ThemeProviderContext.Provider>
}
export { ThemeProviderContext };
export { ThemeProviderContext }