# 🎨 Theme Customization

This guide explains how to customize the appearance of the Acode AI CLI Assistant Plugin to match your preferences and workflow.

## 🎯 Overview

The plugin features a beautiful galaxy-themed interface that automatically adapts to your Acode theme settings while providing extensive customization options.

## 🌌 Default Themes

### Dark Mode (Default)
- Deep space background with cosmic effects
- Blue and purple accent colors
- High contrast text for comfortable night coding
- Animated starfield elements

### Light Mode
- Softened galaxy theme with light colors
- Reduced animation intensity
- Gentle gradients and subtle effects
- Optimized for daytime use

### Auto Mode
- Follows your system preference automatically
- Switches between light and dark based on system settings
- Maintains consistent user experience across devices

## 🎨 Customizing Colors

### CSS Variables
The plugin uses CSS variables for easy customization. You can modify:

```css
:root {
  --galaxy-primary: #0f0f1e;           /* Main background color */
  --galaxy-secondary: #1a1a2e;         /* Secondary background */
  --galaxy-accent: #16213e;            /* Accent background */
  --galaxy-star-blue: #00d4ff;         /* Blue star elements */
  --galaxy-star-purple: #9d4edd;       /* Purple star elements */
  --galaxy-star-pink: #ff006e;         /* Pink star elements */
  --galaxy-text-primary: #ffffff;     /* Primary text color */
  --galaxy-text-secondary: #b8b8ff;   /* Secondary text color */
  --galaxy-text-muted: #8892b0;       /* Muted text color */
  --galaxy-border: rgba(0, 212, 255, 0.3); /* Border color */
}
```

### Applying Custom Colors
1. Create a custom CSS file in your project
2. Override the CSS variables with your preferred colors
3. Load the CSS file in Acode settings

## 📐 UI Element Customization

### Chat Interface
- **Message bubbles**: Customize padding, border-radius, and colors
- **Input area**: Modify height, border, and background
- **Buttons**: Adjust size, shape, and hover effects

### Code Blocks
- **Syntax highlighting**: Adapt to your preferred color scheme
- **Copy buttons**: Customize position and appearance
- **Borders and shadows**: Modify visual effects

### Dialogs and Menus
- **Background colors**: Match your overall theme
- **Border styles**: Adjust thickness and color
- **Animation effects**: Customize transitions

## 📱 Responsive Design Customization

### Mobile Optimizations
```css
@media (max-width: 767px) {
  /* Adjustments for mobile devices */
  .chatTextarea {
    padding: 0.75rem;
    font-size: 0.9rem;
  }
  
  .sendBtn, .stopGenerationBtn {
    width: 42px;
    height: 42px;
  }
}
```

### Tablet Optimizations
```css
@media (min-width: 768px) and (max-width: 1024px) {
  /* Adjustments for tablets */
  .chatBox {
    padding: 1.25rem;
  }
}
```

### Desktop Optimizations
```css
@media (min-width: 1025px) {
  /* Adjustments for desktop use */
  .mainApp {
    max-width: 800px;
    margin: 0 auto;
  }
}
```

## ⚡ Animation Customization

### Disabling Animations
For better performance or accessibility:
```css
/* Disable all animations */
* {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}
```

### Custom Animation Speeds
```css
/* Faster animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Slower animations */
.streaming-cursor {
  animation: blink 2s infinite;
}
```

## 🎛️ Advanced Customization

### Custom Fonts
```css
#acode-ai-assistant {
  font-family: 'Your Preferred Font', 'SF Pro Display', 'Segoe UI', 'Roboto', sans-serif;
}

.chatTextarea {
  font-family: 'Your Preferred Font', monospace;
}
```

### Layout Adjustments
```css
/* Compact layout for smaller screens */
.compact-layout .chatBox {
  padding: 0.5rem;
}

.compact-layout .message {
  padding: 0.75rem;
  border-radius: 0.75rem;
}
```

### High Contrast Mode
```css
@media (prefers-contrast: high) {
  :root {
    --galaxy-border: #ffffff;
    --galaxy-text-muted: #cccccc;
  }
}
```

## 🛠️ Theme Implementation

### Creating a Custom Theme File
1. Create a new CSS file (e.g., `ai-assistant-theme.css`)
2. Add your customizations:
   ```css
   #acode-ai-assistant {
     --galaxy-primary: #your-color;
     --galaxy-star-blue: #your-color;
     /* Add more customizations */
   }
   ```
3. Save the file in your project directory

### Loading Custom Themes
1. Open Acode Settings
2. Navigate to Editor Settings → Custom CSS
3. Add your theme file to the custom CSS list
4. Restart Acode to apply changes

## 📈 Performance Considerations

### Animation Performance
- Complex animations may impact performance on older devices
- Consider disabling animations if experiencing lag
- Use hardware-accelerated CSS properties when possible

### Color Scheme Performance
- Dark themes generally consume less battery on OLED screens
- Light themes may be more readable in bright environments
- High contrast themes improve accessibility

## 🐛 Troubleshooting Theme Issues

### Common Problems

#### Theme Not Applying
- Ensure custom CSS is properly loaded in Acode
- Check that CSS selectors are specific enough
- Restart Acode to refresh theme application

#### Color Contrast Issues
- Some custom colors may reduce readability
- Test color combinations for accessibility
- Use online contrast checkers for WCAG compliance

#### Responsive Design Problems
- Custom breakpoints may conflict with default responsive behavior
- Test on different screen sizes
- Ensure mobile usability is maintained

### Theme Verification

To verify theme customizations are working:
1. Apply your custom CSS file
2. Restart Acode
3. Open the AI assistant
4. Check that colors and styles match your customization

## 💡 Best Practices

### Theme Design
1. Maintain readability with appropriate contrast
2. Consider accessibility guidelines
3. Test themes on different screen sizes
4. Use subtle animations to avoid distraction

### Color Selection
1. Choose colors that complement Acode's interface
2. Ensure text remains readable in all lighting conditions
3. Use consistent color schemes throughout the plugin
4. Consider colorblind-friendly palettes

### Performance Optimization
1. Minimize complex animations on mobile devices
2. Use efficient CSS properties
3. Test themes on various hardware configurations
4. Provide fallback styles for older browsers

## 📞 Getting Help

If you encounter issues with theme customization:
1. Check the [Common Issues](Common-Issues.md) documentation
2. Visit our [GitHub Issues](https://github.com/RenzMc/Acode-Plugin-AI-cli/issues) page
3. Join our [Discussions](https://github.com/RenzMc/Acode-Plugin-AI-cli/discussions) community for support

---

<div align="center">

[🏠 Home](Home.md) | [⬆ Back to Top](#-theme-customization) | [🔧 Performance Settings](Performance-Settings.md)

</div>