Appearance Settings

Customize Chatelope's visual appearance to match your preferences.

Theme

Color Theme

Choose between light and dark modes:

Light - Bright interface, easy on the eyes in well-lit environments
Dark - Reduced eye strain in low-light conditions
System - Automatically match your operating system theme

Go to Settings > Appearance > Theme to change.

Accent Color

Customize the accent color used throughout the app:

Go to Settings > Appearance
Click Accent Color
Choose from presets or enter a custom hex code

Typography

Font Family

Choose your preferred fonts:

Sans-serif - Clean, modern look (default)
Serif - Traditional, book-like
Monospace - Technical, code-friendly

Line Spacing

Adjust spacing between lines for readability:

Compact - Less space
Normal - Default
Relaxed - More space

Layout

Resize the sidebar:

Drag the edge to resize
Double-click to reset to default
Minimum and maximum widths apply

Message Layout

Choose how messages are displayed:

Bubbles - Chat-style bubbles with avatars
Flat - Simple block layout
Compact - Reduced spacing

Code Blocks

Customize code appearance:

Syntax highlighting - Enable/disable
Theme - Choose from many code themes
Line numbers - Show/hide
Wrap long lines - Enable/disable

Animations

Control animations and transitions:

Enable animations - Toggle all animations
Reduce motion - Minimal animations (accessibility)
Smooth scrolling - Enable/disable

Density

Adjust interface density:

Comfortable - More spacing, larger touch targets
Default - Balanced
Compact - Dense layout, more content visible

Custom CSS

Advanced users can add custom CSS:

Go to Settings > Appearance > Advanced
Enable Custom CSS
Enter your CSS rules

Example:

/* Make messages wider */
.message-content {
  max-width: 90%;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

Reset

To reset all appearance settings:

Go to Settings > Appearance
Scroll to bottom
Click Reset to Defaults

Appearance