Overview
LoopString supports three appearance modes: Light, Dark, and System. System mode follows your device's OS-level color preference and switches automatically when you change it. Your chosen mode is saved to your account so it applies consistently across every browser and device you sign in from.
The dashboard, Configurator, and all widgets use Material Design 3 (MD3) color tokens, which means colors are defined by roles — surface, primary, on-surface, and so on — rather than hard-coded values. Every element adapts when the theme changes, so there are no partially-lit screens or hard-to-read text.
How to Change Your Theme
Open the Preferences panel by clicking your avatar or the gear icon in the top navigation bar. Under the Appearance section you will see three options:
System — mirrors whatever light or dark mode your operating system is set to. This is the default for all new accounts. When you change your OS setting, the dashboard updates in real time without a page reload.
Light — always shows the light theme regardless of your OS setting.
Dark — always shows the dark theme regardless of your OS setting.
Click any option to apply it immediately. The change takes effect without a page reload and is saved to your account automatically.
How OS Auto-Detection Works
When your preference is set to System, LoopString listens to the browser's prefers-color-scheme media query. This is the same signal your OS sends to all apps that respect system dark mode — macOS, Windows, Android, and iOS all support it.
The dashboard reads your stored preference from localStorage on page load so the correct theme is applied before the first frame renders. There is no flash of the wrong theme. Once you sign in, your preference is confirmed against what is saved in your account and the two are kept in sync.
If you change your OS appearance while the dashboard is open, the System mode responds immediately. Light and Dark modes are not affected by OS changes.
Troubleshooting
The theme does not change when I switch my OS to dark mode.
This only applies when your preference is set to System. If you have Light or Dark selected in Preferences, the OS setting is intentionally ignored. Open Preferences, confirm the System option is selected, then try changing your OS appearance again.
My theme resets to the wrong mode after signing in.
This can happen if your browser's localStorage was cleared while you were signed out. On your next sign-in, LoopString checks your account's saved preference and applies it. If the wrong mode briefly appears before your preference loads, this is expected — it should correct itself within a second or two. If it persists, open Preferences and re-select your preferred mode to save it again.
The Preferences panel shows a loading skeleton and never resolves.
Your theme preference is stored in Firestore and requires a signed-in session to load. If the panel stays in a loading state, sign out and back in. If the issue continues, check your network connection and try a hard refresh.
Known Issues and Limitations
Shared dashboard links (public read-only views) respect the recipient's browser OS preference but do not inherit the owner's saved theme preference. A visitor viewing a shared link will see System mode by default.
The theme preference is per-account, not per-device. If you want a different theme on a specific device, you would need a separate account — there is no device-specific override.
Some third-party embedded content (for example, OAuth pop-ups or certain browser extension overlays) may not adapt to the theme, as they are outside LoopString's control.