Skip to content

fix: Fix dark mode color #34

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

Merged
junaiddshaukat merged 1 commit into from
May 20, 2026
Merged

fix: Fix dark mode color #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
14 changes: 7 additions & 7 deletions app/dsoc/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,9 +261,9 @@ export default function DSOCPage() {
on real-world projects.
</p>
<p
className="text-lg sm:text-xl mt-3 font-bold text-[var(--dsoc-dark)]/90"
className="text-xl sm:text-2xl font-black text-[var(--dsoc-dark)]"
style={{
textShadow: '1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff'
textShadow: '1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 2px 2px 0 rgba(0,0,0,0.1)'
}}
>
Learn, build, and grow with the community. 🚀
Expand Down Expand Up @@ -335,31 +335,31 @@ export default function DSOCPage() {
<div className="text-4xl sm:text-5xl font-black text-[var(--dsoc-primary)]">
{stats?.projects.total || '20+'}
</div>
<div className="text-sm font-bold uppercase tracking-wider mt-2 text-[var(--dsoc-dark)] dark:text-white">
<div className="dsoc-stat-label text-sm font-bold uppercase tracking-wider mt-2">
Projects
</div>
</div>
<div className="dsoc-stat-card text-center">
<div className="text-4xl sm:text-5xl font-black text-[var(--dsoc-secondary)]">
{stats?.mentors || '15+'}
</div>
<div className="text-sm font-bold uppercase tracking-wider mt-2 text-[var(--dsoc-dark)] dark:text-white">
<div className="dsoc-stat-label text-sm font-bold uppercase tracking-wider mt-2">
Mentors
</div>
</div>
<div className="dsoc-stat-card text-center">
<div className="text-4xl sm:text-5xl font-black text-[var(--dsoc-purple)]">
{stats?.mentees || '50+'}
</div>
<div className="text-sm font-bold uppercase tracking-wider mt-2 text-[var(--dsoc-dark)] dark:text-white">
<div className="dsoc-stat-label text-sm font-bold uppercase tracking-wider mt-2">
Mentees
</div>
</div>
<div className="dsoc-stat-card text-center">
<div className="text-4xl sm:text-5xl font-black text-[var(--dsoc-success)]">
{stats?.technologies || '30+'}
</div>
<div className="text-sm font-bold uppercase tracking-wider mt-2 text-[var(--dsoc-dark)] dark:text-white">
<div className="dsoc-stat-label text-sm font-bold uppercase tracking-wider mt-2">
Technologies
</div>
</div>
Expand All @@ -372,7 +372,7 @@ export default function DSOCPage() {
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div>
<h2 className="dsoc-section-title text-4xl sm:text-5xl font-black mb-6 text-[var(--dsoc-dark)] dark:text-white">
<h2 className="dsoc-section-title dsoc-what-title text-4xl sm:text-5xl font-black mb-6 text-[var(--dsoc-dark)]">
WHAT IS DSOC?
</h2>
<div className="space-y-4 text-lg">
Expand Down
10 changes: 5 additions & 5 deletions app/dsoc/projects/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -637,7 +637,7 @@ export default function ProjectDetailPage({ params }: { params: Promise<{ id: st
{/* Right Column - Sidebar */}
<div className="space-y-6">
{/* Apply Card */}
<div className="neo-brutal-card p-6 sticky top-24">
<div className="neo-brutal-card p-6 sticky top-24 z-10">
<h2 className="text-xl font-black mb-4">Apply to This Project</h2>

<div className="space-y-4 mb-6">
Expand Down Expand Up @@ -711,8 +711,8 @@ export default function ProjectDetailPage({ params }: { params: Promise<{ id: st
</div>

{/* Discord Card */}
<div className="neo-brutal-card p-6 bg-[var(--dsoc-purple)]">
<div className="text-black">
<div className="neo-brutal-card p-6 dsoc-discord-card">
<div className="text-[var(--dsoc-dark)] dark:text-[var(--dsoc-light)]">
<MessageCircle className="w-8 h-8 mb-3" />
<h3 className="font-bold text-lg mb-2">Have Questions?</h3>
<p className="text-sm opacity-90 mb-4">
Expand All @@ -722,7 +722,7 @@ export default function ProjectDetailPage({ params }: { params: Promise<{ id: st
href="https://discord.com/invite/Cy7Rgkf4Up"
target="_blank"
rel="noopener noreferrer"
className="neo-brutal-btn bg-white text-[var(--dsoc-purple)] w-full"
className="neo-brutal-btn bg-white text-[var(--dsoc-purple)] w-full dsoc-discord-btn"
>
Join Discord
</a>
Expand All @@ -735,7 +735,7 @@ export default function ProjectDetailPage({ params }: { params: Promise<{ id: st
<h3 className="font-bold mb-3">Tags</h3>
<div className="flex flex-wrap gap-2">
{project.tags.map((tag, i) => (
<span key={i} className="neo-brutal-badge bg-gray-200 dark:bg-gray-700 text-xs">
<span key={i} className="neo-brutal-badge dsoc-tag-badge bg-[var(--dsoc-light)] text-[var(--dsoc-dark)] text-xs">
#{tag}
</span>
))}
Expand Down
4 changes: 2 additions & 2 deletions app/dsoc/projects/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -440,7 +440,7 @@ export default function ProjectsPage() {
</span>
))}
{project.technologies.length > 5 && (
<span className="neo-brutal-badge bg-gray-200 dark:bg-gray-700 text-xs">
<span className="neo-brutal-badge bg-[var(--dsoc-secondary)] text-white text-xs">
+{project.technologies.length - 5}
</span>
)}
Expand Down Expand Up @@ -526,7 +526,7 @@ export default function ProjectsPage() {
{/* CTA */}
<section className="py-16 bg-[var(--dsoc-light)] dark:bg-[var(--dsoc-dark)] border-t-4 border-[var(--dsoc-dark)] dark:border-[var(--dsoc-light)]">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl font-black mb-4">Don&apos;t see what you&apos;re looking for?</h2>
<h2 className="text-3xl font-black mb-4 text-black">Don&apos;t see what you&apos;re looking for?</h2>
<p className="text-muted-foreground mb-6 max-w-2xl mx-auto">
We&apos;re always adding new projects. Join our Discord to get notified when new projects are added,
or become a mentor and propose your own project!
Expand Down
46 changes: 46 additions & 0 deletions app/dsoc/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@
background: rgba(255, 248, 240, 0.95);
backdrop-filter: blur(10px);
border-bottom: 3px solid var(--dsoc-dark);
z-index: 60;
}

.dsoc-nav-link {
Expand Down Expand Up @@ -209,6 +210,38 @@
color: white;
}

/* DSOC Discord Card */
.dsoc-discord-card {
background: var(--dsoc-light);
color: var(--dsoc-dark);
}

.dark .dsoc-discord-card {
background: var(--dsoc-light);
color: var(--dsoc-dark);
}

.dsoc-discord-btn {
border: 3px solid var(--dsoc-dark);
box-shadow: 3px 3px 0px var(--dsoc-dark);
}

.dark .dsoc-discord-btn {
border-color: var(--dsoc-dark);
box-shadow: 3px 3px 0px var(--dsoc-dark);
}

/* DSOC Tags */
.dsoc-tag-badge {
border: 3px solid var(--dsoc-dark);
box-shadow: 3px 3px 0px var(--dsoc-dark);
}

.dark .dsoc-tag-badge {
border-color: var(--dsoc-dark);
box-shadow: 3px 3px 0px var(--dsoc-dark);
}

.dsoc-mobile-menu {
padding: 16px 0;
border-top: 1px solid rgba(0,0,0,0.1);
Expand Down Expand Up @@ -390,6 +423,14 @@
border-color: var(--dsoc-light);
}

.dsoc-stat-label {
color: var(--dsoc-dark);
}

.dark .dsoc-stat-label {
color: var(--dsoc-light);
}

/* DSOC Timeline */
.dsoc-timeline {
position: relative;
Expand Down Expand Up @@ -518,6 +559,11 @@
.dsoc-float-shape:nth-child(3) { animation-delay: 2s; }
.dsoc-float-shape:nth-child(4) { animation-delay: 3s; }

/* DSOC "What Is" Title */
.dark .dsoc-what-title {
color: var(--dsoc-light);
}

/* DSOC Section Titles */
.dsoc-section-title {
position: relative;
Expand Down
Loading