Skip to content

Commit fef0530

Browse files
ArunkooArunkoo
committed
dark mode integrated and fix in dashboard ui but need to fix later
1 parent 6672a3a commit fef0530

5 files changed

Lines changed: 295 additions & 257 deletions

File tree

‎Client/src/Theme/index.css‎

Lines changed: 61 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,68 @@
11
@import "tailwindcss";
2-
3-
/* * NOTE on @custom-variant and tw-animate-css:
4-
* Tailwind CSS v4 focuses on a standard CSS workflow.
5-
* If 'tw-animate-css' and '@custom-variant' are needed,
6-
* you must ensure they are supported by your specific PostCSS setup.
7-
* For standard v4, you'd usually define the dark mode class in your config.
8-
* * Assuming 'tw-animate-css' is a necessary plugin/import:
9-
*/
102
@import "tw-animate-css";
113

12-
/* * V4 Recommendation: Define the dark variant directly in your tailwind.config.js
13-
* if possible (e.g., darkMode: ['class', '.dark']).
14-
* If you must define a custom variant here, the syntax is correct for PostCSS/Tailwind:
15-
*/
164
@custom-variant dark {
175
:is(.dark &) ;
186
}
197

208
@layer base {
21-
/* Global reset for border color. */
229
* {
2310
border-color: hsl(var(--border));
24-
/* Improved focus state for accessibility */
2511
&:focus-visible {
2612
outline-color: hsl(var(--ring));
2713
outline: 2px solid;
2814
outline-offset: 2px;
2915
}
3016
}
3117

32-
/* Correct placement of body selector, sibling to * */
3318
body {
3419
background-color: hsl(var(--background));
3520
color: hsl(var(--foreground));
3621
}
3722

38-
/* ---------------------- ☀️ Light Theme (:root) ---------------------- */
23+
/* LIGHT – soft neutral SaaS */
3924
:root {
40-
/* Base Colors */
41-
--background: 0 0% 100%;
42-
--foreground: 222.2 84% 4.9%;
25+
--background: 220 23% 98%;
26+
--foreground: 222 47% 10%;
27+
4328
--card: 0 0% 100%;
44-
--card-foreground: 222.2 84% 4.9%;
29+
--card-foreground: 222 47% 10%;
30+
4531
--popover: 0 0% 100%;
46-
--popover-foreground: 222.2 84% 4.9%;
32+
--popover-foreground: 222 47% 10%;
4733

48-
/* Primary / Secondary / Functional */
49-
--primary: 221.2 83.2% 53.3%;
34+
--primary: 221 78% 55%;
5035
--primary-foreground: 210 40% 98%;
51-
--secondary: 210 40% 96.1%;
52-
--secondary-foreground: 222.2 47.4% 11.2%;
53-
--muted: 210 40% 96.1%;
54-
--muted-foreground: 215.4 16.3% 46.9%;
55-
--accent: 210 40% 96.1%;
56-
--accent-foreground: 222.2 47.4% 11.2%;
57-
--destructive: 0 84.2% 60.2%;
36+
37+
--secondary: 210 40% 97%;
38+
--secondary-foreground: 222 40% 20%;
39+
40+
--muted: 210 25% 96%;
41+
--muted-foreground: 215 15% 45%;
42+
43+
--accent: 210 40% 96%;
44+
--accent-foreground: 222 47% 12%;
45+
46+
--destructive: 352 84% 62%;
5847
--destructive-foreground: 210 40% 98%;
5948

60-
/* Borders & Interaction */
61-
--border: 214.3 31.8% 91.4%;
62-
--input: 214.3 31.8% 91.4%;
63-
--ring: 221.2 83.2% 53.3%;
49+
--border: 210 24% 90%;
50+
--input: 210 24% 90%;
51+
--ring: 221 78% 55%;
6452

65-
/* Radius */
66-
--radius: 0.5rem;
53+
--radius: 0.75rem;
6754
--radius-sm: calc(var(--radius) - 4px);
6855
--radius-md: calc(var(--radius) - 2px);
6956
--radius-lg: var(--radius);
70-
--radius-xl: calc(var(--radius) + 4px);
57+
--radius-xl: calc(var(--radius) + 6px);
7158

72-
/* Chart Colors */
73-
--chart-1: 12 76% 61%;
74-
--chart-2: 173 58% 39%;
75-
--chart-3: 197 37% 24%;
76-
--chart-4: 43 74% 66%;
77-
--chart-5: 27 87% 67%;
59+
--chart-1: 222 84% 56%;
60+
--chart-2: 160 72% 45%;
61+
--chart-3: 28 85% 57%;
62+
--chart-4: 280 70% 60%;
63+
--chart-5: 340 82% 62%;
7864

79-
/* Sidebar Variables (Simplified to reference existing colors) */
80-
--sidebar: var(--background);
65+
--sidebar: var(--card);
8166
--sidebar-foreground: var(--foreground);
8267
--sidebar-primary: var(--primary);
8368
--sidebar-primary-foreground: var(--primary-foreground);
@@ -87,40 +72,40 @@
8772
--sidebar-ring: var(--ring);
8873
}
8974

90-
/* ---------------------- 🌙 Dark Theme (.dark) ---------------------- */
75+
/* DARK – warm navy, softened whites */
9176
.dark {
92-
/* Base Colors */
93-
--background: 222.2 84% 4.9%;
94-
--foreground: 210 40% 98%;
95-
--card: 222.2 84% 4.9%;
96-
--card-foreground: 210 40% 98%;
97-
--popover: 222.2 84% 4.9%;
98-
--popover-foreground: 210 40% 98%;
99-
100-
/* Primary / Secondary / Functional */
101-
--primary: 217.2 91.2% 59.8%;
102-
--primary-foreground: 222.2 47.4% 11.2%;
103-
--secondary: 217.2 32.6% 17.5%;
104-
--secondary-foreground: 210 40% 98%;
105-
--muted: 217.2 32.6% 17.5%;
106-
--muted-foreground: 215 20.2% 65.1%;
107-
--accent: 217.2 32.6% 17.5%;
108-
--accent-foreground: 210 40% 98%;
109-
--destructive: 0 62.8% 30.6%;
110-
--destructive-foreground: 210 40% 98%;
77+
--background: 222 28% 10%;
78+
--foreground: 210 25% 92%;
79+
80+
--card: 222 24% 14%;
81+
--card-foreground: 210 25% 92%;
82+
83+
--popover: 222 24% 14%;
84+
--popover-foreground: 210 25% 92%;
85+
86+
--primary: 222 70% 60%;
87+
--primary-foreground: 222 40% 12%;
88+
89+
--secondary: 222 22% 18%;
90+
--secondary-foreground: 210 25% 92%;
91+
92+
--muted: 222 20% 20%;
93+
--muted-foreground: 215 18% 70%;
94+
95+
--accent: 222 22% 22%;
96+
--accent-foreground: 210 25% 92%;
11197

112-
/* Borders & Interaction */
113-
--border: 217.2 32.6% 17.5%;
114-
--input: 217.2 32.6% 17.5%;
115-
--ring: 224.3 76.3% 48%;
98+
--destructive: 352 70% 52%;
99+
--destructive-foreground: 0 0% 98%;
116100

117-
/* Chart Colors */
118-
--chart-1: 220 70% 50%;
119-
--chart-2: 160 60% 45%;
120-
--chart-3: 30 80% 55%;
121-
--chart-4: 280 65% 60%;
122-
--chart-5: 340 75% 55%;
101+
--border: 222 18% 26%;
102+
--input: 222 18% 26%;
103+
--ring: 222 70% 60%;
123104

124-
/* Sidebar variables will inherit from the dark base colors defined here. */
105+
--chart-1: 222 70% 60%;
106+
--chart-2: 160 65% 50%;
107+
--chart-3: 30 80% 58%;
108+
--chart-4: 280 70% 62%;
109+
--chart-5: 340 75% 60%;
125110
}
126111
}

‎Client/src/components/Layout/AppLayout.tsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,29 @@ const AppLayout = () => {
1515

1616
if (isCheckingAuth) {
1717
return (
18-
<div className="p-[50px] text-center">
19-
<h2>Loading...</h2>
20-
<p>Verifying your session status.</p>
18+
<div className="min-h-screen flex flex-col items-center justify-center text-center bg-background text-foreground">
19+
<h2 className="text-lg font-semibold">Loading...</h2>
20+
<p className="text-sm text-muted-foreground mt-1">
21+
Verifying your session status.
22+
</p>
2123
</div>
2224
);
2325
}
2426

2527
return (
26-
<div className="flex flex-col h-screen text-foreground lg:ml-36 md:ml-[60px] lg:mr-36 ml-5 md:mr-[60px] mr-5 mt-6">
27-
<Navbar />
28-
29-
<div className="flex flex-1 w-full">
30-
<SideBar />
31-
<main className="w-full md:w-[75%]">
32-
<Outlet />
33-
</main>
28+
<div className="min-h-screen bg-background text-foreground">
29+
<div className="mx-3 sm:mx-4 lg:mx-20 xl:mx-28 py-3 lg:py-5 flex flex-col gap-3 sm:gap-4">
30+
<Navbar />
31+
<div className="flex gap-3 sm:gap-4 items-stretch">
32+
<SideBar />
33+
<main className="flex-1 min-w-0">
34+
<div className="rounded-3xl bg-card border border-border shadow-sm">
35+
<div className="px-3 sm:px-5 lg:px-8 py-4 sm:py-6">
36+
<Outlet />
37+
</div>
38+
</div>
39+
</main>
40+
</div>
3441
</div>
3542
</div>
3643
);

‎Client/src/components/Layout/Navbar.tsx‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,48 @@
1+
import { useEffect, useState } from "react";
12
import { navLogo } from "../../assets/images";
2-
import { Moon, Bell } from "lucide-react";
3+
import { Moon, Sun, Bell } from "lucide-react";
34
import { Avatar, AvatarImage, AvatarFallback } from "../ui/avatar";
45

56
const Navbar = () => {
7+
const [isDark, setIsDark] = useState(false);
8+
9+
useEffect(() => {
10+
const root = document.documentElement;
11+
if (isDark) root.classList.add("dark");
12+
else root.classList.remove("dark");
13+
}, [isDark]);
14+
615
return (
7-
<nav className="w-full h-16 md:h-[77px] bg-white/40 border-b flex items-center justify-between px-4 py-2 rounded-2xl">
8-
{/* Logo Section */}
16+
<nav className="w-full h-16 md:h-[72px] bg-card border border-border rounded-2xl shadow-sm flex items-center justify-between px-4 sm:px-5">
917
<div className="flex items-center gap-2">
1018
<img
1119
src={navLogo.logo1}
1220
alt="BrainVector Logo"
1321
className="h-7 md:h-9 object-contain"
1422
/>
15-
<h1 className="flex items-end gap-1 text-xl md:text-2xl font-semibold">
23+
<h1 className="flex items-end gap-1 text-xl md:text-2xl font-semibold text-foreground">
1624
<span>Brain</span>
1725
<span className="italic font-normal">Vector</span>
1826
</h1>
1927
</div>
2028

21-
{/* Right Section */}
2229
<div className="flex items-center gap-3">
23-
{/* Responsive Icon Sizes */}
24-
<Moon
25-
size={20}
26-
className="md:size-5 cursor-pointer transition hover:opacity-70"
27-
/>
28-
<Bell
29-
size={20}
30-
className="md:size-5 cursor-pointer transition hover:opacity-70"
31-
/>
30+
<button
31+
type="button"
32+
onClick={() => setIsDark((v) => !v)}
33+
className="flex h-8 w-8 items-center justify-center rounded-full border border-border bg-background hover:bg-muted transition"
34+
aria-label="Toggle dark mode"
35+
>
36+
{isDark ? (
37+
<Sun className="h-4 w-4 text-amber-300" />
38+
) : (
39+
<Moon className="h-4 w-4 text-slate-700" />
40+
)}
41+
</button>
42+
43+
<Bell className="h-5 w-5 cursor-pointer text-muted-foreground hover:text-foreground transition" />
3244

33-
{/* Avatar */}
34-
<Avatar className="ml-2 cursor-pointer">
45+
<Avatar className="ml-1 h-8 w-8 cursor-pointer">
3546
<AvatarImage src="https://github.com/shadcn.png" alt="User Avatar" />
3647
<AvatarFallback>CN</AvatarFallback>
3748
</Avatar>

0 commit comments

Comments
 (0)