Skip to content

YAS-260: add working dark mode button #243

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
patkaryash wants to merge 2 commits into
base: main
Choose a base branch
from
Open

YAS-260: add working dark mode button #243

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0ae79c5
YAS-259: add working dark mode button
Jul 8, 2026
09396ea
YAS-260: fix eslint no-unused-vars for destructured component params
Jul 8, 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
2 changes: 1 addition & 1 deletion frontend/eslint.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ export default defineConfig([
},
},
rules: {
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]', argsIgnorePattern: '^[A-Z_]' }],
},
},
])
6 changes: 4 additions & 2 deletions frontend/src/components/AppLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,10 @@ const AppLayout = ({ children }) => {
<Sidebar />

{/* Main content on the right, shifts when sidebar expands */}
<main className="transition-all duration-300 ease-out ml-16 peer-hover:ml-64 pt-14">
<div className="p-4 sm:p-6 md:p-8">
<main className={`transition-all duration-300 ease-out ml-16 peer-hover:ml-64 pt-14 ${
mode === 'dark' ? 'bg-[#121212]' : 'bg-gray-50'
}`}>
<div className="p-4 sm:p-6 md:p-8 min-h-[calc(100vh-56px)]">
{children}
</div>
</main>
Expand Down
62 changes: 54 additions & 8 deletions frontend/src/components/HeaderBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,48 @@
import React from 'react';
import { NavLink } from 'react-router-dom';
import { Settings, User } from 'lucide-react';
import { Settings, User, Sun, Moon } from 'lucide-react';
import { useAuth } from '../contexts/AuthContext';
import { useColorMode } from '../contexts/ThemeContext';
import logo from '../assets/logo.png';

const HeaderBar = () => {
const { isAuthenticated, user } = useAuth();
const { mode, toggleMode } = useColorMode();
const isDark = mode === 'dark';

return (
<header className="fixed top-0 left-0 right-0 z-50 h-14 bg-[#1e1e1e] border-b border-white/10">
<header
className={`fixed top-0 left-0 right-0 z-50 h-14 border-b transition-colors duration-200 ${
isDark
? 'bg-[#1e1e1e] border-white/10'
: 'bg-white border-gray-200 shadow-sm'
}`}
>
<div className="mx-auto h-full px-4 sm:px-6 flex items-center justify-between">
<div className="flex items-center gap-3 min-w-0">
<img src={logo} alt="YBIT" className="h-9 w-9 rounded-sm object-contain" />
<h1 className="text-sm sm:text-base md:text-lg font-semibold text-white truncate">
<h1
className={`text-sm sm:text-base md:text-lg font-semibold truncate transition-colors duration-200 ${
isDark ? 'text-white' : 'text-gray-900'
}`}
>
Yashwantrao Bhonsale Institute Of Technology
</h1>
</div>

{/* Right nav: Dashboard + Settings + Account/Login (large screens) */}
{/* Right nav: Dashboard + Settings + Theme toggle + Account/Login (large screens) */}
<nav className="hidden lg:block">
<ul className="flex items-center gap-2 text-sm">
<li>
<NavLink
to="/"
className={({ isActive }) =>
`px-3 py-1.5 rounded-md transition-colors ${
isActive ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-white/10 hover:text-white'
isActive
? 'bg-green-600 text-white'
: isDark
? 'text-gray-300 hover:bg-white/10 hover:text-white'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
}`
}
>
Expand All @@ -36,21 +54,45 @@ const HeaderBar = () => {
to="/settings"
className={({ isActive }) =>
`flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ${
isActive ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-white/10 hover:text-white'
isActive
? 'bg-green-600 text-white'
: isDark
? 'text-gray-300 hover:bg-white/10 hover:text-white'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
}`
}
>
<Settings size={16} />
<span>Settings</span>
</NavLink>
</li>
<li>
<button
type="button"
onClick={toggleMode}
className={`flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ${
isDark
? 'text-gray-300 hover:bg-white/10 hover:text-white'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
}`}
aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
title={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
>
{isDark ? <Sun size={16} /> : <Moon size={16} />}
<span>{isDark ? 'Light Mode' : 'Dark Mode'}</span>
</button>
</li>
{isAuthenticated ? (
<li>
<NavLink
to="/account"
className={({ isActive }) =>
`flex items-center gap-2 px-3 py-1.5 rounded-md transition-colors ${
isActive ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-white/10 hover:text-white'
isActive
? 'bg-green-600 text-white'
: isDark
? 'text-gray-300 hover:bg-white/10 hover:text-white'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
}`
}
title={user?.username || 'Account'}
Expand All @@ -65,7 +107,11 @@ const HeaderBar = () => {
to="/login"
className={({ isActive }) =>
`px-3 py-1.5 rounded-md transition-colors ${
isActive ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-white/10 hover:text-white'
isActive
? 'bg-green-600 text-white'
: isDark
? 'text-gray-300 hover:bg-white/10 hover:text-white'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
}`
}
>
Expand Down
18 changes: 13 additions & 5 deletions frontend/src/components/Sidebar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,9 @@ const Sidebar = () => {

return (
<aside
className="peer group fixed left-0 top-14 z-40 h-[calc(100vh-56px)] w-16 hover:w-64 bg-[#1e1e1e] text-gray-200 border-r border-white/10 transition-all duration-300 ease-out"
className={`peer group fixed left-0 top-14 z-40 h-[calc(100vh-56px)] w-16 hover:w-64 border-r border-white/10 transition-all duration-300 ease-out ${
mode === 'dark' ? 'bg-[#1e1e1e] text-gray-200' : 'bg-white text-gray-800 border-gray-200'
}`}
aria-label="Sidebar"
>
<div className="flex h-full flex-col">
Expand All @@ -37,7 +39,7 @@ const Sidebar = () => {
{/* Middle: Navigation */}
<nav className="mt-2 flex-1 overflow-y-auto">
<ul className="space-y-1 px-2">
{menuItems.map(({ name, icon: Icon, path }) => {
{menuItems.map(({ name, icon: IconComponent, path }) => {
const active = location.pathname === path || (path !== '/' && location.pathname.startsWith(path));
return (
<li key={name}>
Expand All @@ -46,10 +48,12 @@ const Sidebar = () => {
className={`flex items-center gap-3 rounded-md px-3 py-2 transition-colors duration-200 ${
active
? 'bg-green-600 text-white'
: 'text-gray-300 hover:bg-white/10 hover:text-white'
: mode === 'dark'
? 'text-gray-300 hover:bg-white/10 hover:text-white'
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
}`}
>
<Icon size={20} className="shrink-0" />
<IconComponent size={20} className="shrink-0" />
<span
className="opacity-0 translate-x-[-6px] group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 ease-out"
>
Expand All @@ -66,7 +70,11 @@ const Sidebar = () => {
<div className="mt-auto px-2 pb-3">
<button
onClick={toggleMode}
className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-gray-300 hover:bg-white/10 hover:text-white transition-colors duration-200"
className={`flex w-full items-center gap-3 rounded-md px-3 py-2 text-left transition-colors duration-200 ${
mode === 'dark'
? 'text-gray-300 hover:bg-white/10 hover:text-white'
: 'text-gray-700 hover:bg-gray-100 hover:text-gray-900'
}`}
title="Toggle theme"
>
{mode === 'dark' ? (
Expand Down