Using Dark and Light Themes

Server Scout's dashboard includes both dark and light themes to ensure comfortable monitoring regardless of your environment or time of day. This guide covers how to switch between themes and explains how the theme system works.

Locating the Theme Toggle

The theme toggle is conveniently located in the main navigation bar at the top of every dashboard page. Look for the theme icon (typically a sun/moon symbol) in the top-right corner of the interface, usually positioned near other user controls.

Simply click the theme toggle to switch between dark and light modes instantly. The change takes effect immediately without requiring a page refresh.

Dashboard-Wide Theme Application

When you switch themes, the change applies consistently across all Server Scout dashboard pages, including:

• Server overview pages
• Individual server detail views
• Notifications and alerts
• User management sections
• Support and help pages

This ensures a cohesive visual experience throughout your monitoring workflow, regardless of which section you're working in.

Theme Persistence

Your theme preference is automatically saved in your browser's localStorage, which means:

1. No account required - Theme preferences work without needing to configure account settings
2. Session persistence - Your choice remains active across browser sessions
3. Instant application - The saved theme loads immediately when you return to the dashboard

This localStorage approach ensures your preferred theme is ready whenever you access Server Scout, without any additional setup or configuration steps.

Technical Implementation

Server Scout's theme system uses modern CSS custom properties (CSS variables) controlled by a data-theme attribute on the HTML element. The ScoutTheme module manages theme switching by:

1. Detecting system preferences - Automatically detecting your operating system's dark/light mode setting
2. Managing theme state - Updating the data-theme attribute when you toggle themes
3. Applying CSS variables - Switching colour schemes through CSS custom properties
4. Storing preferences - Saving your choice to localStorage for future sessions

This technical approach ensures smooth theme transitions and consistent styling across all dashboard components.

Default Theme Behaviour

If you haven't previously set a theme preference, Server Scout defaults to your system's theme setting. This means:

• macOS users - The dashboard follows your System Preferences appearance setting
• Windows users - Matches your Windows theme preference (Settings > Personalisation > Colours)
• Linux users - Follows your desktop environment's theme setting

This automatic detection ensures the dashboard feels native to your operating system's appearance from your first visit.

Benefits of Dark Mode

Dark mode offers several practical advantages for server monitoring:

Reduced Eye Strain: Dark themes significantly reduce eye fatigue during extended monitoring sessions, particularly valuable for:

• Late-night incident response
• Extended troubleshooting sessions
• 24/7 monitoring environments

Power Efficiency: If you're using OLED displays (common on modern laptops and mobile devices), dark mode can reduce power consumption by displaying true black pixels that don't require backlighting.

Professional Environment: Dark themes often integrate better with dimly lit server rooms or operations centres where bright screens can be disruptive.

Per-Browser Settings

Theme preferences are stored individually for each browser and device combination. This means:

• Your work desktop Chrome browser remembers its own theme
• Your laptop Firefox maintains a separate preference
• Mobile devices store independent theme choices
• Different user profiles on the same device can have unique preferences

This per-browser approach ensures optimal flexibility for sysadmins who access Server Scout from multiple devices throughout their workday.

Troubleshooting Theme Issues

If themes aren't switching properly, try clearing your browser's localStorage or refreshing the page. The theme should automatically detect your system preference if no saved setting is found.