awesome sauce checking

server.mjs

@@ -6,7 +6,7 @@ const [app, listen] = new ChemicalServer({
   uv: true,
   rammerhead: false,
 });
-const port = process.env.PORT || 3000;
+const port = process.env.PORT || 3001;
 const dev = process.env.NODE_ENV !== "production";
 const nextApp = next({ dev });
 const handle = nextApp.getRequestHandler();

src/app/globals.css

@@ -23,7 +23,6 @@
     --destructive: 6 96% 59%;
     --destructive-foreground: 0 0% 100%;
     --ring: 215.09 100% 98.03%;
-
     --radius: 0.4rem;
   }
 

src/app/settings/credits/page.tsx

@@ -16,6 +16,7 @@ export default function Credits() {
           <li>Scaratek</li>
           <li>fwxe</li>
           <li>Nebelung</li>
+          <li>anshnk</li>
         </ul>
       </div>
     </div>

src/components/ThemeSwitch.tsx

@@ -20,7 +20,7 @@ export function ModeToggle() {
       <DropdownMenuTrigger asChild>
         <Button variant="outline">
           <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 mr-1" />
-          <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100 mr-[60px]" />
           <p>Themes</p>
           <span className="sr-only">Toggle theme</span>
         </Button>

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"
+	| 'radius'
-	| "cyberpunk"
+	| 'cyberpunk'
-	| "bluelight"
+	| 'bluelight'
-	| "midnight"
+	| 'midnight'
-	| "system";
+	| 'system';
 const themes: Theme[] = [
-	"radius",
+	'radius',
-	"cyberpunk",
+	'cyberpunk',
-	"bluelight",
+	'bluelight',
-	"midnight",
+	'midnight',
-	"system",
+	'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",
+	defaultTheme = 'system',
-	storageKey = "theme",
+	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") {
+		if (theme === 'system') {
-			const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+			const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
 				.matches
-				? "default"
+				? 'midnight'
-				: "bluelight";
+				: '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;
 };