Skip to content

Commit 3f8c773

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #739 from prathamesh424/main
Fixed #713 : light theme in interview prep
2 parents b2ecd90 + 46adf39 commit 3f8c773

File tree

9 files changed

+230
-80
lines changed

9 files changed

+230
-80
lines changed

‎src/css/custom.css‎

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
[data-theme="light"] .interview-prep-page p,
2+
[data-theme="light"] .interview-prep-page li,
3+
[data-theme="light"] .interview-prep-page span,
4+
[data-theme="light"] .interview-prep-page div {
5+
color: inherit;
6+
}
17
/* You can override the default Infima variables here. */
28
@import "tailwindcss";
39

@@ -826,6 +832,25 @@ html.theme-light .text-gray-900 {
826832
color: #1a1a1a !important;
827833
}
828834

835+
/* ==== Interview Prep: enforce proper light theme surfaces ==== */
836+
/* Some Tailwind dark: classes may not be recognized by Docusaurus data-theme in all cases.
837+
Ensure that in light mode, all Interview Prep cards use white surfaces and readable text. */
838+
[data-theme="light"] .interview-prep-page .bg-white,
839+
[data-theme="light"] .interview-prep-page [class*="bg-white/"],
840+
[data-theme="light"] .interview-prep-page .question-card,
841+
[data-theme="light"] .interview-prep-page .technical-inner,
842+
[data-theme="light"] .interview-prep-page .technical-inner-success,
843+
[data-theme="light"] .interview-prep-page .interview-prep-sidebar {
844+
background-color: #ffffff !important;
845+
color: #111827; /* gray-900 */
846+
}
847+
848+
/* Ensure common dark-surface utilities don't leak into light theme in this area */
849+
[data-theme="light"] .interview-prep-page [class*="bg-gray-800"],
850+
[data-theme="light"] .interview-prep-page [class*="bg-gray-900"] {
851+
background-color: #ffffff !important;
852+
}
853+
829854
/*==== SECTION 13 Modern Blog Enhancements ======*/
830855
.modern-gradient-bg {
831856
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -1123,7 +1148,8 @@ html {
11231148
[data-theme="light"] .interview-prep-page h4,
11241149
[data-theme="light"] .interview-prep-page h5,
11251150
[data-theme="light"] .interview-prep-page h6 {
1126-
color: #ffffff !important;
1151+
/* Use a dark heading color in light mode for readability */
1152+
color: #111827 !important; /* Tailwind gray-900 */
11271153
}
11281154

11291155
.watch-video-btn {
@@ -1249,6 +1275,9 @@ html {
12491275
}
12501276

12511277
.explore-btn {
1278+
color: inherit;
1279+
}
1280+
[data-theme="dark"] .explore-btn {
12521281
color: white;
12531282
}
12541283

@@ -1262,17 +1291,24 @@ html {
12621291
box-sizing: border-box !important;
12631292
}
12641293

1265-
.explore-btn:hover {
1294+
[data-theme="dark"] .explore-btn:hover {
12661295
color: white;
12671296
}
12681297

1269-
.custom-input {
1270-
background-color: #374151;
1271-
color: white; /* cyan-500 */
1298+
/* Make the custom input theme-aware to avoid white text on light backgrounds */
1299+
[data-theme="dark"] .custom-input {
1300+
background-color: #374151; /* gray-700 */
1301+
color: #ffffff;
1302+
}
1303+
[data-theme="light"] .custom-input {
1304+
background-color: #f9fafb; /* gray-50 */
1305+
color: #111827; /* gray-900 */
12721306
}
12731307
.company-border {
12741308
border-color: #6b7280;
1275-
color: white;
1309+
}
1310+
[data-theme="dark"] .company-border {
1311+
color: #ffffff;
12761312
}
12771313
.company-blue-border {
12781314
border-color: #3b82f6;
@@ -1316,14 +1352,17 @@ html {
13161352
border-color: #1f2937; /* border-gray-800 */
13171353
background-color: #1f2937; /* bg-gray-800 */
13181354
}
1319-
.company-tab-link {
1355+
[data-theme="dark"] .company-tab-link {
13201356
color: white;
13211357
}
1322-
.company-tab-link:hover {
1358+
[data-theme="dark"] .company-tab-link:hover {
13231359
color: white;
13241360
}
13251361
.company-tab-community-link {
1326-
color: #fdba74;
1362+
color: #9a3412; /* orange-800 for light */
1363+
}
1364+
[data-theme="dark"] .company-tab-community-link {
1365+
color: #fdba74; /* orange-300 in dark */
13271366
}
13281367
.company-tab-community-link:hover {
13291368
color: #fdba74;
@@ -1365,12 +1404,13 @@ html {
13651404
padding: 0 !important;
13661405
}
13671406
.practice-tab-link:hover{
1368-
color: white;
13691407
text-decoration: none;
13701408
}
1371-
.practice-tab-link{
1409+
[data-theme="dark"] .practice-tab-link{
13721410
color: white;
1373-
1411+
}
1412+
[data-theme="light"] .practice-tab-link{
1413+
color: #1d4ed8; /* blue-700 */
13741414
}
13751415

13761416
/* ===== SECTION 14: SMOOTH PAGE TRANSITIONS ===== */

‎src/pages/interview-prep/BehavioralTab.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({ behavioralQuestions=[],
2323
<motion.div initial="hidden" animate="visible" variants={staggerContainer}>
2424
{/* Introduction Section */}
2525
<motion.div className="text-center mb-12" variants={fadeIn}>
26-
<h2 className="text-4xl font-bold mb-4 text-white">Behavioral Interview Preparation</h2>
26+
<h2 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white">Behavioral Interview Preparation</h2>
2727
<p className="text-xl text-center ml-3 text-gray-600 dark:text-gray-300 ">
2828
Master the art of storytelling and showcase your soft skills with confidence
2929
</p>
@@ -35,7 +35,7 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({ behavioralQuestions=[],
3535
variants={fadeIn}
3636
>
3737
<div className="max-w-4xl mx-auto">
38-
<h3 className="text-2xl font-bold mb-6 text-white flex items-center">
38+
<h3 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white flex items-center">
3939
<span className="text-3xl mr-3">🤝</span>
4040
What are Behavioral Interviews?
4141
</h3>
@@ -411,11 +411,11 @@ const BehavioralTab: React.FC<BehavioralTabProps> = ({ behavioralQuestions=[],
411411
<h4 className="font-bold text-gray-900 dark:text-white mb-2">{video.title}</h4>
412412
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">{video.description}</p>
413413
<div className="flex justify-between items-center text-xs text-gray-500 dark:text-gray-400 mb-3">
414-
<span>{video.channel}</span>
415-
<span>{video.duration}</span>
414+
<span className="text-gray-500 dark:text-gray-400">{video.channel}</span>
415+
<span className="text-gray-500 dark:text-gray-400">{video.duration}</span>
416416
</div>
417417
<a href={video.url} target="_blank" rel="noopener noreferrer" className="watch-video-btn">
418-
<span className="mr-2">▶️</span>
418+
<span className="mr-2 text-inherit">▶️</span>
419419
Watch Video
420420
</a>
421421
</div>

‎src/pages/interview-prep/CompaniesTab.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -178,7 +178,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
178178
animate={{ scale: [1, 1.2, 1] }}
179179
transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
180180
/>
181-
<span className="relative z-10">{item.icon}</span>
181+
<span className="relative z-10 text-inherit">{item.icon}</span>
182182
</div>
183183
<h4 className="font-bold text-gray-900 dark:text-white mb-3 text-lg">{item.title}</h4>
184184
<p className="text-sm text-gray-600 dark:text-gray-300 mb-3 leading-relaxed">{item.description}</p>
@@ -205,7 +205,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
205205
>
206206
<div className={`text-3xl font-bold ${stat.color} mb-2`}>{stat.metric}</div>
207207
<div className="text-sm text-gray-600 dark:text-gray-300 flex items-center justify-center gap-2">
208-
<span>{stat.icon}</span>
208+
<span className="text-inherit">{stat.icon}</span>
209209
{stat.label}
210210
</div>
211211
</motion.div>) : null
@@ -225,7 +225,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
225225
placeholder="Search companies, focus areas, technologies, or interview types..."
226226
value={searchTerm}
227227
onChange={(e) => setSearchTerm(e.target.value)}
228-
className="pl-12 h-12 custom-input bg-gray-50 dark:bg-gray-700 text-white border-gray-200 dark:border-gray-600 rounded-xl text-lg"
228+
className="pl-12 h-12 custom-input bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white border-gray-200 dark:border-gray-600 rounded-xl text-lg"
229229
/>
230230
</div>
231231
<div className="flex gap-3">
@@ -622,7 +622,7 @@ const CompaniesTab: React.FC<CompaniesTabProps> = ({ companyTips = [] }) => {
622622
animate={{ scale: [1, 1.2, 1] }}
623623
transition={{ duration: 3, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
624624
/>
625-
<span className="relative z-10">{item.icon}</span>
625+
<span className="relative z-10 text-inherit">{item.icon}</span>
626626
</div>
627627
<h4 className="font-bold text-gray-900 dark:text-white mb-3 text-lg">{item.title}</h4>
628628
<p className="text-sm text-gray-600 dark:text-gray-300 mb-4 leading-relaxed">{item.description}</p>

‎src/pages/interview-prep/OverviewTab.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
143143
</span>
144144
Comprehensive Coverage
145145
</h3>
146-
<ul className="space-y-3 text-gray-600 dark:text-gray-300">
146+
<ul className="space-y-3">
147147
<li className="flex items-start">
148148
<span className="w-2 h-2 bg-blue-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
149149
<span>
@@ -153,21 +153,21 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
153153
</li>
154154
<li className="flex items-start">
155155
<span className="w-2 h-2 bg-green-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
156-
<span>
156+
<span className="text-gray-700 dark:text-gray-300">
157157
<strong>Behavioral Excellence:</strong> STAR method framework, leadership scenarios, and
158158
communication skills
159159
</span>
160160
</li>
161161
<li className="flex items-start">
162162
<span className="w-2 h-2 bg-purple-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
163-
<span>
163+
<span className="text-gray-700 dark:text-gray-300">
164164
<strong>Company Intelligence:</strong> FAANG-specific strategies, culture insights, and
165165
insider tips
166166
</span>
167167
</li>
168168
<li className="flex items-start">
169169
<span className="w-2 h-2 bg-orange-500 rounded-full mr-3 mt-2 flex-shrink-0"></span>
170-
<span>
170+
<span className="text-gray-700 dark:text-gray-300">
171171
<strong>Mock Practice:</strong> Real-time simulations with feedback and performance tracking
172172
</span>
173173
</li>
@@ -290,7 +290,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
290290
animate={{ scale: [1, 1.2, 1] }}
291291
transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, ease: "easeInOut" }}
292292
/>
293-
<span className="relative z-10">{stage.step}</span>
293+
<span className="relative z-10 text-inherit">{stage.step}</span>
294294
</div>
295295
<motion.div
296296
className="absolute -top-2 -right-2 w-8 h-8 bg-white dark:bg-gray-800 rounded-full flex items-center justify-center shadow-md"
@@ -401,7 +401,7 @@ const OverviewTab: React.FC<OverviewTabProps> = ({
401401
transition={{ duration: 0.4, delay: tipIndex * 0.1 }}
402402
>
403403
<span className="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></span>
404-
<span className="leading-relaxed">{tip}</span>
404+
<span className="leading-relaxed text-gray-700 dark:text-gray-300">{tip}</span>
405405
</motion.li>
406406
))}
407407
</ul>

‎src/pages/interview-prep/PracticeTab.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -597,7 +597,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
597597
>
598598
{showHints.has(question.id) ? "🔽" : "▶️"}
599599
</motion.span>
600-
<span className="font-bold">{showHints.has(question.id) ? "Hide Hints" : "Show Hints"}</span>
600+
<span className="font-bold text-gray-900 dark:text-white">{showHints.has(question.id) ? "Hide Hints" : "Show Hints"}</span>
601601
</div>
602602
<motion.span
603603
className="text-xs bg-gradient-to-r from-blue-100 to-purple-100 dark:from-blue-900/40 dark:to-purple-900/40 text-blue-700 dark:text-blue-300 px-3 py-1 rounded-full font-bold border border-blue-200 dark:border-blue-700"
@@ -623,7 +623,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
623623
>
624624
💡
625625
</motion.span>
626-
<span>Helpful Hints:</span>
626+
<span className="text-gray-900 dark:text-white">Helpful Hints:</span>
627627
</h4>
628628
<ul className="space-y-4">
629629
{question.hints.map((hint, i) => (
@@ -641,7 +641,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
641641
>
642642
{i + 1}
643643
</motion.span>
644-
<span className="leading-relaxed font-medium">{hint}</span>
644+
<span className="leading-relaxed font-medium text-gray-700 dark:text-gray-300">{hint}</span>
645645
</motion.li>
646646
))}
647647
</ul>
@@ -665,7 +665,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
665665
>
666666
{showResources.has(question.id) ? "🔽" : "▶️"}
667667
</motion.span>
668-
<span className="font-bold">
668+
<span className="font-bold text-gray-900 dark:text-white">
669669
{showResources.has(question.id) ? "Hide Resources" : "Show Resources"}
670670
</span>
671671
</div>
@@ -693,7 +693,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
693693
>
694694
🔗
695695
</motion.span>
696-
<span>Helpful Resources:</span>
696+
<span className="text-gray-900 dark:text-white">Helpful Resources:</span>
697697
</h4>
698698
<div className="grid gap-3">
699699
{question.links.map((link, i) => {
@@ -795,7 +795,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
795795
>
796796
🎯
797797
</motion.span>
798-
<span>Session Active</span>
798+
<span className="text-gray-900 dark:text-white">Session Active</span>
799799
</span>
800800
<motion.span
801801
className="text-2xl font-black text-blue-600 dark:text-blue-400"
@@ -818,7 +818,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
818818
>
819819
✓
820820
</motion.span>
821-
<span>Complete Practice</span>
821+
<span className="text-gray-900 dark:text-white">Complete Practice</span>
822822
</motion.button>
823823
</motion.div>
824824
) : (
@@ -845,7 +845,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
845845
>
846846
✓
847847
</motion.span>
848-
<span>Completed</span>
848+
<span className="text-gray-900 dark:text-white">Completed</span>
849849
</>
850850
) : (
851851
<>
@@ -855,7 +855,7 @@ const PracticeTab: React.FC<PracticeTabProps> = ({ mockInterviewQuestions = [],
855855
>
856856
🚀
857857
</motion.span>
858-
<span>Start Practice</span>
858+
<span className="text-gray-900 dark:text-white">Start Practice</span>
859859
</>
860860
)}
861861
</motion.button>

0 commit comments

Comments
 (0)