feat(ui): add professional light/dark theme system

amir0ff · amir0ff · commit c43e2c42deeb · 2025-09-03T17:26:53.000+02:00
- Implement theme toggle with localStorage persistence
- Add monochromatic black/white/gray color scheme
- Update all components for theme consistency
- Enhance tooltips and accessibility
diff --git a/frontend/src/components/StackConverter.tsx b/frontend/src/components/StackConverter.tsx
@@ -113,12 +113,12 @@ const StackConverter: React.FC = () => {
 
   return (
     <>
-      <Tooltip id="upload-tooltip" place="top" className="!z-50 !text-sm !rounded-lg !bg-gray-900 !text-white !px-3 !py-2" />
-      <Tooltip id="reset-tooltip" place="top" className="!z-50 !text-sm !rounded-lg !bg-gray-900 !text-white !px-3 !py-2" />
-      <Tooltip id="edit-tooltip" place="top" className="!z-50 !text-sm !rounded-lg !bg-gray-900 !text-white !px-3 !py-2" />
-      <Tooltip id="copy-tooltip" place="top" className="!z-50 !text-sm !rounded-lg !bg-gray-900 !text-white !px-3 !py-2" />
-      <Tooltip id="download-tooltip" place="top" className="!z-50 !text-sm !rounded-lg !bg-gray-900 !text-white !px-3 !py-2" />
-      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-blue-900 to-purple-900 p-4">
+      <Tooltip id="upload-tooltip" place="top" className="!z-50 !text-sm !rounded-lg !px-3 !py-2 tooltip-light dark:tooltip-dark" />
+      <Tooltip id="reset-tooltip" place="top" className="!z-50 !text-sm !rounded-lg !px-3 !py-2 tooltip-light dark:tooltip-dark" />
+      <Tooltip id="edit-tooltip" place="top" className="!z-50 !text-sm !rounded-lg !px-3 !py-2 tooltip-light dark:tooltip-dark" />
+      <Tooltip id="copy-tooltip" place="top" className="!z-50 !text-sm !rounded-lg !px-3 !py-2 tooltip-light dark:tooltip-dark" />
+      <Tooltip id="download-tooltip" place="top" className="!z-50 !text-sm !rounded-lg !px-3 !py-2 tooltip-light dark:tooltip-dark" />
+      <div className="min-h-screen bg-gradient-light dark:bg-gradient-dark p-4">
         <div className="max-w-7xl mx-auto">
           <Header />
           
diff --git a/frontend/src/components/constants.tsx b/frontend/src/components/constants.tsx
@@ -193,7 +193,7 @@ export class CounterComponent {
 const Counter = (props) => {
   const [count, setCount] = createSignal(props.initialValue || 0);
   const increment = () => setCount(count() + 1);
-  const decrement = () => setCount(count() - 1);
+  const decrement = () => setCount(count() + 1);
   return (
     <div class="counter">
       <h2>Counter: {count()}</h2>
@@ -230,18 +230,18 @@ export const features = [
     icon: '🧠',
     title: 'Smart Conversion',
     description: 'AI-powered analysis converts components, state management, and lifecycle methods intelligently.',
-    color: 'text-blue-400'
+    color: 'text-gray-600 dark:text-gray-400'
   },
   {
     icon: '⚡',
     title: 'Full Stack Support',
     description: 'Convert entire projects including build configs, routing, state management, and testing.',
-    color: 'text-green-400'
+    color: 'text-gray-600 dark:text-gray-400'
   },
   {
     icon: '🎯',
     title: 'Best Practices',
     description: 'Generated code follows framework conventions and modern best practices out of the box.',
-    color: 'text-purple-400'
+    color: 'text-gray-600 dark:text-gray-400'
   }
 ]; 
diff --git a/frontend/src/components/ui/CodePanel.tsx b/frontend/src/components/ui/CodePanel.tsx
@@ -147,18 +147,18 @@ const CodePanel: React.FC<CodePanelPropsWithTooltips> = ({
   };
 
   return (
-    <div className="bg-gray-800/30 backdrop-blur-sm rounded-2xl overflow-hidden border border-gray-700 flex flex-col h-full">
-      <div className="bg-gray-700/50 px-6 py-4 border-b border-gray-600 flex items-center justify-between">
-        <h3 className="text-white font-semibold text-lg flex items-center gap-2">
+    <div className="bg-card border border-border rounded-2xl overflow-hidden shadow-sm flex flex-col h-full">
+      <div className="bg-muted/50 px-6 py-4 border-b border-border flex items-center justify-between">
+        <h3 className="text-card-foreground font-semibold text-lg flex items-center gap-2">
           {title}
           {!isConverting && (
             <>
-              <span className="text-gray-300">{selectedStack?.icon}</span>
+              <span className="text-muted-foreground">{selectedStack?.icon}</span>
               <span>{selectedStack?.label}</span>
             </>
           )}
           {isEditable && isEditing && (
-            <span className="text-xs bg-blue-600 text-white px-2 py-1 rounded-full">
+            <span className="text-xs bg-slate-600 dark:bg-slate-400 text-white dark:text-slate-900 px-2 py-1 rounded-full">
               Editing
             </span>
           )}
@@ -170,8 +170,8 @@ const CodePanel: React.FC<CodePanelPropsWithTooltips> = ({
               onClick={toggleEditMode}
               className={`transition-colors ${
                 effectiveDisableEdit
-                  ? 'text-gray-600 cursor-not-allowed' 
-                  : 'text-gray-400 hover:text-white'
+                  ? 'text-muted-foreground/50 cursor-not-allowed' 
+                  : 'text-muted-foreground hover:text-card-foreground'
               }`}
               disabled={!!effectiveDisableEdit}
               data-tooltip-id="edit-tooltip"
@@ -194,8 +194,8 @@ const CodePanel: React.FC<CodePanelPropsWithTooltips> = ({
                 onClick={onFileUpload}
                 className={`transition-colors ${
                   isUploading || uploadDisabled 
-                    ? 'text-gray-600 cursor-not-allowed' 
-                    : 'text-gray-400 hover:text-white'
+                    ? 'text-muted-foreground/50 cursor-not-allowed' 
+                    : 'text-muted-foreground hover:text-card-foreground'
                 }`}
                 disabled={isUploading || uploadDisabled}
                 data-tooltip-id="upload-tooltip"
@@ -211,8 +211,8 @@ const CodePanel: React.FC<CodePanelPropsWithTooltips> = ({
               onClick={onReset}
               className={`transition-colors ${
                 disableEdit 
-                  ? 'text-gray-600 cursor-not-allowed' 
-                  : 'text-gray-400 hover:text-white'
+                  ? 'text-muted-foreground/50 cursor-not-allowed' 
+                  : 'text-muted-foreground hover:text-card-foreground'
               }`}
               disabled={disableEdit}
               data-tooltip-id="reset-tooltip"
@@ -225,7 +225,7 @@ const CodePanel: React.FC<CodePanelPropsWithTooltips> = ({
           {code && !isConverting && onCopy && (
             <button 
               onClick={handleCopyToClipboard}
-              className="text-gray-400 hover:text-white transition-colors"
+              className="text-muted-foreground hover:text-card-foreground transition-colors"
               data-tooltip-id="copy-tooltip"
               data-tooltip-content="Copy to clipboard"
             >
@@ -235,7 +235,7 @@ const CodePanel: React.FC<CodePanelPropsWithTooltips> = ({
           {code && !isConverting && onDownload && (
             <button
               onClick={handleDownload}
-              className="text-gray-400 hover:text-white transition-colors"
+              className="text-muted-foreground hover:text-card-foreground transition-colors"
               data-tooltip-id="download-tooltip"
               data-tooltip-content="Download converted code"
             >
@@ -247,18 +247,18 @@ const CodePanel: React.FC<CodePanelPropsWithTooltips> = ({
       
       <div className="relative flex-1 h-full min-h-[20rem]">
         {isConverting ? (
-          <div className="p-6 bg-gray-800/30 backdrop-blur-sm rounded-2xl">
+          <div className="p-6 bg-muted/30">
             <Skeleton
               count={16}
               height={18}
               style={{ marginBottom: 6, borderRadius: 3 }}
-              baseColor="rgba(30,41,59,0.6)"
-              highlightColor="rgba(59,130,246,0.15)"
+              baseColor="hsl(var(--muted))"
+              highlightColor="hsl(var(--accent))"
             />
           </div>
         ) : isUploading || isDetectingStack ? (
-          <div className="px-6 py-8 flex flex-col items-center justify-center text-blue-300 text-sm min-h-[20rem]">
-            <Loader2 className="h-10 w-10 mb-2 text-blue-400 animate-spin" />
+          <div className="px-6 py-8 flex flex-col items-center justify-center text-primary text-sm min-h-[20rem]">
+            <Loader2 className="h-10 w-10 mb-2 text-primary animate-spin" />
             <div>{isUploading ? 'Uploading file...' : 'Detecting stack...'}</div>
           </div>
         ) : uploadedFile && (
@@ -270,7 +270,7 @@ const CodePanel: React.FC<CodePanelPropsWithTooltips> = ({
                   ref={textareaRef}
                   value={safeCode}
                   onChange={handleCodeChange}
-                  className="w-full h-full min-h-[20rem] bg-gray-900/50 text-gray-100 font-mono text-sm leading-relaxed p-4 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none resize-none"
+                  className="w-full h-full min-h-[20rem] bg-muted/50 text-card-foreground font-mono text-sm leading-relaxed p-4 rounded-lg border border-border focus:border-ring focus:outline-none resize-none"
                   style={{ fontSize: 14 }}
                   placeholder={`// Enter your ${stack} code here...\n// You can edit this code directly and then convert it to another framework`}
                   spellCheck={false}
@@ -288,21 +288,21 @@ const CodePanel: React.FC<CodePanelPropsWithTooltips> = ({
             )
           ) : (
             // Otherwise, show batch upload UI (zip)
-          <div className="px-6 py-8 flex flex-col items-center justify-center text-blue-300 text-sm min-h-[20rem]">
-            <Upload className="h-10 w-10 mb-2 text-blue-400" />
+          <div className="px-6 py-8 flex flex-col items-center justify-center text-primary text-sm min-h-[20rem]">
+            <Upload className="h-10 w-10 mb-2 text-primary" />
             <div className="mb-2">
               <strong>Uploaded file:</strong> {uploadedFile.name} ({(uploadedFile.size / 1024).toFixed(1)} KB)
             </div>
             <div className="mb-4">Ready for batch conversion.</div>
             {uploadMessage && (
-              <div className={uploadMessage.includes('success') ? 'text-green-400 mb-2' : 'text-red-400 mb-2'}>
+              <div className={uploadMessage.includes('success') ? 'text-emerald-600 dark:text-emerald-400 mb-2' : 'text-red-600 dark:text-red-400 mb-2'}>
                 {uploadMessage}
               </div>
             )}
             {onRemoveFile && (
               <button
                 onClick={onRemoveFile}
-                className="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded transition-colors"
+                className="bg-secondary hover:bg-secondary/80 text-secondary-foreground px-4 py-2 rounded transition-colors"
                 disabled={isUploading}
               >
                 Remove File
@@ -319,7 +319,7 @@ const CodePanel: React.FC<CodePanelPropsWithTooltips> = ({
                   ref={textareaRef}
                   value={safeCode}
                   onChange={handleCodeChange}
-                  className="w-full h-full min-h-[20rem] bg-gray-900/50 text-gray-100 font-mono text-sm leading-relaxed p-4 rounded-lg border border-gray-600 focus:border-blue-500 focus:outline-none resize-none"
+                  className="w-full h-full min-h-[20rem] bg-muted/50 text-card-foreground font-mono text-sm leading-relaxed p-4 rounded-lg border border-border focus:border-ring focus:outline-none resize-none"
                   style={{ fontSize: 12 }}
                   placeholder={`// Enter your ${stack} code here...\n// You can edit this code directly and then convert it to another framework`}
                   spellCheck={false}
@@ -336,7 +336,7 @@ const CodePanel: React.FC<CodePanelPropsWithTooltips> = ({
               </SyntaxHighlighter>
             )}
             {safeShowEmptyState && !code && (
-              <div className="absolute inset-0 h-full w-full flex items-center justify-center text-gray-500 pointer-events-none">
+              <div className="absolute inset-0 h-full w-full flex items-center justify-center text-muted-foreground pointer-events-none">
                 <div className="text-center">
                   {emptyStateIcon}
                   <p>{emptyStateMessage}</p>
diff --git a/frontend/src/components/ui/ConvertButton.tsx b/frontend/src/components/ui/ConvertButton.tsx
@@ -12,7 +12,7 @@ const ConvertButton: React.FC<ConvertButtonProps> = ({
       <button 
         onClick={onClick}
         disabled={disabled}
-        className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 disabled:from-gray-500 disabled:to-gray-600 text-white font-bold py-4 px-8 rounded-2xl text-lg transition-all duration-200 transform hover:scale-105 disabled:scale-100 shadow-lg flex items-center space-x-2"
+        className="bg-gradient-to-r from-gray-800 to-black dark:from-gray-200 dark:to-white hover:from-gray-900 hover:to-gray-800 dark:hover:from-gray-100 dark:hover:to-gray-200 disabled:from-gray-400 disabled:to-gray-500 text-white dark:text-black font-bold py-4 px-8 rounded-2xl text-lg transition-all duration-200 transform hover:scale-105 disabled:scale-100 shadow-lg flex items-center space-x-2 disabled:cursor-not-allowed"
       >
         {isConverting ? (
           <>
diff --git a/frontend/src/components/ui/ErrorBanner.tsx b/frontend/src/components/ui/ErrorBanner.tsx
@@ -6,12 +6,12 @@ const ErrorBanner: React.FC<ErrorBannerProps> = ({ error, onDismiss }) => {
   if (!error) return null;
 
   return (
-    <div className="max-w-2xl mx-auto mb-4 flex items-center bg-red-600/90 text-white px-4 py-3 rounded-lg shadow-lg">
+    <div className="max-w-2xl mx-auto mb-4 flex items-center bg-red-500/90 dark:bg-red-600/90 text-white px-4 py-3 rounded-lg shadow-lg border border-red-600 dark:border-red-700">
       <XCircle className="mr-2 h-5 w-5" />
       <span className="flex-1">{error}</span>
       <button 
         onClick={onDismiss} 
-        className="ml-4 text-white hover:text-gray-200 focus:outline-none"
+        className="ml-4 text-white hover:text-red-100 focus:outline-none focus:ring-2 focus:ring-red-300 rounded"
       >
         ✕
       </button>
diff --git a/frontend/src/components/ui/FeaturesSection.tsx b/frontend/src/components/ui/FeaturesSection.tsx
@@ -5,10 +5,10 @@ const FeaturesSection: React.FC<FeaturesSectionProps> = ({ features }) => {
   return (
     <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
       {features.map((feature, index) => (
-        <div key={index} className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-gray-700">
+        <div key={index} className="bg-card border border-border rounded-xl p-6 shadow-sm">
           <div className={`text-2xl mb-4 ${feature.color}`}>{feature.icon}</div>
-          <h3 className="text-white font-semibold mb-2">{feature.title}</h3>
-          <p className="text-gray-300 text-sm">{feature.description}</p>
+          <h3 className="text-card-foreground font-semibold mb-2">{feature.title}</h3>
+          <p className="text-muted-foreground text-sm">{feature.description}</p>
         </div>
       ))}
     </div>
diff --git a/frontend/src/components/ui/Header.tsx b/frontend/src/components/ui/Header.tsx
@@ -1,17 +1,21 @@
 import React from 'react';
 import { Zap } from 'lucide-react';
+import ThemeToggle from './ThemeToggle';
 
 const Header: React.FC = () => {
   return (
     <div className="text-center mb-8">
-      <div className="flex items-center justify-center mb-4">
-        <div className="bg-white/10 backdrop-blur-sm rounded-2xl p-3 mr-4">
-          <Zap className="h-8 w-8 text-yellow-400" />
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center justify-center flex-1">
+          <div className="bg-gradient-to-br from-amber-50 to-yellow-50 dark:from-amber-900/20 dark:to-yellow-900/20 rounded-2xl p-3 mr-4 border border-amber-200 dark:border-amber-800/30">
+            <Zap className="h-8 w-8 text-yellow-400 dark:text-yellow-300" />
+          </div>
+          <h1 className="text-4xl font-bold text-foreground">StackConverter</h1>
         </div>
-        <h1 className="text-4xl font-bold text-white">StackConverter</h1>
+        <ThemeToggle />
       </div>
-      <p className="text-gray-300 text-md">Multi-Framework AI Codebase Converter</p>
-      <div className="mt-2 px-4 py-2 bg-blue-500/20 rounded-full text-blue-300 text-sm inline-block">
+      <p className="text-muted-foreground text-md">Multi-Framework AI Codebase Converter</p>
+      <div className="mt-2 px-4 py-2 bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 rounded-full text-gray-700 dark:text-gray-300 text-sm inline-block border border-gray-300 dark:border-gray-600">
         🚀 Transform your entire codebase between different tech stacks
       </div>
     </div>
diff --git a/frontend/src/components/ui/StackSelection.tsx b/frontend/src/components/ui/StackSelection.tsx
@@ -40,8 +40,8 @@ const StackSelection: React.FC<StackSelectionProps> = ({
         )}
       </div>
       
-      <div className="bg-white/10 backdrop-blur-sm rounded-full p-3">
-        <ArrowRight className="h-6 w-6 text-white" />
+      <div className="bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700 backdrop-blur-sm rounded-full p-3 border border-gray-300 dark:border-gray-600">
+        <ArrowRight className="h-6 w-6 text-gray-600 dark:text-gray-400" />
       </div>
       
       <StackSelector
diff --git a/frontend/src/components/ui/StackSelector.tsx b/frontend/src/components/ui/StackSelector.tsx
@@ -16,18 +16,18 @@ const StackSelector: React.FC<StackSelectorProps> = ({
         value={value} 
         onChange={onChange}
         disabled={disabled}
-        className="appearance-none bg-gray-800/50 backdrop-blur-sm border border-gray-600 rounded-xl px-6 py-3 text-white text-lg font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent pr-12 pl-12"
+        className="appearance-none bg-card border border-border rounded-xl px-6 py-3 text-card-foreground text-lg font-medium focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent pr-12 pl-12 disabled:opacity-50 disabled:cursor-not-allowed"
       >
         {stackOptions.map(option => (
           <option key={option.value} value={option.value}>
             {option.label}
           </option>
         ))}
       </select>
-      <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-300">
+      <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground">
         {selectedStack?.icon}
       </div>
-      <FileCode className="absolute right-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400 pointer-events-none" />
+      <FileCode className="absolute right-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground pointer-events-none" />
     </div>
   );
 };
diff --git a/frontend/src/components/ui/ThemeToggle.tsx b/frontend/src/components/ui/ThemeToggle.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Sun, Moon } from 'lucide-react';
+import { useTheme } from '../../contexts/ThemeContext';
+
+const ThemeToggle: React.FC = () => {
+  const { theme, toggleTheme } = useTheme();
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="inline-flex items-center justify-center rounded-lg text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background h-10 w-10 hover:bg-accent hover:text-accent-foreground border border-border bg-card/50 backdrop-blur-sm"
+      aria-label="Toggle theme"
+    >
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all duration-200 dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all duration-200 dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </button>
+  );
+};
+
+export default ThemeToggle;
diff --git a/frontend/src/contexts/ThemeContext.tsx b/frontend/src/contexts/ThemeContext.tsx
diff --git a/frontend/src/index.css b/frontend/src/index.css
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ const ConvertButton: React.FC<ConvertButtonProps> = ({`
`12`	`12`	`<button`
`13`	`13`	`onClick={onClick}`
`14`	`14`	`disabled={disabled}`
`15`		`- className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 disabled:from-gray-500 disabled:to-gray-600 text-white font-bold py-4 px-8 rounded-2xl text-lg transition-all duration-200 transform hover:scale-105 disabled:scale-100 shadow-lg flex items-center space-x-2"`
	`15`	`+ className="bg-gradient-to-r from-gray-800 to-black dark:from-gray-200 dark:to-white hover:from-gray-900 hover:to-gray-800 dark:hover:from-gray-100 dark:hover:to-gray-200 disabled:from-gray-400 disabled:to-gray-500 text-white dark:text-black font-bold py-4 px-8 rounded-2xl text-lg transition-all duration-200 transform hover:scale-105 disabled:scale-100 shadow-lg flex items-center space-x-2 disabled:cursor-not-allowed"`
`16`	`16`	`>`
`17`	`17`	`{isConverting ? (`
`18`	`18`	`<>`