Skip to main content

Theme Settings

Personalize tagd-ai's appearance to match your preferences and reduce eye strain.

Accessing Theme Settings​

  1. Click your avatar → Settings
  2. Select Appearance
  3. Or click the theme icon in the header

Display Mode​

Light Mode​

Classic light interface:

  • White backgrounds
  • Dark text
  • Best for bright environments
  • Default setting

Dark Mode​

Reduced brightness interface:

  • Dark backgrounds
  • Light text
  • Reduces eye strain in low light
  • Saves battery on OLED screens

System Mode​

Automatically match your device:

  • Follows OS light/dark setting
  • Changes with system schedule
  • Seamless day/night switching

Color Themes​

Preset Themes​

Choose from curated color schemes:

ThemeDescription
Defaulttagd-ai brand colors
OceanBlue tones
ForestGreen tones
SunsetWarm orange tones
MinimalGrayscale

Custom Colors (Pro)​

Create your own theme:

  1. Go to Appearance → Custom Theme
  2. Set colors for:
    • Primary accent
    • Secondary accent
    • Background
    • Text
  3. Preview changes
  4. Click Save Theme

Font Settings​

Font Size​

Adjust text size:

  1. Go to Appearance → Font Size
  2. Choose:
    • Small - Compact view
    • Medium - Default
    • Large - Easier reading
    • Extra Large - Maximum readability

Font Family (Pro)​

Change the interface font:

  • System default
  • Sans-serif (clean)
  • Serif (traditional)
  • Monospace (code-like)

Layout Options​

Configure the sidebar:

  • Default - Normal width
  • Compact - Narrower sidebar
  • Hidden - Auto-hide, hover to show

Content Width​

Set maximum content width:

  • Narrow - 600px max
  • Medium - 800px max
  • Wide - 1000px max
  • Full - Use all available space

Density​

Adjust spacing:

  • Comfortable - More whitespace
  • Cozy - Balanced (default)
  • Compact - Dense, more content visible

Accessibility​

High Contrast​

Enable for better visibility:

  1. Go to Appearance → Accessibility
  2. Toggle High Contrast Mode
  3. Interface uses stronger contrasts

Reduced Motion​

Minimize animations:

  1. Toggle Reduced Motion
  2. Disables or slows animations
  3. Respects OS accessibility settings

Focus Indicators​

Enhanced keyboard navigation:

  1. Toggle Enhanced Focus Indicators
  2. Larger, more visible focus outlines
  3. Helps keyboard navigation

Quick Theme Toggle​

Keyboard Shortcut​

Toggle dark mode quickly:

  • Press Ctrl/Cmd + Shift + D
  • Switches between light and dark

Header Toggle​

Click the theme icon in header:

  • Sun icon = currently light mode
  • Moon icon = currently dark mode
  • Click to switch

Theme in Tags​

Tag Display​

Your theme affects how you see tags:

  • Editor matches your theme
  • Published tags use their own styling
  • Viewers see their own theme preference

Theme for Viewers​

Tags respect viewer preferences:

  • Viewer's system theme applied
  • No control over viewer's display
  • Content adapts to both modes

Troubleshooting​

Theme Not Applying​

  1. Refresh the page
  2. Clear browser cache
  3. Try different browser
  4. Check for browser extensions blocking

Colors Look Wrong​

  1. Check monitor color settings
  2. Disable browser color management
  3. Try different browser
  4. Report if consistently wrong

Dark Mode Too Dark/Bright​

Adjust with:

  • Custom theme colors
  • High contrast mode
  • Monitor brightness
  • Browser zoom level

Browser-Specific Tips​

Chrome​

  • Supports system theme
  • Enable hardware acceleration for smooth transitions

Safari​

  • Excellent system theme support
  • May need refresh after OS theme change

Firefox​

  • Supports all themes
  • May have slight color variations

Edge​

  • Full theme support
  • Follows Windows theme by default

Mobile Themes​

iOS​

  • Follows iOS dark mode setting
  • Toggle in Control Center
  • PWA respects system setting

Android​

  • Follows Android dark theme
  • Toggle in quick settings
  • PWA respects system setting

Next Steps​