Skip to content

Commit 5a13f96

Browse files
Richajaishwal0Richajaishwal0
committed
fix darktheme issue
1 parent c64e6b5 commit 5a13f96

File tree

10 files changed

+782
-63
lines changed

10 files changed

+782
-63
lines changed

‎src/css/custom.css

Lines changed: 569 additions & 2 deletions
Large diffs are not rendered by default.

‎src/pages/badges/github-badges.module.css

Lines changed: 52 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -722,26 +722,56 @@ table th, table td {
722722
}
723723

724724
/* Dark mode support */
725-
@media (prefers-color-scheme: dark) {
726-
.skinToneBadgeCard {
727-
background: #0d1117;
728-
}
729-
730-
.badgeHeader h3 {
731-
color: #c9d1d9;
732-
}
733-
734-
.variant {
735-
background: #161b22;
736-
}
737-
738-
.variant:hover {
739-
background: #1c2128;
740-
}
741-
742-
.skinToneLabel {
743-
color: #8b949e;
744-
}
725+
[data-theme='dark'] .skinToneBadgeCard {
726+
background: var(--dark-bg-secondary);
727+
color: var(--dark-text-primary);
728+
}
729+
730+
[data-theme='dark'] .badgeHeader h3 {
731+
color: var(--dark-text-primary);
732+
}
733+
734+
[data-theme='dark'] .variant {
735+
background: var(--dark-bg-tertiary);
736+
color: var(--dark-text-primary);
737+
}
738+
739+
[data-theme='dark'] .variant:hover {
740+
background: var(--dark-card-hover-bg);
741+
}
742+
743+
[data-theme='dark'] .skinToneLabel {
744+
color: var(--dark-text-muted);
745+
}
746+
747+
[data-theme='dark'] .achievementsTable {
748+
background: var(--dark-bg-secondary);
749+
color: var(--dark-text-primary);
750+
}
751+
752+
[data-theme='dark'] .achievementsTable th {
753+
background: var(--dark-bg-tertiary);
754+
color: var(--dark-text-primary);
755+
border-color: var(--dark-border);
756+
}
757+
758+
[data-theme='dark'] .achievementsTable td {
759+
border-color: var(--dark-border);
760+
color: var(--dark-text-primary);
761+
}
762+
763+
[data-theme='dark'] .achievementsTable tr:hover {
764+
background: var(--dark-card-hover-bg);
765+
}
766+
767+
[data-theme='dark'] .title {
768+
color: var(--dark-text-primary);
769+
}
770+
771+
[data-theme='dark'] .bannerAchievements {
772+
background: var(--dark-bg-secondary);
773+
color: var(--dark-text-primary);
774+
border-color: var(--dark-border);
745775
}
746776

747777
/* Footer Styles */
@@ -751,6 +781,8 @@ table th, table td {
751781
margin-top: 60px;
752782
}
753783

784+
/* Footer - keeping original styling */
785+
754786
.footerGrid {
755787
display: grid;
756788
grid-template-columns: 1fr 2fr 1fr;

‎src/pages/badges/github-badges.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Head from '@docusaurus/Head';
33
import { motion, HTMLMotionProps } from 'framer-motion';
44
import type { ReactElement } from 'react';
55
import Layout from '@theme/Layout';
6+
import { useColorMode } from '@docusaurus/theme-common';
67
import styles from './github-badges.module.css';
78

89
type MotionDivProps = HTMLMotionProps<"div">;
@@ -11,6 +12,9 @@ type MotionTrProps = HTMLMotionProps<"tr">;
1112
import Link from '@docusaurus/Link';
1213

1314
const GithubBadges = (): React.ReactElement => {
15+
const { colorMode } = useColorMode();
16+
const isDark = colorMode === 'dark';
17+
1418
// Scroll to top button logic
1519
useEffect(() => {
1620
const scrollToTopBtn = document.getElementById("scrollToTop");
@@ -43,7 +47,9 @@ const GithubBadges = (): React.ReactElement => {
4347
title="GitHub Achievements - RecodeHive"
4448
description="Explore GitHub achievements and badges"
4549
>
46-
<div className={styles["github-badges-page"]}>
50+
<div className={`${styles["github-badges-page"]} transition-colors duration-300 ${
51+
isDark ? 'dark-bg-primary dark-text-primary' : 'bg-white text-black'
52+
}`}>
4753
{/* Hero section */}
4854
<Head>
4955
<title>GitHub Achievements - RecodeHive</title>

‎src/pages/blogs/blogs.css

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,17 +39,17 @@
3939
--blog-transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
4040
}
4141

42-
/* Dark Mode Variables */
42+
/* Dark Mode Variables - Using standardized colors */
4343
[data-theme='dark'] {
44-
--blog-text-primary: #f7fafc;
45-
--blog-text-secondary: #e2e8f0;
46-
--blog-text-muted: #a0aec0;
47-
--blog-bg-primary: #1a202c;
48-
--blog-bg-secondary: #2d3748;
49-
--blog-bg-card: #2d3748;
50-
--blog-border: #4a5568;
51-
--blog-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
52-
--blog-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
44+
--blog-text-primary: var(--dark-text-primary);
45+
--blog-text-secondary: var(--dark-text-secondary);
46+
--blog-text-muted: var(--dark-text-muted);
47+
--blog-bg-primary: var(--dark-bg-primary);
48+
--blog-bg-secondary: var(--dark-bg-secondary);
49+
--blog-bg-card: var(--dark-card-bg);
50+
--blog-border: var(--dark-border);
51+
--blog-shadow: var(--dark-shadow);
52+
--blog-shadow-lg: var(--dark-shadow-lg);
5353
--blog-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
5454
}
5555

‎src/pages/careers/index.tsx

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Layout from "@theme/Layout";
33
import Head from "@docusaurus/Head";
44
import { motion } from "framer-motion";
55
import Link from "@docusaurus/Link";
6+
import { useColorMode } from '@docusaurus/theme-common';
67

78
// Animation variants for consistent animations
89
const fadeIn = {
@@ -124,6 +125,8 @@ const testimonials = [
124125
];
125126

126127
export default function CareersPage() {
128+
const { colorMode } = useColorMode();
129+
const isDark = colorMode === 'dark';
127130
const [activeTestimonial, setActiveTestimonial] = useState(0);
128131

129132
useEffect(() => {
@@ -146,7 +149,11 @@ export default function CareersPage() {
146149
/>
147150
</Head>
148151

149-
<div className="careers-page bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-black">
152+
<div className={`careers-page transition-colors duration-300 ${
153+
isDark
154+
? 'bg-gradient-to-b from-gray-900 to-black'
155+
: 'bg-gradient-to-b from-white to-gray-50'
156+
}`}>
150157
{/* Hero Section */}
151158
<motion.section
152159
className="hero-section py-20 px-4 text-center bg-gradient-to-br from-blue-600 via-purple-600 to-blue-800 text-white relative overflow-hidden"
@@ -199,10 +206,14 @@ export default function CareersPage() {
199206
>
200207
<div className="max-w-6xl mx-auto">
201208
<motion.div className="text-center mb-16" variants={fadeIn}>
202-
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
209+
<h2 className={`text-4xl md:text-5xl font-bold mb-6 ${
210+
isDark ? 'text-white' : 'text-gray-900'
211+
}`}>
203212
Our Culture & Values
204213
</h2>
205-
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
214+
<p className={`text-xl max-w-3xl mx-auto ${
215+
isDark ? 'text-gray-300' : 'text-gray-600'
216+
}`}>
206217
We're building more than just a company—we're creating a community of learners, innovators, and leaders.
207218
</p>
208219
</motion.div>
@@ -211,16 +222,22 @@ export default function CareersPage() {
211222
{cultureValues.map((value, index) => (
212223
<motion.div
213224
key={index}
214-
className="culture-card bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 hover:shadow-xl transition-all duration-300 transform hover:scale-105"
225+
className={`culture-card rounded-xl shadow-lg p-8 hover:shadow-xl transition-all duration-300 transform hover:scale-105 ${
226+
isDark ? 'bg-gray-800' : 'bg-white'
227+
}`}
215228
variants={fadeIn}
216229
>
217230
<div className="h-48 bg-gradient-to-br from-blue-400 to-purple-500 rounded-lg mb-6 flex items-center justify-center">
218231
<span className="text-6xl">🚀</span>
219232
</div>
220-
<h3 className="text-2xl font-bold mb-4 text-gray-900 dark:text-white">
233+
<h3 className={`text-2xl font-bold mb-4 ${
234+
isDark ? 'text-white' : 'text-gray-900'
235+
}`}>
221236
{value.title}
222237
</h3>
223-
<p className="text-gray-600 dark:text-gray-300">
238+
<p className={`${
239+
isDark ? 'text-gray-300' : 'text-gray-600'
240+
}`}>
224241
{value.description}
225242
</p>
226243
</motion.div>

‎src/pages/community/community.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
}
88

99
[data-theme='dark'] .community-page {
10-
background: #121212;
10+
background: var(--dark-bg-primary);
1111
}
1212

1313
/* CSS Custom Properties for better browser support */
@@ -21,11 +21,11 @@
2121
}
2222

2323
[data-theme='dark'] {
24-
--text-primary: #ffffff;
25-
--text-secondary: #edf2f7;
26-
--bg-primary: #1a1a1a;
27-
--bg-secondary: #121212;
28-
--border-color: #2d2d2d;
24+
--text-primary: var(--dark-text-primary);
25+
--text-secondary: var(--dark-text-secondary);
26+
--bg-primary: var(--dark-bg-secondary);
27+
--bg-secondary: var(--dark-bg-primary);
28+
--border-color: var(--dark-border);
2929
}
3030

3131
/* Hero Section */

‎src/pages/courses/index.tsx

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
22
import Layout from "@theme/Layout";
33
import Head from "@docusaurus/Head";
44
import { motion } from "framer-motion";
5+
import { useColorMode } from '@docusaurus/theme-common';
56

67
// Animation variants for consistent animations
78
const fadeIn = {
@@ -135,6 +136,9 @@ const faqs = [
135136
];
136137

137138
export default function CoursesLanding() {
139+
const { colorMode } = useColorMode();
140+
const isDark = colorMode === 'dark';
141+
138142
const [showAllTopics, setShowAllTopics] = useState(false);
139143
const [modal, setModal] = useState({ open: false, content: "" });
140144
const [openFaq, setOpenFaq] = useState(null);
@@ -385,13 +389,19 @@ export default function CoursesLanding() {
385389
`}
386390
</style>
387391
</Head>
388-
<main className="bg-black min-h-screen text-white">
392+
<main className={`min-h-screen transition-colors duration-300 ${
393+
isDark ? 'bg-[#121212] text-white' : 'bg-white text-black'
394+
}`}>
389395
{/* Modal */}
390396
{modal.open && (
391397
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 animate-fadeIn">
392-
<div className="bg-white text-black rounded-lg p-8 max-w-md w-full text-center relative animate-scaleIn">
398+
<div className={`rounded-lg p-8 max-w-md w-full text-center relative animate-scaleIn ${
399+
isDark ? 'bg-[#1a1a1a] text-white' : 'bg-white text-black'
400+
}`}>
393401
<button
394-
className="absolute top-2 right-4 text-2xl transition-transform hover:scale-110"
402+
className={`absolute top-2 right-4 text-2xl transition-transform hover:scale-110 ${
403+
isDark ? 'text-white hover:text-gray-300' : 'text-black hover:text-gray-700'
404+
}`}
395405
onClick={() => setModal({ open: false, content: "" })}
396406
>
397407
×
@@ -403,7 +413,11 @@ export default function CoursesLanding() {
403413

404414
{/* Hero Section */}
405415
<motion.section
406-
className="py-20 px-4 text-center border-b border-gray-800 bg-gradient-to-br from-blue-950 via-gray-900 to-black relative overflow-hidden"
416+
className={`py-20 px-4 text-center relative overflow-hidden transition-colors duration-300 ${
417+
isDark
418+
? 'border-b border-gray-800 bg-gradient-to-br from-blue-950 via-gray-900 to-black'
419+
: 'border-b border-gray-200 bg-gradient-to-br from-blue-50 via-white to-gray-50'
420+
}`}
407421
initial="hidden"
408422
animate="visible"
409423
variants={{
@@ -419,10 +433,14 @@ export default function CoursesLanding() {
419433
Transform Your Career<br />in Data Engineering</motion.h1>
420434
<div className="flex justify-center items-center">
421435
<motion.p
422-
className="text-xl md:text-2xl text-gray-300 max-w-2xl text-center leading-relaxed"
436+
className={`text-xl md:text-2xl max-w-2xl text-center leading-relaxed ${
437+
isDark ? 'text-gray-300' : 'text-gray-700'
438+
}`}
423439
variants={fadeIn}
424440
>
425-
Master the art of data engineering with industry-leading courses designed for <span className="text-blue-300 font-semibold">modern tech careers</span>.
441+
Master the art of data engineering with industry-leading courses designed for <span className={`font-semibold ${
442+
isDark ? 'text-blue-300' : 'text-blue-600'
443+
}`}>modern tech careers</span>.
426444
</motion.p>
427445
</div>
428446
<motion.div
@@ -462,11 +480,15 @@ export default function CoursesLanding() {
462480
style={{ scrollBehavior: 'smooth' }}
463481
variants={fadeIn}
464482
>
465-
<div className="flex gap-2 inline-flex">
483+
<div className="flex gap-2">
466484
{techTags.map((tag, idx) => (
467485
<span
468486
key={idx}
469-
className="bg-gray-800/80 hover:bg-blue-700/80 px-4 py-2 rounded-full text-sm font-semibold text-gray-200 shadow-md transition-all duration-300 border border-gray-700/50 hover:border-blue-500/50 hover:text-white"
487+
className={`px-4 py-2 rounded-full text-sm font-semibold shadow-md transition-all duration-300 ${
488+
isDark
489+
? 'bg-gray-800/80 hover:bg-blue-700/80 text-gray-200 border border-gray-700/50 hover:border-blue-500/50 hover:text-white'
490+
: 'bg-gray-100 hover:bg-blue-100 text-gray-700 border border-gray-300 hover:border-blue-400 hover:text-blue-700'
491+
}`}
470492
>
471493
{tag}
472494
</span>
@@ -479,7 +501,9 @@ export default function CoursesLanding() {
479501
className="mt-8"
480502
variants={fadeIn}
481503
>
482-
<h3 className="text-lg text-gray-400 mb-2 text-center">Students now available at</h3>
504+
<h3 className={`text-lg mb-2 text-center ${
505+
isDark ? 'text-gray-400' : 'text-gray-600'
506+
}`}>Students now available at</h3>
483507
<div className="flex flex-wrap justify-center items-center gap-4">
484508
{partnerLogos.map((logo, idx) => (
485509
<motion.img

‎src/pages/get-started/index.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Link from "@docusaurus/Link";
44
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
55
import { motion, useAnimation, useInView } from "framer-motion";
66
import Head from '@docusaurus/Head';
7+
import { useColorMode } from '@docusaurus/theme-common';
78
import styles from "./styles.module.css";
89

910
// Type definitions
@@ -608,6 +609,8 @@ const LearningPath = ({
608609

609610
export default function GetStarted() {
610611
const { siteConfig } = useDocusaurusContext();
612+
const { colorMode } = useColorMode();
613+
const isDark = colorMode === 'dark';
611614
type CompletedPaths = Record<string, boolean>;
612615

613616
const [completedPaths, setCompletedPaths] = useState<CompletedPaths>(() => {
@@ -661,7 +664,9 @@ export default function GetStarted() {
661664

662665
<GetStartedHeader />
663666

664-
<main>
667+
<main className={`transition-colors duration-300 ${
668+
isDark ? 'dark-bg-primary dark-text-primary' : 'bg-white text-black'
669+
}`}>
665670
{/* Features Section */}
666671
<section className={styles.features}>
667672
<div className="container">

0 commit comments

Comments
 (0)