Skip to content

Theme

Theme controls the visual style of the ARGUS interface. It lives in Settings → App → Interface under the Theme row. Two buttons: Dark and Light.

Modes

Only two modes exist in the current build. The ThemeService toggles theme-dark or theme-light as a class on the HTML root and persists the choice to localStorage under sar.theme.

Dark

The default for operators. Near-black base, cyan and amber accents, tuned for long sessions in low ambient light and for reading overlaid on video and satellite imagery. Every tile, chart, and map is designed dark-first.

Light

A high-contrast light palette for daytime briefings, report exports displayed on projectors, and bright outdoor field use. All icons, charts, and map overlays have light-mode variants so information density is preserved.

Tactical (aspirational)

A third mode — Tactical — is not implemented. The design brief calls for an ultra-dark, amber-only palette suitable for red-night preservation (pilots and operators transitioning between cockpit and console without losing dark adaptation). Today the Dark mode is the closest approximation. The tactical mode is tracked in the roadmap and will land as a third button in the same row.

Accent colour

The accent colour that tints your avatar ring, callsign chip, map pin, and chat bubble border is not a theme setting — it is a profile setting. Defaults:

  • If your org has a brand colour, your accent starts as that.
  • Otherwise it defaults to #2762ea (ARGUS blue).

You can override the accent per-user and per-org in Settings → ProfileAsset colour. Twelve preset swatches, a hex input, and a native colour picker. Per-org overrides layer on top of the global setting.

Reduced motion

ARGUS honours the prefers-reduced-motion OS accessibility setting automatically — tile open/close animations, map fly-to easings, and notification slides collapse to instant transitions when the OS requests it. Toggling the OS setting takes effect on the next navigation.

A force reduced-motion in-app toggle (for users who want it on without changing their OS state) is aspirational and not yet in the UI.

Font size

Font scaling is not strictly a theme setting but lives alongside it in the same section. The slider scales every rem across the UI from 75% to 150%. See App settingsFont size.

Map quality (aspirational)

A Map quality toggle (Performance / Balanced / Quality) that trades 3D LOD and foveation for frame rate is planned. Today the 3D map runs its internal Balanced preset and can not be overridden from Settings.

How it is applied

Under the hood, ThemeService.set('dark' | 'light') toggles the theme-dark and theme-light classes on <html>, persists the mode, and every CSS custom property (--tac-bg, --tac-accent, …) resolves against the active class. Every component reads those variables so the switch is truly instant — no reload, no flash.