Skip to content

Commit e03e578

Browse files
mnaimfaizymnaimfaizy
committed
Remove dark theme functionality - convert to light-only mode
- Remove all dark: prefixed Tailwind CSS classes from entire codebase - Clean 2D visualizations, shared components, playground components, and sections - Remove ColorMode type and dark mode functions from ThemeContext - Update copilot instructions to reflect light-only theme system - Ensure consistent light theme across all UI components and visualizations
1 parent 5d48e64 commit e03e578

40 files changed

Lines changed: 2407 additions & 2507 deletions

‎.github/copilot-instructions.md‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,10 @@ src/
3232

3333
## 🎨 Design System Guidelines
3434

35+
### **Theme System**
36+
37+
**⚠️ Important**: Code Executives operates exclusively in light mode. All dark theme functionality has been completely removed from the application. Use only light theme colors and classes.
38+
3539
### **Shared Theme System**
3640

3741
Code Executives uses a comprehensive shared theme system located in `src/utils/theme.ts` to ensure design consistency across all sections, pages, and components.
@@ -256,10 +260,10 @@ const EducationalSection: React.FC<SectionProps> = ({ isActive, onNavigate }) =>
256260
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
257261
{/* Left: Educational content */}
258262
<div className="space-y-6">
259-
<h2 className="text-3xl font-bold text-gray-900 dark:text-white">
263+
<h2 className="text-3xl font-bold text-gray-900">
260264
Section Title
261265
</h2>
262-
<div className="prose dark:prose-invert">
266+
<div className="prose">
263267
{/* Educational content */}
264268
</div>
265269
</div>
@@ -347,10 +351,10 @@ const EducationalSection: React.FC<SectionProps> = ({ isActive, onNavigate }) =>
347351
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
348352
{/* Left: Educational content */}
349353
<div className="space-y-6">
350-
<h2 className="text-3xl font-bold text-gray-900 dark:text-white">
354+
<h2 className="text-3xl font-bold text-gray-900">
351355
Section Title
352356
</h2>
353-
<div className="prose dark:prose-invert">
357+
<div className="prose">
354358
{/* Educational content */}
355359
</div>
356360
</div>
@@ -505,14 +509,11 @@ const primaryButton = `${buttonStyles} bg-blue-600 hover:bg-blue-700 text-white`
505509
const secondaryButton = `${buttonStyles} bg-gray-200 hover:bg-gray-300 text-gray-900`;
506510

507511
// Group related classes
508-
const cardStyles = [
509-
'bg-white dark:bg-gray-800',
510-
'border border-gray-200 dark:border-gray-700',
511-
'rounded-xl shadow-sm',
512-
'p-6',
513-
].join(' ');
512+
const cardStyles = ['bg-white', 'border border-gray-200', 'rounded-xl shadow-sm', 'p-6'].join(' ');
514513
```
515514

515+
**⚠️ Important**: Code Executives operates exclusively in light mode. Do not use `dark:` prefixed Tailwind classes as they have been completely removed from the application.
516+
516517
## 🐛 Debugging and Troubleshooting
517518

518519
### **Common Issues**

‎src/components/models3d/TreeVisualization3D.tsx‎

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -230,7 +230,7 @@ const TreeVisualization3D: React.FC<TreeVisualization3DProps> = ({
230230
};
231231

232232
return (
233-
<div className={`relative bg-gray-100 dark:bg-gray-900 rounded-lg ${className}`}>
233+
<div className={`relative bg-gray-100 rounded-lg ${className}`}>
234234
{/* 3D Canvas */}
235235
<canvas
236236
ref={canvasRef}
@@ -266,79 +266,77 @@ const TreeVisualization3D: React.FC<TreeVisualization3DProps> = ({
266266
<div className="absolute bottom-4 left-4 flex items-center space-x-2">
267267
<button
268268
onClick={resetAnimation}
269-
className="p-2 bg-white dark:bg-gray-800 rounded-lg shadow-sm
270-
border border-gray-200 dark:border-gray-700
271-
hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
269+
className="p-2 bg-white rounded-lg shadow-sm
270+
border border-gray-200
271+
hover:bg-gray-50 transition-colors"
272272
title="Reset"
273273
>
274-
<SkipBack className="w-4 h-4 text-gray-600 dark:text-gray-400" />
274+
<SkipBack className="w-4 h-4 text-gray-600" />
275275
</button>
276276

277277
<button
278278
onClick={() => setIsPlaying(!isPlaying)}
279-
className="p-2 bg-white dark:bg-gray-800 rounded-lg shadow-sm
280-
border border-gray-200 dark:border-gray-700
281-
hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
279+
className="p-2 bg-white rounded-lg shadow-sm
280+
border border-gray-200
281+
hover:bg-gray-50 transition-colors"
282282
title={isPlaying ? 'Pause' : 'Play'}
283283
>
284284
{isPlaying ? (
285-
<Pause className="w-4 h-4 text-gray-600 dark:text-gray-400" />
285+
<Pause className="w-4 h-4 text-gray-600" />
286286
) : (
287-
<Play className="w-4 h-4 text-gray-600 dark:text-gray-400" />
287+
<Play className="w-4 h-4 text-gray-600" />
288288
)}
289289
</button>
290290

291291
<button
292292
onClick={() => setRotationY((prev) => prev + Math.PI / 4)}
293-
className="p-2 bg-white dark:bg-gray-800 rounded-lg shadow-sm
294-
border border-gray-200 dark:border-gray-700
295-
hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
293+
className="p-2 bg-white rounded-lg shadow-sm
294+
border border-gray-200
295+
hover:bg-gray-50 transition-colors"
296296
title="Rotate"
297297
>
298-
<RotateCcw className="w-4 h-4 text-gray-600 dark:text-gray-400" />
298+
<RotateCcw className="w-4 h-4 text-gray-600" />
299299
</button>
300300
</div>
301301

302302
{/* Info Panel */}
303303
<div
304-
className="absolute top-4 right-4 bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm
305-
border border-gray-200 dark:border-gray-700 max-w-xs"
304+
className="absolute top-4 right-4 bg-white rounded-lg p-4 shadow-sm
305+
border border-gray-200 max-w-xs"
306306
>
307307
<div className="flex items-center space-x-2 mb-2">
308-
<Eye className="w-4 h-4 text-blue-600 dark:text-blue-400" />
309-
<h4 className="font-semibold text-gray-900 dark:text-white text-sm">3D Binary Tree</h4>
308+
<Eye className="w-4 h-4 text-blue-600" />
309+
<h4 className="font-semibold text-gray-900 text-sm">3D Binary Tree</h4>
310310
</div>
311-
<div className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
311+
<div className="text-xs text-gray-600 space-y-1">
312312
<div>• Drag to rotate view</div>
313313
<div>• Scroll to zoom in/out</div>
314314
<div>• Play to animate traversal</div>
315315
</div>
316316

317-
<div className="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
318-
<div className="text-xs text-gray-500 dark:text-gray-500">
319-
Zoom: {Math.round(zoom * 100)}%
320-
</div>
317+
<div className="mt-3 pt-3 border-t border-gray-200">
318+
<div className="text-xs text-gray-500">Zoom: {Math.round(zoom * 100)}%</div>
321319
</div>
322320
</div>
323321

324322
{/* Legend */}
325323
<div
326-
className="absolute bottom-4 right-4 bg-white dark:bg-gray-800 rounded-lg p-3 shadow-sm
327-
border border-gray-200 dark:border-gray-700"
324+
className="absolute bottom-4 right-4 bg-white rounded-lg p-3 shadow-sm
325+
border border-gray-200"
328326
>
329-
<div className="text-xs font-semibold text-gray-900 dark:text-white mb-2">Node Types</div>
327+
<div className="text-xs font-semibold text-gray-900 mb-2">Node Types</div>
330328
<div className="space-y-1">
331329
<div className="flex items-center space-x-2">
332330
<div className="w-3 h-3 rounded-full bg-blue-500"></div>
333-
<span className="text-xs text-gray-600 dark:text-gray-400">Root</span>
331+
<span className="text-xs text-gray-600">Root</span>
334332
</div>
335333
<div className="flex items-center space-x-2">
336334
<div className="w-3 h-3 rounded-full bg-green-500"></div>
337-
<span className="text-xs text-gray-600 dark:text-gray-400">Internal</span>
335+
<span className="text-xs text-gray-600">Internal</span>
338336
</div>
339337
<div className="flex items-center space-x-2">
340338
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
341-
<span className="text-xs text-gray-600 dark:text-gray-400">Leaf</span>
339+
<span className="text-xs text-gray-600">Leaf</span>
342340
</div>
343341
</div>
344342
</div>

‎src/components/playground/CodeEditor.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,16 +50,16 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
5050
{/* Editor Header */}
5151
<div className="flex items-center justify-between">
5252
<div className="flex items-center space-x-4">
53-
<Code className="w-5 h-5 text-gray-600 dark:text-gray-400" />
54-
<span className="font-medium text-gray-900 dark:text-white">Code Editor</span>
53+
<Code className="w-5 h-5 text-gray-600" />
54+
<span className="font-medium text-gray-900">Code Editor</span>
5555
</div>
5656

5757
<div className="flex items-center space-x-2">
5858
{/* Language Selector */}
5959
<select
6060
value={language}
6161
onChange={(e) => handleLanguageChange(e.target.value as Language)}
62-
className="px-3 py-1 text-sm bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
62+
className="px-3 py-1 text-sm bg-white border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
6363
>
6464
{languages.map((lang) => (
6565
<option key={lang.value} value={lang.value}>
@@ -71,7 +71,7 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
7171
{/* Copy Button */}
7272
<button
7373
onClick={handleCopy}
74-
className="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
74+
className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
7575
title="Copy code"
7676
>
7777
{copied ? <Check className="w-4 h-4 text-green-600" /> : <Copy className="w-4 h-4" />}
@@ -85,15 +85,15 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
8585
value={code}
8686
onChange={(e) => onChange(e.target.value)}
8787
readOnly={readOnly}
88-
className={`w-full h-96 p-4 font-mono text-sm bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none ${
89-
readOnly ? 'bg-gray-50 dark:bg-gray-800 cursor-not-allowed' : ''
88+
className={`w-full h-96 p-4 font-mono text-sm bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none ${
89+
readOnly ? 'bg-gray-50 cursor-not-allowed' : ''
9090
}`}
9191
placeholder={readOnly ? 'No code available' : 'Write your solution here...'}
9292
spellCheck={false}
9393
/>
9494

9595
{/* Line numbers (simplified) */}
96-
<div className="absolute left-2 top-4 text-gray-400 dark:text-gray-600 font-mono text-sm select-none pointer-events-none">
96+
<div className="absolute left-2 top-4 text-gray-400 font-mono text-sm select-none pointer-events-none">
9797
{code.split('\n').map((_, index) => (
9898
<div key={index} className="leading-5">
9999
{index + 1}
@@ -103,14 +103,14 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
103103
</div>
104104

105105
{/* Editor Info */}
106-
<div className="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
106+
<div className="flex items-center justify-between text-sm text-gray-600">
107107
<div className="flex items-center space-x-4">
108108
<span>Language: {languages.find((l) => l.value === language)?.label}</span>
109109
<span>Lines: {code.split('\n').length}</span>
110110
<span>Characters: {code.length}</span>
111111
</div>
112112

113-
{readOnly && <span className="text-orange-600 dark:text-orange-400">Read-only mode</span>}
113+
{readOnly && <span className="text-orange-600">Read-only mode</span>}
114114
</div>
115115
</div>
116116
);

0 commit comments

Comments
 (0)