Skip to content

Commit 65d15eb

Browse files
claude[bot]nadimtuhin
claude[bot]
and
nadimtuhin
committed
feat: Add comprehensive dark mode text color support across all components
- Updated 17 components with proper dark mode text colors - Applied consistent dark:text-* classes for headings, labels, and content - Ensured text remains readable in both light and dark themes - Covers all text elements: headings, form labels, descriptions, error text - Maintains visual hierarchy and accessibility standards 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Nadim Tuhin <nadimtuhin@users.noreply.github.com>
1 parent 94d7dfb commit 65d15eb

18 files changed

Lines changed: 84 additions & 88 deletions

‎src/components/BackslashEncoder.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default function BackslashEncoder() {
4343

4444
return (
4545
<div className="max-w-2xl">
46-
<h2 className="text-2xl font-bold mb-6">Backslash Encoder</h2>
46+
<h2 className="text-2xl font-bold dark:text-white mb-6">Backslash Encoder</h2>
4747
<div className="space-y-6">
4848
<div className="flex space-x-4">
4949
<button
@@ -68,7 +68,7 @@ export default function BackslashEncoder() {
6868
</button>
6969
</div>
7070
<div className="space-y-2">
71-
<label className="block text-sm font-medium text-gray-700">Input</label>
71+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Input</label>
7272
<textarea
7373
value={input}
7474
onChange={(e) => setInput(e.target.value)}
@@ -83,7 +83,7 @@ export default function BackslashEncoder() {
8383
Convert
8484
</button>
8585
<div className="space-y-2">
86-
<label className="block text-sm font-medium text-gray-700">Output</label>
86+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Output</label>
8787
<textarea
8888
value={output}
8989
readOnly

‎src/components/Base64Encoder.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default function Base64Encoder() {
1919

2020
return (
2121
<div className="max-w-2xl">
22-
<h2 className="text-2xl font-bold mb-6">Base64 Encoder/Decoder</h2>
22+
<h2 className="text-2xl font-bold dark:text-white mb-6">Base64 Encoder/Decoder</h2>
2323
<div className="space-y-6">
2424
<div className="flex space-x-4">
2525
<button
@@ -44,7 +44,7 @@ export default function Base64Encoder() {
4444
</button>
4545
</div>
4646
<div className="space-y-2">
47-
<label className="block text-sm font-medium text-gray-700">Input</label>
47+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Input</label>
4848
<textarea
4949
value={input}
5050
onChange={(e) => setInput(e.target.value)}
@@ -59,7 +59,7 @@ export default function Base64Encoder() {
5959
Convert
6060
</button>
6161
<div className="space-y-2">
62-
<label className="block text-sm font-medium text-gray-700">Output</label>
62+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Output</label>
6363
<textarea
6464
value={output}
6565
readOnly

‎src/components/Base64ImageEncoder.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ export default function Base64ImageEncoder() {
2626

2727
return (
2828
<div className="max-w-2xl">
29-
<h2 className="text-2xl font-bold mb-6">Base64 Image Encoder</h2>
29+
<h2 className="text-2xl font-bold dark:text-white mb-6">Base64 Image Encoder</h2>
3030
<div className="space-y-6">
3131
<div className="space-y-2">
32-
<label className="block text-sm font-medium text-gray-700">Select Image</label>
32+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Select Image</label>
3333
<input
3434
type="file"
3535
accept="image/*"
@@ -42,15 +42,15 @@ export default function Base64ImageEncoder() {
4242
{imageBase64 && (
4343
<>
4444
<div className="space-y-2">
45-
<label className="block text-sm font-medium text-gray-700">Preview</label>
45+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Preview</label>
4646
<img
4747
src={imageBase64}
4848
alt="Preview"
4949
className="max-w-full h-auto border rounded-md"
5050
/>
5151
</div>
5252
<div className="space-y-2">
53-
<label className="block text-sm font-medium text-gray-700">Base64 Output</label>
53+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Base64 Output</label>
5454
<textarea
5555
value={imageBase64}
5656
readOnly

‎src/components/CertificateDecoder.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -158,10 +158,10 @@ export default function CertificateDecoder() {
158158

159159
return (
160160
<div className="max-w-4xl">
161-
<h2 className="text-2xl font-bold mb-6">Certificate Decoder</h2>
161+
<h2 className="text-2xl font-bold dark:text-white mb-6">Certificate Decoder</h2>
162162
<div className="grid grid-cols-2 gap-6">
163163
<div className="space-y-2">
164-
<label className="block text-sm font-medium text-gray-700">Certificate Input</label>
164+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Certificate Input</label>
165165
<CodeEditor
166166
value={input}
167167
language="text"
@@ -177,7 +177,7 @@ export default function CertificateDecoder() {
177177
/>
178178
</div>
179179
<div className="space-y-2">
180-
<label className="block text-sm font-medium text-gray-700">Decoded Output</label>
180+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Decoded Output</label>
181181
<CodeEditor
182182
value={output}
183183
language="text"

‎src/components/ColorConverter.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,12 @@ const ColorConverter = () => {
4141

4242
return (
4343
<div className="space-y-4">
44-
<h1 className="text-2xl font-bold">Color Converter</h1>
44+
<h1 className="text-2xl font-bold dark:text-white">Color Converter</h1>
4545

4646
<div className="grid grid-cols-2 gap-4">
4747
<div className="space-y-4">
4848
<div>
49-
<label className="block text-sm font-medium text-gray-700 mb-2">
49+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
5050
Color Input
5151
</label>
5252
<input
@@ -93,7 +93,7 @@ const ColorConverter = () => {
9393
<div className="space-y-4">
9494
{Object.entries(formats).map(([format, value]) => (
9595
<div key={format} className="p-4 border rounded-lg">
96-
<label className="block text-sm font-medium text-gray-700 mb-2">
96+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
9797
{format.toUpperCase()}
9898
</label>
9999
<input

‎src/components/Credits.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@ import { Github, Star } from 'lucide-react';
44
export default function Credits() {
55
return (
66
<div className="max-w-4xl">
7-
<h2 className="text-2xl font-bold mb-6">Credits & Repository</h2>
7+
<h2 className="text-2xl font-bold dark:text-white mb-6">Credits & Repository</h2>
88

99
<div className="bg-white rounded-lg shadow p-6 space-y-6">
1010
<div className="flex items-center space-x-4">
1111
<a
1212
href="https://github.com/nadimtuhin/devutils"
1313
target="_blank"
1414
rel="noopener noreferrer"
15-
className="flex items-center space-x-2 text-gray-700 hover:text-blue-600"
15+
className="flex items-center space-x-2 text-gray-700 dark:text-gray-300 hover:text-blue-600"
1616
>
1717
<Github size={24} />
18-
<span className="text-lg font-medium">nadimtuhin/devutils</span>
18+
<span className="text-lg font-medium dark:text-white">nadimtuhin/devutils</span>
1919
</a>
2020

2121
<div className="flex space-x-3">
@@ -32,21 +32,21 @@ export default function Credits() {
3232
</div>
3333

3434
<div className="prose">
35-
<h3 className="text-lg font-medium mb-2">About</h3>
36-
<p className="text-gray-600">
35+
<h3 className="text-lg font-medium dark:text-white mb-2">About</h3>
36+
<p className="text-gray-600 dark:text-gray-400">
3737
DevUtils is an open-source collection of developer utilities for everyday tasks. Built with React, TypeScript, and Tailwind CSS.
3838
</p>
3939

40-
<h3 className="text-lg font-medium mt-6 mb-2">Technologies</h3>
41-
<ul className="list-disc list-inside text-gray-600 space-y-1">
40+
<h3 className="text-lg font-medium dark:text-white mt-6 mb-2">Technologies</h3>
41+
<ul className="list-disc list-inside text-gray-600 dark:text-gray-400 space-y-1">
4242
<li>React with TypeScript</li>
4343
<li>Tailwind CSS for styling</li>
4444
<li>Vite for build tooling</li>
4545
<li>Lucide React for icons</li>
4646
</ul>
4747

48-
<h3 className="text-lg font-medium mt-6 mb-2">Contributing</h3>
49-
<p className="text-gray-600">
48+
<h3 className="text-lg font-medium dark:text-white mt-6 mb-2">Contributing</h3>
49+
<p className="text-gray-600 dark:text-gray-400">
5050
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
5151
</p>
5252
</div>

‎src/components/CronJobParser.tsx‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@ const CronJobParser = () => {
2525

2626
return (
2727
<div className="space-y-4">
28-
<h1 className="text-2xl font-bold">Cron Job Parser</h1>
28+
<h1 className="text-2xl font-bold dark:text-white">Cron Job Parser</h1>
2929
<div className="space-y-4">
3030
<div>
31-
<label className="block text-sm font-medium text-gray-700 mb-2">
31+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
3232
Cron Expression
3333
</label>
3434
<input
@@ -45,22 +45,22 @@ const CronJobParser = () => {
4545

4646
{explanation && (
4747
<div className="p-4 border rounded-lg bg-gray-50">
48-
<h2 className="text-lg font-semibold mb-2">Explanation</h2>
49-
<p className="text-gray-700">{explanation}</p>
48+
<h2 className="text-lg font-semibold dark:text-white mb-2">Explanation</h2>
49+
<p className="text-gray-700 dark:text-gray-300">{explanation}</p>
5050
</div>
5151
)}
5252

5353
<div className="p-4 border rounded-lg">
54-
<h2 className="text-lg font-semibold mb-2">Quick Reference</h2>
54+
<h2 className="text-lg font-semibold dark:text-white mb-2">Quick Reference</h2>
5555
<div className="grid grid-cols-2 gap-4 text-sm">
5656
<div>
57-
<h3 className="font-medium mb-1">Format</h3>
57+
<h3 className="font-medium dark:text-white mb-1">Format</h3>
5858
<code className="text-sm bg-gray-100 p-1 rounded">* * * * *</code>
59-
<p className="mt-1 text-gray-600">minute hour day month weekday</p>
59+
<p className="mt-1 text-gray-600 dark:text-gray-400">minute hour day month weekday</p>
6060
</div>
6161
<div>
62-
<h3 className="font-medium mb-1">Special Characters</h3>
63-
<ul className="space-y-1 text-gray-600">
62+
<h3 className="font-medium dark:text-white mb-1">Special Characters</h3>
63+
<ul className="space-y-1 text-gray-600 dark:text-gray-400">
6464
<li><code className="bg-gray-100 p-1 rounded">*</code> - any value</li>
6565
<li><code className="bg-gray-100 p-1 rounded">,</code> - value list</li>
6666
<li><code className="bg-gray-100 p-1 rounded">-</code> - range</li>
@@ -71,19 +71,19 @@ const CronJobParser = () => {
7171
</div>
7272

7373
<div className="p-4 border rounded-lg">
74-
<h2 className="text-lg font-semibold mb-2">Common Examples</h2>
74+
<h2 className="text-lg font-semibold dark:text-white mb-2">Common Examples</h2>
7575
<div className="space-y-2 text-sm">
7676
<div>
7777
<code className="bg-gray-100 p-1 rounded">0 0 * * *</code>
78-
<span className="ml-2 text-gray-600">Every day at midnight</span>
78+
<span className="ml-2 text-gray-600 dark:text-gray-400">Every day at midnight</span>
7979
</div>
8080
<div>
8181
<code className="bg-gray-100 p-1 rounded">*/15 * * * *</code>
82-
<span className="ml-2 text-gray-600">Every 15 minutes</span>
82+
<span className="ml-2 text-gray-600 dark:text-gray-400">Every 15 minutes</span>
8383
</div>
8484
<div>
8585
<code className="bg-gray-100 p-1 rounded">0 9-17 * * 1-5</code>
86-
<span className="ml-2 text-gray-600">Every hour from 9 AM to 5 PM, Monday to Friday</span>
86+
<span className="ml-2 text-gray-600 dark:text-gray-400">Every hour from 9 AM to 5 PM, Monday to Friday</span>
8787
</div>
8888
</div>
8989
</div>

‎src/components/HtmlMinifyBeautify.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ export default function HtmlMinifyBeautify() {
8383

8484
return (
8585
<div className="max-w-4xl">
86-
<h2 className="text-2xl font-bold mb-6">HTML Minify/Beautify</h2>
86+
<h2 className="text-2xl font-bold dark:text-white mb-6">HTML Minify/Beautify</h2>
8787

8888
<div className="mb-4 space-x-4">
8989
<label className="inline-flex items-center">
@@ -110,7 +110,7 @@ export default function HtmlMinifyBeautify() {
110110

111111
<div className="grid grid-cols-2 gap-6">
112112
<div className="space-y-2">
113-
<label className="block text-sm font-medium text-gray-700">HTML Input</label>
113+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">HTML Input</label>
114114
<CodeEditor
115115
value={html}
116116
language="html"
@@ -125,7 +125,7 @@ export default function HtmlMinifyBeautify() {
125125
/>
126126
</div>
127127
<div className="space-y-2">
128-
<label className="block text-sm font-medium text-gray-700">
128+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
129129
{mode === 'minify' ? 'Minified Output' : 'Beautified Output'}
130130
</label>
131131
<CodeEditor

‎src/components/JsonValidator.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -289,13 +289,13 @@ export default function JsonValidator() {
289289

290290
return (
291291
<div className="max-w-6xl">
292-
<h2 className="text-2xl font-bold mb-6">JSON Validator & Formatter</h2>
292+
<h2 className="text-2xl font-bold dark:text-white mb-6">JSON Validator & Formatter</h2>
293293

294294
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
295295
{/* Input Section */}
296296
<div className="space-y-2">
297297
<div className="flex items-center justify-between">
298-
<label className="block text-sm font-medium text-gray-700">Input JSON</label>
298+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Input JSON</label>
299299
<div className="flex items-center space-x-2">
300300
<button
301301
type="button"
@@ -345,7 +345,7 @@ export default function JsonValidator() {
345345
{/* Output Section */}
346346
<div className="space-y-2">
347347
<div className="flex items-center justify-between">
348-
<label className="block text-sm font-medium text-gray-700">
348+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">
349349
{error ? 'Validation Error' : 'Formatted Output'}
350350
</label>
351351
<div className="flex items-center space-x-2">
@@ -417,7 +417,7 @@ export default function JsonValidator() {
417417
)}
418418
</div>
419419
) : (
420-
<div className="p-4 text-gray-500 h-full flex items-center justify-center">
420+
<div className="p-4 text-gray-500 dark:text-gray-400 h-full flex items-center justify-center">
421421
Enter JSON to validate and format
422422
</div>
423423
)}

‎src/components/JwtDebugger.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,10 +34,10 @@ export default function JwtDebugger() {
3434

3535
return (
3636
<div className="max-w-4xl">
37-
<h2 className="text-2xl font-bold mb-6">JWT Debugger</h2>
37+
<h2 className="text-2xl font-bold dark:text-white mb-6">JWT Debugger</h2>
3838
<div className="space-y-6">
3939
<div className="space-y-2">
40-
<label className="block text-sm font-medium text-gray-700">JWT Token</label>
40+
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300">JWT Token</label>
4141
<textarea
4242
value={jwt}
4343
onChange={(e) => setJwt(e.target.value)}
@@ -57,19 +57,19 @@ export default function JwtDebugger() {
5757
{decoded && (
5858
<div className="space-y-6">
5959
<div className="space-y-2">
60-
<h3 className="text-lg font-medium text-gray-900">Header</h3>
60+
<h3 className="text-lg font-medium text-gray-900 dark:text-white">Header</h3>
6161
<pre className="w-full p-4 bg-gray-50 rounded-md overflow-auto">
6262
{JSON.stringify(decoded.header, null, 2)}
6363
</pre>
6464
</div>
6565
<div className="space-y-2">
66-
<h3 className="text-lg font-medium text-gray-900">Payload</h3>
66+
<h3 className="text-lg font-medium text-gray-900 dark:text-white">Payload</h3>
6767
<pre className="w-full p-4 bg-gray-50 rounded-md overflow-auto">
6868
{JSON.stringify(decoded.payload, null, 2)}
6969
</pre>
7070
</div>
7171
<div className="space-y-2">
72-
<h3 className="text-lg font-medium text-gray-900">Signature</h3>
72+
<h3 className="text-lg font-medium text-gray-900 dark:text-white">Signature</h3>
7373
<pre className="w-full p-4 bg-gray-50 rounded-md overflow-auto">
7474
{decoded.signature}
7575
</pre>

0 commit comments

Comments
 (0)