Skip to content

Add Toggle Button for UI Theme Switching (Light/Dark Mode) #88

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
PraneethUday wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Add Toggle Button for UI Theme Switching (Light/Dark Mode) #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b38a2f3
Update globals.css
PraneethUday Jan 5, 2026
ed91926
Refactor UI components for dark mode support and improve styling cons…
PraneethUday Jan 5, 2026
15b4be7
style: enhance UI components with consistent styling and improved inp…
PraneethUday Jan 5, 2026
134666b
chore: prepare ChooseGpOrNotGp component for future enhancements
PraneethUday Jan 5, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions app/_components/ThemeProvider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
"use client";

import { createContext, useContext, useEffect, useState } from "react";

const ThemeContext = createContext(undefined);

export function ThemeProvider({ children }) {
const [theme, setTheme] = useState("dark");
const [mounted, setMounted] = useState(false);

useEffect(() => {
// Get theme from localStorage or default to dark
const savedTheme = localStorage.getItem("theme") || "dark";
setTheme(savedTheme);
document.documentElement.setAttribute("data-theme", savedTheme);
setMounted(true);
}, []);

const toggleTheme = () => {
const newTheme = theme === "dark" ? "light" : "dark";
setTheme(newTheme);
localStorage.setItem("theme", newTheme);
document.documentElement.setAttribute("data-theme", newTheme);
};

return (
<ThemeContext.Provider value={{ theme, toggleTheme, mounted }}>
{children}
</ThemeContext.Provider>
);
}

export function useTheme() {
const context = useContext(ThemeContext);
if (context === undefined) {
throw new Error("useTheme must be used within ThemeProvider");
}
return context;
}
33 changes: 33 additions & 0 deletions app/_components/ThemeToggle.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
"use client";

import { Moon, Sun } from "lucide-react";
import { useTheme } from "./ThemeProvider";
import { useEffect, useState } from "react";

export default function ThemeToggle() {
const [mounted, setMounted] = useState(false);
const { theme, toggleTheme } = useTheme();

useEffect(() => {
setMounted(true);
}, []);

if (!mounted) {
return null;
}

return (
<button
onClick={toggleTheme}
className="fixed top-4 left-4 z-50 rounded-full p-2 bg-foreground/10 hover:bg-foreground/20 transition-colors duration-200 flex items-center justify-center"
aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
title={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
>
{theme === "dark" ? (
<Sun size={24} className="text-yellow-400" />
) : (
<Moon size={24} className="text-gray-700" />
)}
</button>
);
}
10 changes: 5 additions & 5 deletions app/_components/TheoryTooltip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,22 +17,22 @@ export default function TheoryTooltip({ id }) {
onMouseEnter={() => setIsVisible(true)}
onMouseLeave={() => setIsVisible(false)}
onClick={() => setIsVisible(!isVisible)}
className="text-gray-600 hover:text-blue-600 transition-colors duration-200 focus:outline-none flex items-center"
className="text-gray-400 hover:text-blue-400 transition-colors duration-200 focus:outline-none flex items-center"
aria-label="Theoretical Information"
>
<Info size={18} />
</button>

{isVisible && (
<div className="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-3 w-72 p-4 rounded-2xl bg-white/90 backdrop-blur-xl border border-white/20 shadow-[0_8px_32px_0_rgba(31,38,135,0.15)] transition-all duration-200 ease-out transform opacity-100 scale-100">
<div className="absolute z-50 bottom-full left-1/2 -translate-x-1/2 mb-3 w-72 p-4 rounded-2xl bg-gray-800 backdrop-blur-xl border border-gray-600 shadow-[0_8px_32px_0_rgba(31,38,135,0.15)] transition-all duration-200 ease-out transform opacity-100 scale-100 text-foreground">
<div className="relative">
<h5 className="font-bold text-gray-900 text-sm mb-1 uppercase tracking-wider">
<h5 className="font-bold text-foreground text-sm mb-1 uppercase tracking-wider">
{data.title}
</h5>
<p className="text-gray-600 text-xs leading-relaxed">
<p className="text-gray-300 text-xs leading-relaxed">
{data.explanation}
</p>
<div className="absolute -bottom-6 left-1/2 -translate-x-1/2 border-8 border-transparent border-t-white/90" />
<div className="absolute -bottom-6 left-1/2 -translate-x-1/2 border-8 border-transparent border-t-gray-800" />
</div>
</div>
)}
Expand Down
16 changes: 8 additions & 8 deletions app/auth/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@ export default function Auth() {
};

return (
<div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-gray-100">
<div className="flex items-center justify-center overflow-hidden h-32">
<div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-background">
<div className="flex items-center justify-center overflow-hidden h-32 bg-white rounded-lg p-4">
<Image
src="/LOGO.png"
alt="EVOLVE OnClick logo"
Expand All @@ -87,13 +87,13 @@ export default function Auth() {
<main className="flex flex-col items-center justify-center flex-grow w-fit min-w-[32%]">
<form
onSubmit={handleLogin}
className="flex flex-col gap-1 p-4 w-full bg-white shadow-sm border border-dashed border-gray-200 rounded-3xl"
className="flex flex-col gap-1 p-4 w-full form-container shadow-sm border border-dashed rounded-3xl"
>
<div className="mb-4">
<h2 className="text-xl font-semibold text-center">
<h2 className="text-xl font-semibold text-center text-foreground">
Sign In To EvOC
</h2>
<p className="text-xs text-gray-500 text-center">
<p className="text-xs text-foreground text-center opacity-60">
Sign in to your account to continue.
</p>
</div>
Expand All @@ -103,7 +103,7 @@ export default function Auth() {
placeholder="Email/Username"
value={email}
onChange={(e) => setEmail(e.target.value)}
className="w-full p-2 mt-4 border rounded-xl"
className="w-full p-2 mt-4 border rounded-xl input-field"
required
disabled={isLoading}
/>
Expand All @@ -113,7 +113,7 @@ export default function Auth() {
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full p-2 mb-3 border rounded-xl"
className="w-full p-2 mb-3 border rounded-xl input-field"
required
disabled={isLoading}
/>
Expand All @@ -139,7 +139,7 @@ export default function Auth() {

<button
type="submit"
className={`rounded-full transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 text-sm sm:text-base p-2 w-full border border-black gap-2 mt-4 ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
className={`rounded-full transition-colors flex items-center justify-center bg-yellow-500 text-black hover:bg-yellow-600 text-sm sm:text-base p-2 w-full border border-yellow-600 gap-2 mt-4 ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
disabled={isLoading}
>
{isLoading ? "Loading..." : "Sign In ->"}
Expand Down
16 changes: 8 additions & 8 deletions app/auth/recover/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ export default function Recover() {
};

return (
<div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-gray-100">
<div className="flex items-center justify-center overflow-hidden h-32">
<div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-background">
<div className="flex items-center justify-center overflow-hidden h-32 bg-white rounded-lg p-4">
<Image
src="/LOGO.png"
alt="EVOLVE OnClick logo"
Expand All @@ -80,13 +80,13 @@ export default function Recover() {
<div className="flex flex-col items-center justify-center flex-grow w-fit min-w-[32%]">
<form
onSubmit={handleSubmit}
className="flex flex-col gap-1 p-4 w-full bg-white shadow-sm border border-dashed border-gray-200 rounded-3xl"
className="flex flex-col gap-1 p-4 w-full form-container shadow-sm border border-dashed rounded-3xl"
>
<div className="mb-4">
<h2 className="text-xl font-semibold text-center">
<h2 className="text-xl font-semibold text-center text-foreground">
Recover Your Password
</h2>
<p className="text-xs text-gray-500 text-center">
<p className="text-xs text-foreground text-center opacity-60">
Enter your email to get started.
</p>
</div>
Expand All @@ -96,13 +96,13 @@ export default function Recover() {
placeholder="Email"
value={formData.email}
onChange={handleChange}
className="w-full p-2 mt-4 border rounded-xl"
className="w-full p-2 mt-4 border rounded-xl input-field"
required
disabled={isLoading}
/>
<button
type="submit"
className={`rounded-full transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 text-sm sm:text-base p-2 w-full border border-black gap-2 mt-4 ${
className={`rounded-full transition-colors flex items-center justify-center bg-yellow-500 text-black hover:bg-yellow-600 text-sm sm:text-base p-2 w-full border border-yellow-600 gap-2 mt-4 ${
isLoading ? "opacity-50 cursor-not-allowed" : ""
}`}
disabled={isLoading}
Expand All @@ -111,7 +111,7 @@ export default function Recover() {
</button>
</form>
<div className="flex flex-wrap gap-4 justify-center mt-8">
<p className="text-gray-500 text-center">
<p className="text-gray-400 text-center">
Create a new account
</p>
<Link
Expand Down
22 changes: 11 additions & 11 deletions app/auth/recover/verify/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,8 +83,8 @@ export default function VerifyOTP() {
};

return (
<div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-gray-100">
<div className="flex items-center justify-center overflow-hidden h-32">
<div className="flex flex-col items-center min-h-screen font-[family-name:var(--font-geist-mono)] p-8 bg-background">
<div className="flex items-center justify-center overflow-hidden h-32 bg-white rounded-lg p-4">
<Image
src="/LOGO.png"
alt="EVOLVE OnClick logo"
Expand All @@ -95,22 +95,22 @@ export default function VerifyOTP() {
<div className="flex flex-col flex-grow min-w-[32%] w-full md:max-w-[80%] lg:max-w-[60%] xl:max-w-[40%] mx-auto justify-center items-center align-middle">
<form
onSubmit={handleSubmit}
className="flex flex-col gap-1 p-4 w-full bg-white shadow-sm border border-dashed border-gray-200 rounded-3xl"
className="flex flex-col gap-1 p-4 w-full form-container shadow-sm border border-dashed rounded-3xl"
>
<div className="mb-4">
<h2 className="text-xl font-semibold text-center">
<h2 className="text-xl font-semibold text-center text-foreground">
Verify OTP
</h2>
<p className="text-xs text-gray-500 text-center break-words px-2">
<p className="text-xs text-foreground text-center break-words px-2 opacity-60">
{`Please enter the OTP sent to ${email ?? "your email"}.`}
</p>
<p className="text-xs text-gray-500 text-center break-words px-2 mt-2 mx-auto justify-center items-center align-middle">
<p className="text-xs text-foreground text-center break-words px-2 mt-2 mx-auto justify-center items-center align-middle opacity-60">
OTP will be sent only if the email is registered. If
you did not receive an OTP, please check the email
ID you typed again and{" "}
<Link
href="/auth/recover"
className="text-blue-600 hover:text-blue-800 underline cursor-pointer"
className="text-blue-400 hover:text-blue-300 underline cursor-pointer"
>
retry
</Link>
Expand All @@ -123,7 +123,7 @@ export default function VerifyOTP() {
placeholder="Enter OTP"
value={formData.otp}
onChange={handleChange}
className="w-full p-2 mt-4 border rounded-xl"
className="w-full p-2 mt-4 border rounded-xl input-field"
required
pattern="\d*"
maxLength={6}
Expand All @@ -137,7 +137,7 @@ export default function VerifyOTP() {
placeholder="Enter new password"
value={formData.newPassword}
onChange={handleChange}
className="w-full p-2 mt-4 border rounded-xl"
className="w-full p-2 mt-4 border rounded-xl input-field"
required
disabled={isLoading}
/>
Expand All @@ -147,13 +147,13 @@ export default function VerifyOTP() {
placeholder="Confirm new password"
value={formData.confirmPassword}
onChange={handleChange}
className="w-full p-2 mt-4 border rounded-xl"
className="w-full p-2 mt-4 border rounded-xl input-field"
required
disabled={isLoading}
/>
<button
type="submit"
className={`rounded-full transition-colors flex items-center justify-center bg-yellow-400 text-black hover:bg-yellow-50 text-sm sm:text-base p-2 w-full border border-black gap-2 mt-4 ${
className={`rounded-full transition-colors flex items-center justify-center bg-yellow-500 text-black hover:bg-yellow-600 text-sm sm:text-base p-2 w-full border border-yellow-600 gap-2 mt-4 ${
isLoading ? "opacity-50 cursor-not-allowed" : ""
}`}
disabled={isLoading}
Expand Down
Loading