Theme Customization

🎨 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:

: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

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

Tablet Optimizations

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

Desktop Optimizations

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

⚡ Animation Customization

Disabling Animations

For better performance or accessibility:

/* Disable all animations */
* {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

Custom Animation Speeds

/* 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

#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

/* Compact layout for smaller screens */
.compact-layout .chatBox {
  padding: 0.5rem;
}

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

High Contrast Mode

@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:

   #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 documentation
2. Visit our GitHub Issues page
3. Join our Discussions community for support

---

🏠 Home | ⬆ Back to Top | 🔧 Performance Settings