Appearance Settings

Customize how Cothon looks and feels. Adjust themes, layouts, and display density to match your preferences.

Theme

Color Theme

Choose your preferred color scheme:

To change theme:

1. Go to Settings > Appearance > Theme
2. Select Light, Dark, or System
3. Theme applies immediately

Accent Color

Customize the accent color used for highlights:

• Salmon (Default) - Warm coral accents
• Blue - Classic blue highlights
• Green - Fresh green accents
• Purple - Rich purple tones

Layout Options

Sidebar Position

Choose sidebar placement:

• Left (Default) - Navigation on the left
• Right - Navigation on the right
• Auto-hide - Sidebar collapses when not in use

Panel Configuration

Customize the three-panel layout:

Collapsed View

When panels collapse:

1. Hover to reveal temporarily
2. Click pin icon to keep open
3. Double-click edge to auto-fit

Display Density

Comfortable

• More spacing between elements
• Larger click targets
• Better for large screens

Compact

• Tighter spacing
• More content visible
• Better for smaller screens

Touch

• Optimized for touch devices
• Larger buttons and controls
• More padding around interactive elements

Typography

Font Size

Adjust text size:

Font Family

• System (Default) - Uses your OS font
• Inter - Clean, modern sans-serif
• Mono - Monospace for technical content

List Views

Default View Mode

Set default view for lists:

• Grid - Card-based layout
• List - Compact rows
• Table - Spreadsheet-style with columns

Sort Order

Default sorting for lists:

• Date created
• Date modified
• Alphabetical
• Custom order

Items Per Page

Choose how many items to display:

• 10, 25, 50, or 100 items
• Or infinite scroll

Dashboard

Widget Layout

Customize your dashboard:

1. Click Edit Dashboard or press E on dashboard
2. Drag widgets to reorder
3. Resize by dragging corners
4. Click Done to save

Available Widgets

Widget Settings

Each widget has options:

1. Click the ... menu on widget
2. Adjust:
   • Items to show
   • Time range
   • Filters
3. Or remove widget

Animations

Motion Preferences

• Full - All animations enabled
• Reduced - Minimal animations (respects OS setting)
• None - No animations

Accessibility

High Contrast

Enable high contrast mode:

1. Go to Settings > Appearance > Accessibility
2. Toggle High Contrast
3. Increases color contrast for better visibility

Focus Indicators

Make focus states more visible:

• Enhanced focus rings
• Increased contrast on hover states
• Better for keyboard navigation

Screen Reader Optimization

• Meaningful ARIA labels
• Logical heading structure
• Skip links for navigation

Previewing Changes

Most appearance changes apply immediately:

1. Make adjustments in settings
2. See changes in real-time
3. Settings auto-save

Preview Different Themes

Test themes without committing:

1. Hold Alt/Option while clicking a theme
2. Preview for 30 seconds
3. Click "Keep" to save or let it revert

Reset Appearance

Restore default appearance:

1. Go to Settings > Appearance
2. Scroll to bottom
3. Click Reset to Defaults
4. Confirm reset

Device-Specific Settings

Some settings apply per-device:

Next Steps

• AI Configuration - Configure AI behavior
• Notifications - Alert preferences
• Keyboard Shortcuts - Learn shortcuts