ui dark mode enhancements

.cursorrules

@@ -0,0 +1,134 @@
+# Project Overview
+
+bolt.diy (previously oTToDev) is an open-source AI-powered full-stack web development platform that allows users to choose different LLM providers for coding assistance. The project supports multiple AI providers including OpenAI, Anthropic, Ollama, OpenRouter, Gemini, LMStudio, Mistral, xAI, HuggingFace, DeepSeek, and Groq.
+
+# Personality
+
+- Professional and technically precise
+- Focus on best practices and clean code
+- Provide clear explanations for code changes
+- Maintain consistent code style with the existing codebase
+
+# Techstack
+
+- Framework: Remix
+- Runtime: Node.js (>=18.18.0)
+- Package Manager: pnpm
+- UI: React with TypeScript
+- Styling: UnoCSS
+- Development Environment: Vite
+- Testing: Vitest
+- Deployment: Cloudflare Pages
+- Containerization: Docker
+- Code Quality: ESLint, Prettier, TypeScript
+
+# our .env file
+
+- Follow .env.example for required environment variables
+- Keep API keys and sensitive data in .env.local
+- Never commit .env files (they are gitignored)
+
+# Error Fixing Process
+
+1. Identify the root cause through error messages and logs
+2. Check relevant components and dependencies
+3. Verify type safety and TypeScript compliance
+4. Test changes locally before committing
+5. Follow existing error handling patterns
+
+# Our Codebase
+
+- Main application code in /app directory
+- Components follow a modular structure
+- Server-side code in app/lib/.server
+- Client-side utilities in app/lib/
+- Type definitions in types/ directory
+- Documentation in docs/ directory
+
+# Current File Structure
+
+- /app - Main application code
+- /docs - Documentation
+- /functions - Serverless functions
+- /public - Static assets
+- /scripts - Build and utility scripts
+- /types - TypeScript definitions
+- /icons - SVG icons and assets
+
+# github upload process
+
+1. Follow conventional commit messages
+2. Run linting and tests before committing
+3. Create feature branches for new work
+4. Submit PRs with clear descriptions
+5. Ensure CI/CD checks pass
+
+# Important
+
+- Keep dependencies updated
+- Follow TypeScript strict mode
+- Maintain backward compatibility
+- Document API changes
+- Test cross-browser compatibility
+
+# comments
+
+- Use JSDoc for function documentation
+- Keep comments clear and concise
+- Document complex logic and business rules
+- Update comments when changing code
+- Remove redundant comments
+- Always write comments that are relevant to the code they describe
+- Ensure comments explain the "why" not just the "what"
+
+# code review
+
+- Check for type safety
+- Verify error handling
+- Ensure code follows project patterns
+- Look for performance implications
+- Validate accessibility standards
+
+# code writing
+
+- Follow TypeScript best practices
+- Use functional components for React
+- Implement proper error boundaries
+- Write testable code
+- Follow the DRY principle
+
+# code refactoring
+
+- Maintain backward compatibility
+- Update tests alongside changes
+- Document breaking changes
+- Follow the project's type system
+- Keep components modular and reusable
+
+# Development Process
+
+- Write 3 reasoning paragraphs before implementing solutions
+- Analyze the problem space thoroughly before jumping to conclusions
+- Consider all edge cases and potential impacts
+- Process tasks with a Senior Developer mindset
+- Continue working until the solution is complete and verified
+- Remember and consider the full commit/change history when working
+
+# Code Quality Guidelines
+
+- Fewer lines of code is better, but not at the expense of readability
+- Preserve existing comments and documentation
+- Add meaningful comments explaining complex logic or business rules
+- Follow the principle of "Clean Code, Clear Intent"
+- Balance between conciseness and maintainability
+- Think twice, code once - avoid premature optimization
+- Never add comments just for the sake of commenting - ensure they add value
+
+# Problem Solving Approach
+
+1. Understand the context fully before making changes
+2. Document your reasoning and assumptions
+3. Consider alternative approaches and their trade-offs
+4. Validate your solution against existing patterns
+5. Test thoroughly before considering work complete
+6. Review impact on related components

app/components/settings/debug/DebugTab.tsx

@@ -502,9 +502,10 @@ export default function DebugTab() {
           disabled={loading.systemInfo}
           className={classNames(
             'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
-            'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
-            'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
-            'focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2',
+            'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
+            'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
+            'text-bolt-elements-textPrimary dark:hover:text-purple-500',
+            'focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
             { 'opacity-50 cursor-not-allowed': loading.systemInfo },
           )}
         >
@@ -521,9 +522,10 @@ export default function DebugTab() {
           disabled={loading.performance}
           className={classNames(
             'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
-            'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
-            'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
-            'focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2',
+            'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
+            'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
+            'text-bolt-elements-textPrimary dark:hover:text-purple-500',
+            'focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
             { 'opacity-50 cursor-not-allowed': loading.performance },
           )}
         >
@@ -540,9 +542,10 @@ export default function DebugTab() {
           disabled={loading.errors}
           className={classNames(
             'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
-            'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
-            'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
-            'focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2',
+            'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
+            'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
+            'text-bolt-elements-textPrimary dark:hover:text-purple-500',
+            'focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
             { 'opacity-50 cursor-not-allowed': loading.errors },
           )}
         >
@@ -558,9 +561,10 @@ export default function DebugTab() {
           onClick={exportDebugInfo}
           className={classNames(
             'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
-            'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
-            'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
-            'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
+            'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
+            'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
+            'text-bolt-elements-textPrimary dark:hover:text-purple-500',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
           )}
         >
           <div className="i-ph:download w-4 h-4" />
@@ -604,8 +608,9 @@ export default function DebugTab() {
               onClick={handleLogSystemInfo}
               className={classNames(
                 'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
-                'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
-                'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
+                'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
+                'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
+                'text-bolt-elements-textPrimary dark:hover:text-purple-500',
                 'transition-colors duration-200',
               )}
             >
@@ -616,8 +621,9 @@ export default function DebugTab() {
               onClick={getSystemInfo}
               className={classNames(
                 'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
-                'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
-                'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
+                'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
+                'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
+                'text-bolt-elements-textPrimary dark:hover:text-purple-500',
                 'transition-colors duration-200',
                 { 'opacity-50 cursor-not-allowed': loading.systemInfo },
               )}
@@ -761,9 +767,10 @@ export default function DebugTab() {
             onClick={handleLogPerformance}
             className={classNames(
               'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
-              'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
-              'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
-              'transition-colors duration-200',
+              'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
+              'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
+              'text-bolt-elements-textPrimary dark:hover:text-purple-500',
+              'focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
               { 'opacity-50 cursor-not-allowed': loading.performance },
             )}
             disabled={loading.performance}
@@ -848,9 +855,10 @@ export default function DebugTab() {
             onClick={getWebAppInfo}
             className={classNames(
               'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
-              'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
-              'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
-              'transition-colors duration-200',
+              'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
+              'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
+              'text-bolt-elements-textPrimary dark:hover:text-purple-500',
+              'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
               { 'opacity-50 cursor-not-allowed': loading.webAppInfo },
             )}
             disabled={loading.webAppInfo}
@@ -924,9 +932,10 @@ export default function DebugTab() {
             onClick={checkErrors}
             className={classNames(
               'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
-              'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
-              'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
-              'transition-colors duration-200',
+              'bg-[#F5F5F5] hover:bg-purple-500/10 hover:text-purple-500',
+              'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20',
+              'text-bolt-elements-textPrimary dark:hover:text-purple-500',
+              'focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-[#0A0A0A]',
               { 'opacity-50 cursor-not-allowed': loading.errors },
             )}
             disabled={loading.errors}

app/components/settings/event-logs/EventLogsTab.tsx

@@ -307,7 +307,7 @@ export function EventLogsTab() {
               setShowLevelFilter(!showLevelFilter);
               setShowCategoryFilter(false);
             }}
-            className="flex items-center gap-2 px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            className="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-purple-500/10 dark:hover:bg-purple-500/20 hover:text-purple-500 dark:hover:text-purple-500 transition-colors"
           >
             <div
               className={classNames('text-sm', selectedLevelOption?.icon || 'i-ph:funnel')}
@@ -324,7 +324,7 @@ export function EventLogsTab() {
 
           {showLevelFilter && (
             <div className="absolute left-0 top-full mt-1 z-20">
-              <div className="p-1 rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+              <div className="p-1 rounded-lg shadow-lg bg-white dark:bg-[#1A1A1A] border border-[#E5E5E5] dark:border-[#333333]">
                 {logLevelOptions.map((option) => (
                   <button
                     key={option.value}
@@ -335,11 +335,11 @@ export function EventLogsTab() {
                     className={classNames(
                       'flex items-center gap-2 w-full px-3 py-1.5 rounded-md text-sm transition-colors',
                       option.value === selectedLevel
-                        ? 'bg-purple-100 dark:bg-purple-800/40 text-purple-900 dark:text-purple-200'
-                        : 'hover:bg-gray-100 dark:hover:bg-gray-700/50',
+                        ? 'bg-purple-500/10 dark:bg-purple-500/20 text-purple-500 dark:text-purple-500'
+                        : 'hover:bg-purple-500/10 dark:hover:bg-purple-500/20 hover:text-purple-500 dark:hover:text-purple-500',
                     )}
                   >
-                    <div className={classNames(option.icon, 'text-base', option.color)} />
+                    <div className={classNames(option.icon, 'text-base')} style={{ color: option.color }} />
                     <span>{option.label}</span>
                   </button>
                 ))}
@@ -357,7 +357,7 @@ export function EventLogsTab() {
               setShowCategoryFilter(!showCategoryFilter);
               setShowLevelFilter(false);
             }}
-            className="flex items-center gap-2 px-2 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+            className="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-purple-500/10 dark:hover:bg-purple-500/20 hover:text-purple-500 dark:hover:text-purple-500 transition-colors"
           >
             <div
               className={classNames('text-sm', selectedCategoryOption?.icon || 'i-ph:squares-four')}
@@ -376,7 +376,7 @@ export function EventLogsTab() {
 
           {showCategoryFilter && (
             <div className="absolute left-0 top-full mt-1 z-20">
-              <div className="p-1 rounded-lg shadow-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
+              <div className="p-1 rounded-lg shadow-lg bg-white dark:bg-[#1A1A1A] border border-[#E5E5E5] dark:border-[#333333]">
                 {logCategoryOptions.map((option) => (
                   <button
                     key={option.value}
@@ -387,11 +387,11 @@ export function EventLogsTab() {
                     className={classNames(
                       'flex items-center gap-2 w-full px-3 py-1.5 rounded-md text-sm transition-colors',
                       option.value === selectedCategory
-                        ? 'bg-purple-100 dark:bg-purple-800/40 text-purple-900 dark:text-purple-200'
-                        : 'hover:bg-gray-100 dark:hover:bg-gray-700/50',
+                        ? 'bg-purple-500/10 dark:bg-purple-500/20 text-purple-500 dark:text-purple-500'
+                        : 'hover:bg-purple-500/10 dark:hover:bg-purple-500/20 hover:text-purple-500 dark:hover:text-purple-500',
                     )}
                   >
-                    <div className={classNames(option.icon, 'text-base', option.color)} />
+                    <div className={classNames(option.icon, 'text-base')} style={{ color: option.color }} />
                     <span>{option.label}</span>
                   </button>
                 ))}

app/components/settings/providers/LocalProvidersTab.tsx

@@ -280,7 +280,13 @@ const LocalProvidersTab = () => {
               {provider.name === 'Ollama' && provider.settings.enabled && (
                 <motion.button
                   onClick={() => setShowOllamaUpdater(true)}
-                  className={classNames(settingsStyles.button.base, settingsStyles.button.secondary, 'ml-2')}
+                  className={classNames(
+                    settingsStyles.button.base,
+                    settingsStyles.button.secondary,
+                    'ml-2',
+                    'hover:bg-purple-500/10 hover:text-purple-500',
+                    'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20 dark:text-bolt-elements-textPrimary dark:hover:text-purple-500',
+                  )}
                   whileHover={{ scale: 1.02 }}
                   whileTap={{ scale: 0.98 }}
                 >

app/components/settings/providers/OllamaModelUpdater.tsx

@@ -218,7 +218,12 @@ export default function OllamaModelUpdater() {
         <motion.button
           onClick={handleBulkUpdate}
           disabled={isBulkUpdating}
-          className={classNames(settingsStyles.button.base, settingsStyles.button.primary)}
+          className={classNames(
+            settingsStyles.button.base,
+            settingsStyles.button.primary,
+            'hover:bg-purple-500/10 hover:text-purple-500',
+            'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
+          )}
           whileHover={{ scale: 1.02 }}
           whileTap={{ scale: 0.98 }}
         >
@@ -280,7 +285,12 @@ export default function OllamaModelUpdater() {
             <motion.button
               onClick={() => handleSingleUpdate(model.name)}
               disabled={model.status === 'updating'}
-              className={classNames(settingsStyles.button.base, settingsStyles.button.secondary)}
+              className={classNames(
+                settingsStyles.button.base,
+                settingsStyles.button.secondary,
+                'hover:bg-purple-500/10 hover:text-purple-500',
+                'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20 dark:text-bolt-elements-textPrimary dark:hover:text-purple-500',
+              )}
               whileHover={{ scale: 1.02 }}
               whileTap={{ scale: 0.98 }}
             >

app/components/settings/task-manager/TaskManagerTab.tsx

@@ -570,8 +570,10 @@ export default function TaskManagerTab() {
             onClick={updateProcesses}
             className={classNames(
               'flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
-              'bg-[#F5F5F5] dark:bg-[#1A1A1A] hover:bg-[#E5E5E5] dark:hover:bg-[#2A2A2A]',
-              'text-bolt-elements-textPrimary dark:text-bolt-elements-textPrimary',
+              'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+              'hover:bg-purple-500/10 hover:text-purple-500',
+              'dark:hover:bg-purple-500/20 dark:hover:text-purple-500',
+              'text-bolt-elements-textPrimary',
               'transition-colors duration-200',
               { 'opacity-50 cursor-not-allowed': loading.processes },
             )}