Skip to main content

Dark Mode

Shaari includes a full dark theme that applies across every screen, module, and component in the application. Whether you prefer dark mode for comfort, accessibility, or battery savings on OLED displays, Shaari delivers a consistent dark experience without compromise.

Enabling Dark Mode​

You can toggle dark mode from the top navigation bar:

  1. Click the theme toggle icon (sun/moon icon) in the top bar.
  2. The interface immediately switches between light and dark themes.

Your preference is saved to your user profile and persists across sessions, devices, and tenant switches.

System Preference Detection​

Shaari can automatically follow your operating system's theme setting:

  • If your device is set to dark mode (via system preferences), Shaari loads in dark mode by default.
  • If your device switches between light and dark based on a schedule (such as macOS or Windows automatic appearance), Shaari follows the change in real time.
  • If you manually override the theme within Shaari, your manual choice takes precedence over the system preference.
note

System preference detection works in all modern browsers (Chrome, Firefox, Safari, Edge). The PWA installation also respects system theme changes.

Consistent Dark Theme Across All Modules​

The dark theme is not a simple color inversion. It is a purpose-designed color palette that covers every part of the application:

  • Sidebar background darkens with adjusted text contrast
  • Top bar and breadcrumbs use dark backgrounds with light text
  • Page backgrounds use a dark neutral tone that reduces glare

Forms and Inputs​

  • Input fields have dark backgrounds with visible borders
  • Labels, placeholders, and helper text use appropriate contrast ratios
  • Dropdown menus, date pickers, and modals render in dark theme
  • Validation error messages remain clearly visible against dark backgrounds

Tables and Data​

  • Table rows alternate between two dark shades for readability
  • Selected and hovered rows are visually distinct
  • Sorting icons and action buttons maintain visibility

Charts and Analytics​

  • Dashboard charts use colors optimized for dark backgrounds
  • Chart legends, axis labels, and tooltips adapt to the dark palette
  • Data visualization contrast is maintained for all chart types

Dialogs and Overlays​

  • Confirmation dialogs, alerts, and modals use dark backgrounds
  • Overlay backdrops darken further to maintain the modal focus effect
  • Toast notifications use colors that stand out against the dark interface

Documents and Previews​

  • Invoice and quotation preview panels use dark surrounds
  • PDF viewers embed with dark-themed toolbars
  • Print and export functions generate documents using standard light backgrounds regardless of the app theme

Accessibility Benefits​

Dark mode is more than a preference --- it provides tangible accessibility benefits:

Reduced Eye Strain​

Working with bright screens for extended periods can cause eye fatigue. The dark theme reduces the overall brightness of the interface, making prolonged use more comfortable, particularly in low-light environments.

Improved Focus​

With less visual noise from bright backgrounds, the content and data on screen become the focal point. This can improve concentration during data-heavy tasks like reviewing invoices or processing payroll.

Better Readability for Some Users​

Users with certain visual sensitivities or conditions (such as photophobia or migraine susceptibility) may find dark themes significantly more comfortable than light ones.

Battery Savings​

On devices with OLED or AMOLED displays (common on modern phones and some laptops), dark mode can reduce power consumption because dark pixels require less energy to display.

tip

If you work in a shared office, consider using dark mode during evening hours and light mode during the day. The system preference detection can handle this automatically if your operating system is configured with a schedule.

Printing and Exports​

When you print a document or export a PDF from Shaari, the output uses standard light-background formatting regardless of your current theme setting. This ensures that:

  • Printed invoices and reports are legible on white paper
  • PDF exports have professional, consistent appearance
  • Documents shared with clients or auditors are not affected by your personal theme preference

Customization Scope​

The dark mode toggle is a personal setting. It affects only your view of the application and does not change how other team members see the interface. Each user can independently choose their preferred theme.

There is no tenant-level theme enforcement --- Admins cannot force all team members to use light or dark mode. This is an individual preference by design.