Skip to content

Implemented Light Mode #58

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

Implemented Light Mode #58

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
1ad35ae
Implemented Light Mode
asr1325 Oct 5, 2025
7909482
fix: remove extra semicolon
NotShrirang Oct 6, 2025
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
9 changes: 7 additions & 2 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
import { RouterProvider } from "react-router-dom";

import { ThemeProvider } from "./context/ThemeContext";
import "./style/theme.css";
import routes from "./routes";

function App() {
return <RouterProvider router={routes} />;
return (
<ThemeProvider>
<RouterProvider router={routes} />
</ThemeProvider>
);
}

export default App;
252 changes: 119 additions & 133 deletions src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,153 +104,139 @@ const Footer = () => {
];

return (
<>
<footer
className="font-google-code text-gray-300 border-t"
style={{
background:
"linear-gradient(135deg, rgb(15, 15, 35) 0%, rgb(20, 20, 48) 100%)",
borderTopColor: "rgba(160, 160, 255, 0.2)",
}}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-4">
{/* Main Footer Content */}
<div className="mb-8">
{/* brand section with social links */}
<div className="flex flex-col max-w-md mb-8 lg:mb-0 lg:float-left lg:w-2/5 lg:pr-8">
<h3
className="font-press-start flex items-center gap-2 text-2xl font-semibold mb-4"
style={{ color: "rgb(160, 160, 255)" }}
>
<FaCode
className="text-xl"
aria-hidden="true"
focusable={false}
/>
HackerBlog
</h3>
<p className="text-gray-400 leading-relaxed mb-6 text-[0.95rem]">
Where developers share stories, insights, and code - no cap! 🔥
</p>
<div className="flex gap-4">
{socialsArray.map((social, index) => (
<a
key={index}
href={social.link}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center w-10 h-10 rounded-lg text-xl transition-all duration-300 hover:-translate-y-0.5"
style={{
backgroundColor: "rgba(160, 160, 255, 0.1)",
color: "rgb(160, 160, 255)",
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor =
"rgb(160, 160, 255)";
e.currentTarget.style.color = "rgb(20, 20, 48)";
e.currentTarget.style.boxShadow =
"0 4px 12px rgba(160, 160, 255, 0.3)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor =
"rgba(160, 160, 255, 0.1)";
e.currentTarget.style.color = "rgb(160, 160, 255)";
e.currentTarget.style.boxShadow = "none";
}}
aria-label={social.title}
>
{social.icon}
</a>
))}
</div>
<footer
className="font-google-code border-t"
style={{
background: "var(--bg-gradient)",
color: "var(--text-color)",
borderTopColor: "rgba(160,160,255,0.2)",
}}
>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-4">
{/* Main Footer Content */}
<div className="mb-8 flex flex-col lg:flex-row lg:justify-between gap-8">
{/* brand section with social links */}
<div className="flex flex-col max-w-md lg:w-2/5 gap-4">
<h3
className="font-press-start flex items-center gap-2 text-2xl font-semibold"
style={{ color: "var(--brand-color)" }}
>
<FaCode className="text-xl" aria-hidden="true" focusable={false} />
HackerBlog
</h3>
<p className="text-sm leading-relaxed" style={{ color: "var(--text-color)" }}>
Where developers share stories, insights, and code - no cap! 🔥
</p>
<div className="flex gap-4">
{socialsArray.map((social, index) => (
<a
key={index}
href={social.link}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center w-10 h-10 rounded-lg text-xl transition-all duration-300 hover:-translate-y-0.5"
style={{
backgroundColor: "var(--card-bg-light)",
Copy link

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CSS custom properties '--card-bg-light' and '--text-muted' are used but not defined in the theme.css file. These will result in no styling being applied.

Copilot uses AI. Check for mistakes.

color: "var(--brand-color)",
}}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = "var(--brand-color)";
e.currentTarget.style.color = "var(--bg-color)";
e.currentTarget.style.boxShadow = "0 4px 12px rgba(160,160,255,0.3)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = "var(--card-bg-light)";
Copy link

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CSS custom properties '--card-bg-light' and '--text-muted' are used but not defined in the theme.css file. These will result in no styling being applied.

Copilot uses AI. Check for mistakes.

e.currentTarget.style.color = "var(--brand-color)";
e.currentTarget.style.boxShadow = "none";
}}
aria-label={social.title}
>
{social.icon}
</a>
))}
</div>
</div>

{/* links section */}
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-4 gap-8 lg:w-3/5 lg:float-right">
{footerArray.map((array, index) => (
<div key={index} className="flex flex-col">
<h4 className="text-base font-semibold text-gray-50 mb-4">
{array.title}
</h4>
<div className="flex flex-col gap-2">
{array.links.map((subArr, subIndex) => {
if (!subArr.link) {
return (
<span
key={subIndex}
className="text-gray-500 text-sm py-1 cursor-not-allowed"
>
{subArr.title}
</span>
);
}

if (subArr.isInternal) {
return (
<Link
key={subIndex}
to={subArr.link}
className="text-gray-400 text-sm transition-colors duration-300 py-1 hover:text-[rgb(160,160,255)]"
>
{subArr.title}
</Link>
);
}
{/* links section */}
<div className="grid grid-cols-2 md:grid-cols-4 lg:w-3/5 gap-8">
{footerArray.map((array, index) => (
<div key={index} className="flex flex-col gap-2">
<h4 className="text-base font-semibold mb-4" style={{ color: "var(--text-color)" }}>
{array.title}
</h4>
<div className="flex flex-col gap-2">
{array.links.map((subArr, subIndex) => {
if (!subArr.link) {
return (
<span
key={subIndex}
className="text-sm cursor-not-allowed"
style={{ color: "var(--text-muted)" }}
Copy link

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CSS custom properties '--card-bg-light' and '--text-muted' are used but not defined in the theme.css file. These will result in no styling being applied.

Copilot uses AI. Check for mistakes.

>
{subArr.title}
</span>
);
}

if (subArr.isInternal) {
return (
<a
<Link
key={subIndex}
href={subArr.link}
target="_blank"
rel="noopener noreferrer"
className="text-gray-400 text-sm transition-colors duration-300 py-1 hover:text-[rgb(160,160,255)]"
to={subArr.link}
className="text-sm transition-colors duration-300 hover:text-[var(--brand-color)]"
>
{subArr.title}
</a>
</Link>
);
})}
</div>
}

return (
<a
key={subIndex}
href={subArr.link}
target="_blank"
rel="noopener noreferrer"
className="text-sm transition-colors duration-300 hover:text-[var(--brand-color)]"
>
{subArr.title}
</a>
);
})}
</div>
))}
</div>
<div className="clear-both"></div>
</div>
))}
</div>
</div>

{/* bottom text */}
<div
className="pt-6 border-t"
style={{ borderTopColor: "rgba(160, 160, 255, 0.1)" }}
>
<div className="flex flex-col sm:flex-row justify-between items-center gap-4 flex-wrap">
<p className="text-gray-400 text-sm flex items-center gap-1 flex-wrap justify-center">
© 2025 HackerBlog. Made with{" "}
<FaHeart
className="inline-block mx-2 text-red-500 text-xs"
aria-hidden="true"
focusable={false}
/>{" "}
by the developer community.
</p>
<div className="flex gap-3 flex-wrap justify-center">
{tagArray.map((item) => (
<span
key={item.title}
className="flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium"
style={{
backgroundColor: "rgba(160, 160, 255, 0.1)",
color: "rgb(160, 160, 255)",
}}
>
{item.icon}
{item.title}
</span>
))}
</div>
{/* bottom text */}
<div
className="pt-6 border-t"
style={{ borderTopColor: "rgba(160,160,255,0.1)" }}
>
<div className="flex flex-col sm:flex-row justify-between items-center gap-4 flex-wrap">
<p className="text-sm flex items-center gap-1 flex-wrap justify-center">
© 2025 HackerBlog. Made with{" "}
<FaHeart className="inline-block mx-2 text-red-500 text-xs" /> by the developer community.
</p>
<div className="flex gap-3 flex-wrap justify-center">
{tagArray.map((item) => (
<span
key={item.title}
className="flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium"
style={{
backgroundColor: "var(--card-bg-light)",
Copy link

Copilot AI Oct 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The CSS custom properties '--card-bg-light' and '--text-muted' are used but not defined in the theme.css file. These will result in no styling being applied.

Copilot uses AI. Check for mistakes.

color: "var(--brand-color)",
}}
>
{item.icon}
{item.title}
</span>
))}
</div>
</div>
</div>
</footer>
</>
</div>
</footer>
);
};

Expand Down
48 changes: 31 additions & 17 deletions src/components/TopBar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.topbar {
background: linear-gradient(135deg, rgb(28, 28, 64) 0%, rgb(36, 36, 80) 100%);
color: white;
background: var(--bg-gradient);
color: var(--text-color);
padding: 0 1rem;
box-shadow: 0 4px 12px rgba(28, 28, 64, 0.3);
position: sticky;
Expand Down Expand Up @@ -31,13 +31,13 @@
margin: 0;
font-size: 1.5rem;
font-weight: 600;
color: rgb(160, 160, 255);
color: var(--brand-color);
transition: color 0.3s ease;
letter-spacing: -0.02em;
}

.brand-title:hover {
color: rgb(140, 140, 235);
color: var(--brand-hover-color);
}

.topbar-nav {
Expand All @@ -53,7 +53,7 @@
}

.user-welcome {
color: #e0e0e0;
color: var(--text-color);
font-size: 0.9rem;
}

Expand All @@ -77,37 +77,51 @@

.login-button {
background-color: transparent;
color: rgb(160, 160, 255);
border: 1px solid rgb(160, 160, 255);
color: var(--brand-color);
border: 1px solid var(--brand-color);
}

.login-button:hover {
background-color: rgb(160, 160, 255);
color: rgb(28, 28, 64);
background-color: var(--brand-color);
color: var(--bg-color);
}

.register-button {
background-color: rgb(160, 160, 255);
color: rgb(28, 28, 64);
background-color: var(--brand-color);
color: var(--bg-color);
}

.register-button:hover {
background-color: rgb(140, 140, 235);
background-color: var(--brand-hover-color);
transform: translateY(-1px);
}

.logout-button {
background-color: #ff6b6b;
color: white;
border: 1px solid #ff6b6b;
background-color: var(--danger-color);
color: var(--bg-color);
border: 1px solid var(--danger-color);
}

.logout-button:hover {
background-color: #ff5252;
background-color: var(--danger-hover-color);
transform: translateY(-1px);
}

/* Responsive design */
.theme-toggle {
margin-left: 1rem;
background: transparent;
border: 1px solid var(--text-color);
color: var(--text-color);
cursor: pointer;
padding: 6px 12px;
border-radius: 6px;
}

.theme-toggle:hover {
background: var(--text-color);
color: var(--card-bg);
}

@media (max-width: 768px) {
.topbar-container {
padding: 0 0.5rem;
Expand Down
Loading