Skip to content

Dark mode

Dark mode replaces the standard light interface with a darker color palette designed to reduce eye strain in low-light environments. Every card, modal, table, sidebar, and form in FSM Navigator adapts automatically when you switch themes.

Dark mode is available on all plans and is a per-user preference — your choice does not affect other team members.

Theme options

FSM Navigator offers three theme settings.

Option Behavior
Light Always uses the standard light theme
Dark Always uses the dark theme
System Follows your operating system or browser preference automatically

Recommended: System

Choosing System keeps FSM Navigator in sync with your device. If your OS switches to dark mode at sunset, the dashboard follows automatically.

Enabling dark mode

  1. In the left sidebar, find your user profile card at the bottom of the navigation panel.
  2. Click the theme toggle button (sun/moon icon) in the profile card.
  3. Choose Light, Dark, or System.
  4. The theme switches immediately — no page reload required.

Your choice is saved to your account and persists across devices and browser sessions.

No impact on other users

Your theme preference is personal. Switching to dark mode does not change the theme for anyone else on your team.

What adapts in dark mode

The entire interface is designed for seamless dark mode support. You do not need to adjust anything — all components adapt automatically.

Component Light mode Dark mode
Dashboard background Light gray Dark gray
Cards and panels White Dark slate
Tables White rows, light headers Dark rows, darker headers
Modals and dialogs White overlay Dark overlay
Sidebar navigation Light background Dark background
Form inputs White fields Dark fields with light text
Status badges Colored on white Colored on dark (adjusted for contrast)
Charts and graphs Standard palette Adjusted palette for dark backgrounds

If you have uploaded a company logo under Branding, it is displayed in both light and dark modes.

Use a transparent PNG

Logos with a transparent background look best in both themes. A logo with a solid white background will show a visible white rectangle in dark mode.

Dark mode on mobile

The FSM Navigator mobile app also supports dark mode. It follows the same options:

  • Light — always light
  • Dark — always dark
  • System — matches your phone's display settings

You can set the mobile theme independently from the web dashboard if you prefer different settings on different devices.

Accessibility considerations

Dark mode is more than a visual preference — it can improve accessibility for team members who are sensitive to bright screens or work primarily in dimly lit environments.

Benefit Description
Reduced eye strain Lower brightness reduces fatigue during long shifts
Better focus Fewer bright areas help you concentrate on content
Low-light environments Easier to read in vehicles, warehouses, or basements
Screen glare reduction Dark surfaces reflect less ambient light

Pair with system night shift

For maximum comfort, combine dark mode with your operating system's night shift or blue-light filter feature, especially during evening hours.

Frequently asked questions

Does dark mode affect printed invoices or PDFs?

No. Invoices and PDF exports always use the standard light layout with your company branding, regardless of your theme preference.

Can an Owner force dark mode for the whole company?

No. Theme preference is always personal. Each user chooses their own theme.

Does dark mode use less battery on my laptop or phone?

On devices with OLED or AMOLED screens, dark mode can reduce battery usage because dark pixels consume less power. On traditional LCD screens, the difference is negligible.

Why do some colors look different in dark mode?

Status badges and chart colors are adjusted slightly in dark mode to maintain readability and contrast against dark backgrounds. The meaning of each color remains the same.

I switched to System but nothing changed.

Verify that your operating system or browser is actually set to dark mode. On most systems, you can find this under Display Settings or Appearance.