Skip to content

05-preferences.md

Latest commit

 

History

History
301 lines (224 loc) · 8.25 KB

05-preferences.md

File metadata and controls

301 lines (224 loc) · 8.25 KB
Raw

AutoBot Preferences - User Guide

Welcome to AutoBot Preferences! Customize your AutoBot experience to match your personal preferences and accessibility needs.

Quick Start

Accessing Preferences

  1. From Desktop: Click "Preferences" in the top navigation bar
  2. From Mobile: Tap the menu icon → Select "Preferences"
  3. Direct Link: Navigate to http://:5173/preferences

Available Preferences

🌓 Dark Mode / Light Mode

Location: Toggle button in the header (sun/moon icon)

What it does: Switches between light and dark color themes for comfortable viewing in different lighting conditions.

How to use:

  • Click the sun/moon icon in the top-right corner
  • Your choice is saved automatically
  • Works across all pages instantly

Tips:

  • Use dark mode in low-light environments to reduce eye strain
  • Light mode is better for well-lit spaces
  • AutoBot detects your computer's theme preference automatically

🔤 Font Size

Location: Preferences page → Font Size section

Options:

  • Small: Compact text for maximizing screen space
  • Medium: Default, balanced size (recommended)
  • Large: Enhanced readability for accessibility

How to use:

  1. Go to Preferences page
  2. Click your preferred size button
  3. Text changes immediately across all pages
  4. Your choice is saved automatically

When to use each:

  • Small: When you need to see more information at once (dashboards, data tables)
  • Medium: Everyday use, optimal for most users
  • Large: Better readability, reduced eye strain, accessibility needs

🎨 Accent Color

Location: Preferences page → Accent Color section

Options:

  • Teal: Cool, professional (default)
  • Emerald: Fresh, modern green
  • Blue: Classic, trustworthy
  • Purple: Creative, distinctive
  • Orange: Energetic, warm

What changes:

  • Primary buttons
  • Links and highlights
  • Active navigation items
  • Selected elements
  • Focus indicators

How to use:

  1. Go to Preferences page
  2. Click a color option to preview
  3. Color applies instantly
  4. Your choice is saved automatically

Tips:

  • Choose colors that match your work style
  • All colors maintain proper contrast for readability
  • Colors adapt automatically between light and dark modes

📏 Layout Density

Location: Preferences page → Layout Density section

Options:

  • Compact: Reduced spacing, more content per screen
  • Comfortable: Balanced spacing (default, recommended)
  • Spacious: Generous spacing, enhanced readability

What changes:

  • Padding around elements
  • Space between sections
  • Content density
  • Overall page breathing room

How to use:

  1. Go to Preferences page
  2. Click your preferred density
  3. Layout adjusts immediately
  4. Your choice is saved automatically

When to use each:

  • Compact: Small screens, information-heavy workflows, power users
  • Comfortable: Everyday use, balanced experience
  • Spacious: Large screens, improved focus, accessibility needs

Common Questions

Q: Do my preferences sync across devices?

A: Currently, preferences are saved locally in your browser. Each device will have its own preferences. Cloud sync is planned for a future update.

Q: What happens if I clear my browser data?

A: Your preferences will reset to defaults. You'll need to set them again.

Q: Can I reset all preferences at once?

A: Yes! Click the "Reset" button at the top of the Preferences panel to restore all defaults.

Q: Do preferences affect performance?

A: No. Preference changes apply instantly with no impact on performance.

Q: Are preferences accessible to screen readers?

A: Yes! The preferences system is fully accessible with proper ARIA labels, keyboard navigation, and screen reader announcements.

Accessibility Features

Keyboard Navigation

  • Press Tab to move between preference options
  • Press Enter or Space to select an option
  • Press Shift+Tab to go backwards
  • All selections are announced by screen readers

Screen Reader Support

  • All preference changes are announced
  • Example: "Font size changed to Large"
  • Proper form structure with fieldsets and legends
  • ARIA labels on all interactive elements

High Contrast

  • All color combinations meet WCAG 2.1 AA standards
  • Text remains readable in all themes
  • Focus indicators are clearly visible

Recommended Setups

For Maximum Productivity

  • Theme: Dark mode (reduces eye strain)
  • Font: Medium (optimal readability)
  • Color: Teal or Blue (professional)
  • Density: Compact (more content visible)

For Accessibility

  • Theme: Based on your environment
  • Font: Large (enhanced readability)
  • Color: High contrast option (Blue or Teal)
  • Density: Spacious (improved focus)

For Presentation Mode

  • Theme: Light mode (better for projectors)
  • Font: Large (visible from distance)
  • Color: Blue or Orange (high visibility)
  • Density: Spacious (clear spacing)

For Mobile Use

  • Theme: Based on lighting
  • Font: Medium or Large
  • Color: Any (all are mobile-optimized)
  • Density: Comfortable (best for touch)

Troubleshooting

Problem: Preferences don't save

Solution:

  • Check that cookies/localStorage are enabled in your browser
  • Ensure you're not in incognito/private browsing mode
  • Try clearing browser cache and setting preferences again

Problem: Dark mode doesn't apply

Solution:

  • Click the dark mode toggle in the header (not in Preferences page)
  • Refresh the page
  • Check if your browser extensions are interfering

Problem: Colors look wrong

Solution:

  • Reset preferences using the "Reset" button
  • Try a different browser to rule out browser-specific issues
  • Check if your monitor color calibration is correct

Problem: Text is too small/large after update

Solution:

  • Go to Preferences
  • Select your preferred font size
  • If issue persists, reset preferences and try again

Tips & Tricks

Combine Preferences for Best Results

  • Dark mode + Large font: Perfect for evening work
  • Compact density + Small font: Maximize dashboard views
  • Spacious density + Large font: Ultimate readability

Quick Dark Mode Toggle

  • Don't navigate to Preferences page
  • Just click the sun/moon icon in the header
  • Works from any page instantly

Try Different Colors for Different Tasks

  • Teal: General work
  • Blue: Data analysis
  • Orange: Creative tasks
  • Purple: Reading/documentation
  • Emerald: Fresh perspective

Responsive Design

  • Preferences automatically adapt to your screen size
  • Mobile layouts optimize for touch targets
  • Tablet layouts provide the best of both worlds

Support

Need Help?

Provide Feedback

  • Tell us what preferences you'd like to see
  • Suggest new color options
  • Request additional accessibility features

What's Next?

Planned Features

  • Cloud Sync: Share preferences across devices
  • Custom Colors: Create your own accent colors
  • More Densities: Ultra-compact and ultra-spacious options
  • Preset Profiles: Developer, Designer, Manager modes
  • Export/Import: Backup and share your preferences
  • Keyboard Shortcuts: Quick preference switching

Reference

Default Values

  • Theme: Light (or system preference)
  • Font Size: Medium
  • Accent Color: Teal
  • Layout Density: Comfortable

Color Palette

Color Light Mode Dark Mode
Teal #0D9488 #2DD4BF
Emerald #10B981 #34D399
Blue #3B82F6 #60A5FA
Purple #8B5CF6 #A78BFA
Orange #F97316 #FB923C

Font Sizes

Size Base Headings
Small 15px 28px - 22px - 19px
Medium 16px 30px - 24px - 20px
Large 17px 32px - 26px - 21px

Layout Spacing

Density Padding Spacing
Compact 12px Reduced by 50%
Comfortable 16px Standard
Spacious 24px Increased by 50%

Version: 1.0.0 Last Updated: 2026-02-05 Need Help?: support@autobot.ai