Customization

Overview

Customization settings allow you to personalize the application's appearance through custom CSS styles, making your experience more aligned with your personal preferences.

Custom CSS

You can modify the interface appearance by writing custom CSS rules, including colors, fonts, button styles, and more.

How to Use

button {
  background: red;
  color: white;
}

.my-class {
  font-size: 16px;
}

:root {
  --ui-accent: #8e47f0;
}

CSS Customization Examples

Modify Button Styles

button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 8px;
  padding: 10px 20px;
  border: none;
}

Modify Theme Colors

:root {
  --ui-accent: #8e47f0;
  --ui-primary: #667eea;
  --ui-background: #f5f5f5;
}

Custom Fonts

body {
  font-family: "Segoe UI", "Roboto", sans-serif;
  font-size: 14px;
}

.chat-message {
  font-size: 16px;
  line-height: 1.6;
}

Modify Interface Elements

.sidebar {
  background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
}

.card {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

Tips and Tricks

CSS Variables

The application supports CSS variables for unified style management:

:root {
  --primary-color: #8e47f0;
  --secondary-color: #667eea;
  --text-color: #333333;
  --border-radius: 8px;
}

button {
  background: var(--primary-color);
  border-radius: var(--border-radius);
  color: white;
}

Targeting Specific Elements

Use class names or IDs to target specific elements for styling:

.chat-input {
  border: 2px solid #8e47f0;
  border-radius: 10px;
}

#message-box {
  background: #f8f9fa;
}

Responsive Design

You can also add media queries for responsive design:

@media (max-width: 768px) {
  .sidebar {
    width: 100%;
  }
  
  button {
    font-size: 14px;
  }
}

Reset Styles

To restore default styles:

1. Clear all content in the CSS text box
2. Click the "Reset" button
3. Styles will revert to system defaults

Important Notes

CSS Priority

• Custom CSS has higher priority and will override default styles
• Using !important can further increase priority but should be used sparingly
• It's recommended to use specific selectors rather than overusing !important

Performance Considerations

• Avoid overly complex selectors
• Minimize use of universal selector (*)
• Be mindful of animation effects on performance

Compatibility

• Ensure CSS properties used are supported in modern browsers
• Test your custom styles in different theme modes (light/dark)
• Be careful not to break interface usability and accessibility

Common Issues