Themes

World Monitor supports dark and light themes with instant switching, no flash of unstyled content, and persistent preferences across sessions.

Default Theme

World/Tech/Finance Monitor
Happy Monitor

Default: Dark themeOptimized for:

Reduced eye strain during extended monitoring
Better contrast for map overlays
Professional operations center aesthetic

The default theme applies only if you haven’t explicitly chosen a theme. Once you select dark or light, your preference overrides the variant default.

Switching Themes

The theme toggle is located in the header bar (top-right corner):

Click the theme toggle button

Icon: 🌙 (dark mode) or ☀️ (light mode)

Theme switches instantly

All panels, map overlays, and UI elements update in under 50ms with no page reload.

Preference is saved

Your choice is stored in localStorage and persists across:

Page reloads
Browser restarts
Variant switches (World → Tech → Finance)

Keyboard shortcut: Press Cmd+Shift+T (Mac) or Ctrl+Shift+T (Windows/Linux) to toggle themes quickly.

Theme Customization

World Monitor uses 20+ semantic CSS variables that adapt to the active theme:

Color Variables

Dark Theme
Light Theme

:root[data-theme="dark"] {
  --bg-primary: #0a0f0a;       /* Main background */
  --bg-secondary: #1a1f1a;     /* Panel backgrounds */
  --bg-tertiary: #2a2f2a;      /* Elevated surfaces */
  
  --text-primary: #e8eae8;     /* Main text */
  --text-secondary: #b8bab8;   /* Secondary text */
  --text-tertiary: #888a88;    /* Muted text */
  
  --border-primary: #3a3f3a;   /* Panel borders */
  --border-secondary: #2a2f2a; /* Dividers */
  
  --accent-primary: #4a9eff;   /* Links, buttons */
  --accent-success: #4ade80;   /* Success states */
  --accent-warning: #fbbf24;   /* Warning states */
  --accent-danger: #f87171;    /* Error states */
}

Map theme: Dark base tiles (dark-v11)

:root[data-theme="light"] {
  --bg-primary: #f8f9fa;       /* Main background */
  --bg-secondary: #ffffff;     /* Panel backgrounds */
  --bg-tertiary: #e9ecef;      /* Elevated surfaces */
  
  --text-primary: #1a1f1a;     /* Main text */
  --text-secondary: #4a4f4a;   /* Secondary text */
  --text-tertiary: #6a6f6a;    /* Muted text */
  
  --border-primary: #dee2e6;   /* Panel borders */
  --border-secondary: #e9ecef; /* Dividers */
  
  --accent-primary: #0066cc;   /* Links, buttons */
  --accent-success: #16a34a;   /* Success states */
  --accent-warning: #ca8a04;   /* Warning states */
  --accent-danger: #dc2626;    /* Error states */
}

Map theme: Light base tiles (light-v11)

Customizing Your Own Theme

If you’re running World Monitor locally, you can customize theme colors:

Open source/src/styles/variables.css
Edit the CSS variables under [data-theme="dark"] or [data-theme="light"]
Save and reload — changes apply instantly in dev mode

Example: Change the dark theme accent color to purple:

:root[data-theme="dark"] {
  --accent-primary: #a855f7; /* Changed from blue to purple */
}

Custom theme changes require rebuilding the app (npm run build). They won’t persist if you update to a new World Monitor version — reapply your changes after updates.

Theme-Aware Components

All UI elements adapt to the active theme:

Map Overlays

Cluster circles: opacity adapts
Labels: inverted text color
Markers: border contrast
Heatmaps: palette shifts

Charts & Graphs

D3.js timelines
SVG sparklines
Donut gauges
CII score rings

All use theme-aware colors.

News Panels

Background cards
Threat-level borders
Keyword highlights
Hover states

Video Players

Control bar backgrounds
Progress bars
Volume sliders
Quality selectors

Browser Theme Color

The <meta name="theme-color"> tag syncs with your active theme, changing the browser chrome color on mobile and PWA installs:

Dark Theme
Light Theme

<meta name="theme-color" content="#0a0f0a">

Mobile browser bars and PWA title bars use dark green.

<meta name="theme-color" content="#f8f9fa">

Mobile browser bars and PWA title bars use light gray.

This provides a seamless experience where the app’s theme extends to the OS-level UI.

Theme Changed Event

When the theme switches, World Monitor dispatches a custom event that panels can listen to:

window.addEventListener('theme-changed', (event) => {
  const newTheme = event.detail.theme; // 'dark' or 'light'
  console.log(`Theme switched to: ${newTheme}`);
  
  // Redraw chart with new colors
  updateChartColors(newTheme);
});

Use cases:

Redrawing D3.js charts with new color palettes
Updating map marker styles
Refreshing video player controls
Invalidating cached color computations

The event is fired after the DOM attribute (data-theme) is updated, so you can immediately read CSS variables.

No Flash of Unstyled Content (FOUC)

World Monitor applies your theme preference before the first paint to prevent a flash of the wrong theme:

Inline script runs in <head>

Before any stylesheets or components load, an inline <script> in index.html reads localStorage and sets document.documentElement.dataset.theme.

CSS variables are available immediately

Because the data-theme attribute is set, theme-specific CSS variables apply during initial render.

React components mount with correct theme

No re-render needed — components see the correct theme on first mount.

Result: Users never see a white flash when loading the app in dark mode.

Accessibility

Both themes are designed for WCAG AA contrast compliance:

Dark theme: 4.5:1 contrast ratio for text on backgrounds
Light theme: 4.5:1 contrast ratio for text on backgrounds
Accent colors: Tested against both themes for readability

Additional features:

Focus indicators are theme-aware (visible in both dark and light)
Keyboard navigation works identically in both themes
Screen readers announce theme changes via aria-live regions

Troubleshooting

Theme resets to default on reload

This means localStorage is being cleared. Possible causes:

Private browsing mode — localStorage doesn’t persist
Cache clearing extension — blocks localStorage writes
Browser security settings — some ad blockers prevent localStorage

Solution: Disable private mode or check browser extensions.

Theme toggle button missing

The toggle only appears on screens ≥768px wide. On mobile, World Monitor respects your device’s system theme preference.Workaround: Switch to landscape mode or use a desktop browser.

Map tiles don't match theme

Map tiles are fetched from MapTiler and cached by the service worker. If you switch themes:

Wait 5–10 seconds for new tiles to load
Or force-reload the page (Cmd+Shift+R / Ctrl+Shift+R)
Or clear browser cache and reload

Some panels are still dark/light after switching

This indicates a panel isn’t using theme CSS variables. Check if:

The panel has hardcoded colors (e.g., background: #000000)
The panel hasn’t subscribed to the theme-changed event
The panel uses external iframes (YouTube embeds don’t inherit theme)

Workaround: Reload the page to force re-render.

Layouts — Panel arrangement and ultra-wide mode
Localization — Language preferences and RTL support

Getting Started

Using the Dashboard

Intelligence Features

Customization

Default Theme

Switching Themes

Theme Customization

Color Variables

Customizing Your Own Theme

Theme-Aware Components

Map Overlays

Charts & Graphs

News Panels

Video Players

Browser Theme Color

Theme Changed Event

No Flash of Unstyled Content (FOUC)

Accessibility

Troubleshooting

Build docs developers (and LLMs) love

Getting Started

Using the Dashboard

Intelligence Features

Customization

​Default Theme

​Switching Themes

​Theme Customization

​Color Variables

​Customizing Your Own Theme

​Theme-Aware Components

Map Overlays

Charts & Graphs

News Panels

Video Players

​Browser Theme Color

​Theme Changed Event

​No Flash of Unstyled Content (FOUC)

​Accessibility

​Troubleshooting

​Related Features

Build docs developers (and LLMs) love

Default Theme

Switching Themes

Theme Customization

Color Variables

Customizing Your Own Theme

Theme-Aware Components

Browser Theme Color

Theme Changed Event

No Flash of Unstyled Content (FOUC)

Accessibility

Troubleshooting

Related Features