awesome sauce checking

src/components/theme-provider.tsx

@@ -1,17 +1,17 @@
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useState } from 'react';
 
 type Theme =
-	| "radius"
-	| "cyberpunk"
-	| "bluelight"
-	| "midnight"
-	| "system";
+	| 'radius'
+	| 'cyberpunk'
+	| 'bluelight'
+	| 'midnight'
+	| 'system';
 const themes: Theme[] = [
-	"radius",
-	"cyberpunk",
-	"bluelight",
-	"midnight",
-	"system",
+	'radius',
+	'cyberpunk',
+	'bluelight',
+	'midnight',
+	'system',
 ];
 type ThemeProviderProps = {
 	children: React.ReactNode;
@@ -26,7 +26,7 @@ type ThemeProviderState = {
 
 const initialState: ThemeProviderState = {
 	themes: themes,
-	theme: "system",
+	theme: 'system',
 	setTheme: () => null,
 };
 
@@ -34,8 +34,8 @@ const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
 
 export function ThemeProvider({
 	children,
-	defaultTheme = "system",
-	storageKey = "theme",
+	defaultTheme = 'system',
+	storageKey = 'theme',
 	...props
 }: ThemeProviderProps) {
 	const [theme, setTheme] = useState<Theme>(
@@ -45,13 +45,13 @@ export function ThemeProvider({
 	useEffect(() => {
 		const root = window.document.documentElement;
 
-		themes.forEach((theme) => root.classList.remove(theme));
+		root.classList.remove(...themes);
 
-		if (theme === "system") {
-			const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+		if (theme === 'system') {
+			const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
 				.matches
-				? "default"
-				: "bluelight";
+				? 'midnight'
+				: 'bluelight';
 
 			root.classList.add(systemTheme);
 			return;
@@ -80,7 +80,7 @@ export const useTheme = () => {
 	const context = useContext(ThemeProviderContext);
 
 	if (context === undefined)
-		throw new Error("useTheme must be used within a ThemeProvider");
+		throw new Error('useTheme must be used within a ThemeProvider');
 
 	return context;
-};
+};