Merge pull request #53 from anshnk/main

Add Theme Toggle Component To Settings and Update Theme Management/UI

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/appearance/page.tsx

@@ -3,6 +3,7 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { ModeToggle } from "@/components/ThemeSwitch";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -87,6 +88,7 @@ export default function Settings() {
           </div>
         </form>
       </Form>
+      <ModeToggle />
     </div>
   );
 }

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

@@ -18,9 +18,10 @@ export function ModeToggle() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline" size="icon">
+        <Button variant="outline">
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0 mr-1" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] 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>
       </DropdownMenuTrigger>

src/components/navbar.tsx

@@ -20,7 +20,6 @@ export default function Navbar() {
         <Button onClick={() => setOpen(true)} size="icon" variant="ghost">
                 <Lucide.Menu className="h-7 w-7" />
         </Button>
-        <ModeToggle />
         {/* Wrap the logo and text in a Link */}
         <Link href="/" className="flex items-center gap-2">
           <Lucide.Radius className="h-8 w-8 rotate-180" />

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;
 };