Using Dark Mode

Petfolio offers both light and dark modes to suit your preference and viewing conditions. Learn how to switch themes and customize your visual experience.

Finding the Theme Toggle

The quickest way to switch themes:

1. Look in the navigation bar at the top of any page
2. Find the sun/moon icon
3. Click it to toggle between modes

Icon Meanings

• Sun icon - You're in light mode; click to switch to dark
• Moon icon - You're in dark mode; click to switch to light

Theme Options

Petfolio supports three theme settings:

Light Mode

• Bright, clean interface
• White backgrounds with dark text
• Best for daytime use
• Easier to read in bright environments

Dark Mode

• Darker color scheme
• Dark backgrounds with light text
• Reduces eye strain in low light
• Saves battery on OLED screens
• Comfortable for nighttime use

System Default

• Automatically matches your device setting
• Switches when your device changes modes
• Great if you use scheduled dark mode on your phone or computer

Setting Your Preference

Quick Toggle

Click the theme icon in the navigation to instantly switch between light and dark.

In Profile Settings

For more control:

1. Go to Profile
2. Find Appearance or Theme settings
3. Choose your preference:
   • Light - Always use light mode
   • Dark - Always use dark mode
   • System - Match device setting
4. Changes apply immediately

Persistence

Your theme preference is saved:

• Stays the same when you return
• Works across devices when logged in
• No need to set it each time

System Theme Detection

When set to "System":

• Petfolio checks your device's theme preference
• Automatically uses light or dark accordingly
• Updates if you change your system setting

How to Set System Theme

macOS:

1. System Preferences > General
2. Choose Light, Dark, or Auto

Windows:

1. Settings > Personalization > Colors
2. Choose Light, Dark, or Custom

iOS:

1. Settings > Display & Brightness
2. Choose Light or Dark, or enable Automatic

Android:

1. Settings > Display
2. Enable or disable Dark theme

Dark Mode Benefits

Reduced Eye Strain

• Easier on eyes in dim lighting
• Less harsh contrast
• Comfortable for extended use

Battery Savings

• OLED screens use less power displaying black
• Can extend battery life on phones
• Environmentally friendly

Focus

• Reduces visual distractions
• Content stands out more
• Popular with many users

Light Mode Benefits

Readability

• High contrast makes text clear
• Better in bright environments
• Traditional reading experience

Color Accuracy

• Photos may appear more accurate
• Easier to judge pet photo colors
• Consistent with printed materials

Troubleshooting

Theme isn't changing

• Try refreshing the page
• Clear your browser cache
• Log out and back in
• Check that JavaScript is enabled

System theme not detected

• Ensure browser supports system theme detection
• Try setting a specific theme instead
• Update your browser if outdated

Colors look wrong

• Check your screen's color settings
• Disable browser extensions that affect colors
• Try a different browser

Theme and Sharing

When you share your pet's profile:

• Recipients see their own preferred theme
• Your theme doesn't affect shared links
• Emergency cards adapt to recipient's preference

Accessibility Considerations

Dark mode can help with:

• Light sensitivity
• Migraines triggered by bright screens
• Working in dark rooms
• Reducing blue light exposure

If you have specific visual needs, both modes are designed with accessibility in mind.

Tips for Theme Use

• Night owls: Set to dark mode or system automatic
• Outdoor use: Light mode is easier to see in sunlight
• Photo review: Light mode may show colors more accurately
• Long sessions: Dark mode reduces eye fatigue

Need Help?

If you have questions about theme settings, contact support@petfolio.io.