feat: Improve UI components with comprehensive dark mode styling

- Enhanced text areas with dark backgrounds, borders, and focus states
- Improved buttons with consistent dark mode hover and active states
- Updated inputs with proper dark backgrounds and placeholder styling
- Enhanced select dropdowns with dark theme support
- Improved checkboxes with dark mode colors and focus rings
- Added dark mode support for file inputs and action groups
- Applied consistent error state styling across components
- Improved toggle button groups with proper active/inactive states

Components updated:
- TextAreaWithCopy: Copy button states and textarea styling
- StringCaseConverter: Main textarea and readonly result inputs
- UnixTimeConverter: Number and datetime inputs
- NumberBaseConverter: Input, select, and readonly outputs
- BackslashEncoder: Toggle buttons and textareas
- Base64ImageEncoder: File input and output textarea
- JsonValidator: Sample buttons and large JSON textarea
- JsonToCsv: Checkboxes, select dropdowns, and view mode toggles

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Nadim Tuhin <nadimtuhin@users.noreply.github.com>

Author: claude[bot]

src/components/BackslashEncoder.tsx

@@ -48,20 +48,20 @@ export default function BackslashEncoder() {
         <div className="flex space-x-4">
           <button
             onClick={() => setMode('encode')}
-            className={`px-4 py-2 rounded-md ${
+            className={`px-4 py-2 rounded-md transition-colors ${
               mode === 'encode'
-                ? 'bg-blue-600 text-white'
-                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                ? 'bg-blue-600 dark:bg-blue-500 text-white hover:bg-blue-700 dark:hover:bg-blue-400'
+                : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
             }`}
           >
             Encode
           </button>
           <button
             onClick={() => setMode('decode')}
-            className={`px-4 py-2 rounded-md ${
+            className={`px-4 py-2 rounded-md transition-colors ${
               mode === 'decode'
-                ? 'bg-blue-600 text-white'
-                : 'bg-gray-200 text-gray-700 hover:bg-gray-300'
+                ? 'bg-blue-600 dark:bg-blue-500 text-white hover:bg-blue-700 dark:hover:bg-blue-400'
+                : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
             }`}
           >
             Decode
@@ -72,13 +72,13 @@ export default function BackslashEncoder() {
           <textarea
             value={input}
             onChange={(e) => setInput(e.target.value)}
-            className="w-full h-32 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 font-mono"
+            className="w-full h-32 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 font-mono bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
             placeholder={mode === 'encode' ? 'Enter text to escape...' : 'Enter escaped text to unescape...'}
           />
         </div>
         <button
           onClick={handleConvert}
-          className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+          className="px-4 py-2 bg-blue-600 dark:bg-blue-500 text-white rounded-md hover:bg-blue-700 dark:hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition-colors"
         >
           Convert
         </button>
@@ -87,7 +87,7 @@ export default function BackslashEncoder() {
           <textarea
             value={output}
             readOnly
-            className="w-full h-32 px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50 font-mono"
+            className="w-full h-32 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-50 dark:bg-gray-700 font-mono text-gray-900 dark:text-gray-100"
           />
         </div>
       </div>

src/components/Base64ImageEncoder.tsx

@@ -34,9 +34,9 @@ export default function Base64ImageEncoder() {
             type="file"
             accept="image/*"
             onChange={handleFileChange}
-            className="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"
+            className="block w-full text-sm text-gray-500 dark:text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 dark:file:bg-blue-900 file:text-blue-700 dark:file:text-blue-300 hover:file:bg-blue-100 dark:hover:file:bg-blue-800 transition-colors"
           />
-          {error && <p className="text-red-500 text-sm">{error}</p>}
+          {error && <p className="text-red-500 dark:text-red-400 text-sm">{error}</p>}
         </div>
 
         {imageBase64 && (
@@ -46,15 +46,15 @@ export default function Base64ImageEncoder() {
               <img
                 src={imageBase64}
                 alt="Preview"
-                className="max-w-full h-auto border rounded-md"
+                className="max-w-full h-auto border border-gray-300 dark:border-gray-600 rounded-md"
               />
             </div>
             <div className="space-y-2">
               <label className="block text-sm font-medium text-gray-700 dark:text-gray-300">Base64 Output</label>
               <textarea
                 value={imageBase64}
                 readOnly
-                className="w-full h-32 px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50 font-mono text-sm"
+                className="w-full h-32 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-50 dark:bg-gray-700 font-mono text-sm text-gray-900 dark:text-gray-100"
               />
             </div>
           </>

src/components/JsonToCsv.tsx

@@ -222,11 +222,11 @@ export default function JsonToCsv() {
         {showOptions && (
           <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4">
             <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">Delimiter</label>
+              <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Delimiter</label>
               <select
                 value={options.delimiter}
                 onChange={(e) => setOptions({...options, delimiter: e.target.value})}
-                className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500"
+                className="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
               >
                 <option value=",">Comma (,)</option>
                 <option value=";">Semicolon (;)</option>
@@ -236,12 +236,12 @@ export default function JsonToCsv() {
             </div>
 
             <div>
-              <label className="block text-xs font-medium text-gray-700 mb-1">Array Delimiter</label>
+              <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Array Delimiter</label>
               <input
                 type="text"
                 value={options.arrayDelimiter}
                 onChange={(e) => setOptions({...options, arrayDelimiter: e.target.value})}
-                className="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:ring-blue-500 focus:border-blue-500"
+                className="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
                 placeholder=";"
               />
             </div>
@@ -252,9 +252,9 @@ export default function JsonToCsv() {
                   type="checkbox"
                   checked={options.header}
                   onChange={(e) => setOptions({...options, header: e.target.checked})}
-                  className="mr-2"
+                  className="mr-2 text-blue-600 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800"
                 />
-                <span className="text-xs">Include Headers</span>
+                <span className="text-xs text-gray-700 dark:text-gray-300">Include Headers</span>
               </label>
             </div>
 
@@ -264,9 +264,9 @@ export default function JsonToCsv() {
                   type="checkbox"
                   checked={options.quotes}
                   onChange={(e) => setOptions({...options, quotes: e.target.checked})}
-                  className="mr-2"
+                  className="mr-2 text-blue-600 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800"
                 />
-                <span className="text-xs">Quote Fields</span>
+                <span className="text-xs text-gray-700 dark:text-gray-300">Quote Fields</span>
               </label>
             </div>
 
@@ -276,9 +276,9 @@ export default function JsonToCsv() {
                   type="checkbox"
                   checked={options.flattenObjects}
                   onChange={(e) => setOptions({...options, flattenObjects: e.target.checked})}
-                  className="mr-2"
+                  className="mr-2 text-blue-600 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800"
                 />
-                <span className="text-xs">Flatten Objects</span>
+                <span className="text-xs text-gray-700 dark:text-gray-300">Flatten Objects</span>
               </label>
             </div>
           </div>
@@ -290,7 +290,7 @@ export default function JsonToCsv() {
         <button
           type="button"
           onClick={loadSampleData}
-          className="flex items-center space-x-2 px-3 py-2 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200"
+          className="flex items-center space-x-2 px-3 py-2 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
         >
           <FileText size={16} />
           <span>Load Sample</span>
@@ -299,7 +299,7 @@ export default function JsonToCsv() {
         <button
           type="button"
           onClick={() => fileInputRef.current?.click()}
-          className="flex items-center space-x-2 px-3 py-2 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200"
+          className="flex items-center space-x-2 px-3 py-2 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
         >
           <Upload size={16} />
           <span>Upload File</span>
@@ -308,7 +308,7 @@ export default function JsonToCsv() {
         <button
           type="button"
           onClick={clearInput}
-          className="flex items-center space-x-2 px-3 py-2 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200"
+          className="flex items-center space-x-2 px-3 py-2 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-md hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
         >
           <RefreshCw size={16} />
           <span>Clear</span>
@@ -359,10 +359,10 @@ export default function JsonToCsv() {
                     <button
                       type="button"
                       onClick={() => setViewMode('text')}
-                      className={`flex items-center space-x-1 px-2 py-1 text-xs rounded ${
+                      className={`flex items-center space-x-1 px-2 py-1 text-xs rounded transition-colors ${
                         viewMode === 'text' 
-                          ? 'bg-white text-gray-900 shadow-sm' 
-                          : 'text-gray-600 hover:text-gray-900'
+                          ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm' 
+                          : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
                       }`}
                       title="Text view"
                     >
@@ -372,10 +372,10 @@ export default function JsonToCsv() {
                     <button
                       type="button"
                       onClick={() => setViewMode('table')}
-                      className={`flex items-center space-x-1 px-2 py-1 text-xs rounded ${
+                      className={`flex items-center space-x-1 px-2 py-1 text-xs rounded transition-colors ${
                         viewMode === 'table' 
-                          ? 'bg-white text-gray-900 shadow-sm' 
-                          : 'text-gray-600 hover:text-gray-900'
+                          ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm' 
+                          : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
                       }`}
                       title="Table view"
                     >

src/components/JsonValidator.tsx

@@ -300,7 +300,7 @@ export default function JsonValidator() {
               <button
                 type="button"
                 onClick={() => loadSample('simple')}
-                className="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded flex items-center space-x-1"
+                className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded flex items-center space-x-1 text-gray-700 dark:text-gray-300 transition-colors"
                 title="Load simple JSON sample"
               >
                 <FileText size={12} />
@@ -309,7 +309,7 @@ export default function JsonValidator() {
               <button
                 type="button"
                 onClick={() => loadSample('complex')}
-                className="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded flex items-center space-x-1"
+                className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded flex items-center space-x-1 text-gray-700 dark:text-gray-300 transition-colors"
                 title="Load complex JSON sample"
               >
                 <FileText size={12} />
@@ -318,7 +318,7 @@ export default function JsonValidator() {
               <button
                 type="button"
                 onClick={() => loadSample('api')}
-                className="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded flex items-center space-x-1"
+                className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded flex items-center space-x-1 text-gray-700 dark:text-gray-300 transition-colors"
                 title="Load API response sample"
               >
                 <FileText size={12} />
@@ -331,11 +331,11 @@ export default function JsonValidator() {
               ref={textareaRef}
               value={input}
               onChange={(e) => setInput(e.target.value)}
-              className="w-full min-h-[400px] h-[calc(100vh-180px)] px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 font-mono text-sm resize-none"
+              className="w-full h-96 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 font-mono text-sm resize-none bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
               placeholder="Paste your JSON here or click a sample button above..."
             />
             {error && (
-              <div className="absolute bottom-2 left-2 right-2 bg-red-50 border border-red-200 rounded px-2 py-1 text-red-600 text-xs">
+              <div className="absolute bottom-2 left-2 right-2 bg-red-50 dark:bg-red-900/50 border border-red-200 dark:border-red-700 rounded px-2 py-1 text-red-600 dark:text-red-400 text-xs">
                 {error}
               </div>
             )}
@@ -354,7 +354,7 @@ export default function JsonValidator() {
                   <button
                     type="button"
                     onClick={() => setShowLineNumbers(!showLineNumbers)}
-                    className="px-2 py-1 text-xs bg-gray-100 hover:bg-gray-200 rounded flex items-center space-x-1"
+                    className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded flex items-center space-x-1 text-gray-700 dark:text-gray-300 transition-colors"
                     title="Toggle line numbers"
                   >
                     {showLineNumbers ? <EyeOff size={12} /> : <Eye size={12} />}
@@ -398,7 +398,7 @@ export default function JsonValidator() {
             </div>
           </div>
 
-          <div className="border border-gray-300 rounded-md min-h-[400px] h-[calc(100vh-180px)] overflow-hidden">
+          <div className="border border-gray-300 rounded-md h-96 overflow-hidden">
             {error ? (
               <div className="p-4 text-red-600 bg-red-50 h-full">
                 <div className="font-semibold mb-2">JSON Validation Error:</div>

src/components/NumberBaseConverter.tsx

@@ -52,7 +52,7 @@ export default function NumberBaseConverter() {
               type="text"
               value={input}
               onChange={(e) => handleInputChange(e.target.value)}
-              className="flex-1 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 font-mono"
+              className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 font-mono bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400"
               placeholder="Enter a number..."
             />
             <select
@@ -61,7 +61,7 @@ export default function NumberBaseConverter() {
                 setFromBase(Number(e.target.value));
                 setError('');
               }}
-              className="px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500"
+              className="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400 dark:focus:border-blue-400 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100"
             >
               {bases.map((base) => (
                 <option key={base.value} value={base.value}>
@@ -70,7 +70,7 @@ export default function NumberBaseConverter() {
               ))}
             </select>
           </div>
-          {error && <p className="text-red-500 text-sm">{error}</p>}
+          {error && <p className="text-red-500 dark:text-red-400 text-sm">{error}</p>}
         </div>
         <div className="grid grid-cols-2 gap-4">
           {bases.map((base) => (
@@ -80,7 +80,7 @@ export default function NumberBaseConverter() {
                 type="text"
                 value={base.value === fromBase ? input : convert(base.value)}
                 readOnly
-                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm bg-gray-50 font-mono"
+                className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-gray-50 dark:bg-gray-700 font-mono text-gray-900 dark:text-gray-100"
               />
             </div>
           ))}