Skip to main content

​
Overview

PolyChat-AI offers extensive customization options to tailor the interface to your preferences. Customize visual themes, accent colors, and AI behavior settings.

​
Visual Themes

Choose from multiple interface themes to match your workflow and preferences.

​
Available Themes

Default Theme
  • Modern dark interface with elegant styling
  • Optimized for low-light environments
  • Reduced eye strain during extended sessions
  • Smooth animations and transitions
Best For: Night work, extended coding sessions, reduced eye strain

​
Changing Themes

1

Open Settings

Press Ctrl/Cmd + K or click the ⚙️ settings icon
2

Navigate to Appearance

Scroll to the “Appearance” section (🎨 Palette icon)
3

Select Theme

Click on your preferred theme:
  • 🌙 Dark - Modern dark theme
  • ☀️ Light - Clean light interface
The theme applies immediately upon selection.
Quick Toggle: Use the theme switcher in settings to quickly switch between light and dark modes.

​
Accent Colors

Personalize your interface with 8 vibrant accent colors that affect buttons, highlights, and interactive elements.

​
Color Palette

ColorHex CodeBest For
Violet#8B5CF6Default, creative work, modern aesthetic
Blue#3B82F6Professional, corporate environments
Green#10B981Productivity, development work
Rose#F43F5ECreative projects, design work
Orange#F97316Energetic workflows, brainstorming
Teal#14B8A6Calm focus, writing sessions
Red#EF4444High priority tasks, debugging
Cyan#06B6D4Data analysis, technical work

​
Setting Accent Color

  1. Open Settings (Ctrl/Cmd + K)
  2. Navigate to “Appearance” section
  3. Click on any of the 8 color swatches
  4. The accent color applies immediately across the interface
Affected Elements:
  • Primary buttons and CTAs
  • Selected model indicators
  • Active conversation highlights
  • Progress indicators and loading states
  • Link hover effects
  • Focus outlines and borders

​
Conversation Settings

​
AI Tone Configuration

Customize how the AI communicates with you across all conversations.

​
Available Tones

Balanced, objective responses
  • No particular stylistic bias
  • Straightforward communication
  • Facts-focused approach
  • Suitable for general use cases
Example: “The function returns a boolean value indicating success or failure.”
Professional, structured communication
  • Academic or business language
  • Proper grammar and complete sentences
  • Avoids colloquialisms
  • Structured explanations
Example: “The function in question returns a boolean data type, which serves to indicate whether the operation has succeeded or encountered an error.”
Warm, conversational style
  • Approachable language
  • Casual but professional
  • Encouraging tone
  • Easy to understand
Example: “This function will give you back a true/false value to let you know if everything went smoothly!”
Business-oriented, polished responses
  • Industry-standard terminology
  • Clear and concise
  • Action-oriented language
  • Executive-level communication
Example: “This function delivers a boolean return value to confirm successful execution or flag potential issues.”
Energetic, positive communication
  • Upbeat language
  • Motivational tone
  • Emphasizes possibilities
  • Engaging explanations
Example: “This awesome function returns a boolean - perfect for quickly checking if your operation succeeded!”

​
Changing Tone

  1. Open Settings (Ctrl/Cmd + K)
  2. Navigate to “AI Tone” section
  3. Select one of the 5 tone options
  4. The tone is automatically added to your system instruction
  5. Start a new conversation to apply the tone
Tone changes only affect new conversations. Existing conversations maintain their original tone setting.

​
System Instructions

Combine tone settings with custom system prompts for complete control: How It Works:
  1. Select a conversation tone (optional)
  2. Add custom system instructions (optional)
  3. Both are combined and sent to the AI at conversation start
See the Configuration guide for detailed system prompt examples.

​
Interface Customization

​
Layout Features

Chat History Sidebar
  • Toggle visibility from the header
  • Search through past conversations
  • Quick access to saved sessions
  • Organized by date and model
Multi-Model Grid View
  • Display up to 3 model responses side-by-side
  • Compare different AI approaches
  • Each response shows model attribution
  • Synchronized scrolling (optional)
Model Switcher Bar
  • Quick model selection without opening settings
  • Shows current model and pricing
  • One-click model changes
  • Model search and filtering

​
Notification Preferences

Customize how PolyChat-AI alerts you:
  1. Browser Notifications
    • Enable in Settings → Notifications
    • Grant browser permission when prompted
    • Receive alerts when responses complete
    • Useful when multitasking
  2. Visual Indicators
    • Loading animations during AI generation
    • Character count during streaming
    • Model attribution badges
    • Error state notifications

​
Advanced Customization

​
CSS Custom Properties

For advanced users, PolyChat-AI uses CSS custom properties (variables) that can be modified in browser DevTools: 
/* Example: Customize accent color programmatically */
:root[data-accent="violet"] {
  --accent-primary: #8B5CF6;
  --accent-hover: #7C3AED;
  --accent-light: rgba(139, 92, 246, 0.1);
}
Theme Variables:
  • --bg-primary - Main background color
  • --text-primary - Primary text color
  • --border-color - Border and divider colors
  • --accent-* - Accent color variations

​
Local Storage Keys

Settings are stored in localStorage under: 
{
  "polychat-settings": {
    "theme": "dark",
    "accent": "violet",
    "systemPrompt": "...",
    "tone": "neutre",
    "ragEnabled": true,
    "notificationsEnabled": true
  }
}
Manually editing localStorage may cause unexpected behavior. Use the Settings UI whenever possible.

​
Accessibility

​
Keyboard Navigation

  • All interactive elements are keyboard accessible
  • Clear focus indicators (accent color outlines)
  • Skip to content functionality
  • ARIA labels for screen readers

​
Visual Accessibility

  • High contrast theme options
  • Scalable text (respects browser zoom)
  • Color-blind friendly accent options
  • Clear visual hierarchy

​
Screen Reader Support

  • Semantic HTML structure
  • ARIA landmarks and labels
  • Live region announcements for dynamic content
  • Alt text for icons and images

​
Best Practices

Theme Selection

Choose dark themes for night work to reduce eye strain and light themes for daytime productivity.

Accent Colors

Use calming colors (teal, blue) for focus work and energetic colors (orange, red) for creative sessions.

Tone Settings

Match the AI tone to your task: formal for documentation, friendly for brainstorming, professional for business.

Notifications

Enable notifications if you multitask, disable for distraction-free focus sessions.

​
Next Steps

Configuration

Set up API keys and configure models

Keyboard Shortcuts

Learn all keyboard shortcuts for efficient workflows

Build docs developers (and LLMs) love

Get started for freeTalk to us