Skip to main content

Admin UI language and dark mode

The admin's interface comes in 7 languages (English, French, German, Spanish, Dutch, Portuguese, Korean) and dark / light mode. Both choices are per-user, persisted, and independent of:

  • Your public site's language — that's a separate setting (Settings → General → Site language). Public site language is one per site.
  • Other people's choices — every editor picks their own admin UI language and dark mode preference.

Picking your language​

The 🌐 Locale switcher in the top-right of the admin shows the current language. Click it to open a dropdown of the 7 supported locales, then click your preferred one.

Behind the scenes:

  1. The admin calls setActiveLocale(<code>) which updates i18next's active language → all t("…") calls re-resolve → UI re-renders in the new language
  2. Firestore is updated: users/{uid}.preferences.adminLocale = "<code>" — so the choice follows you across devices
  3. localStorage is updated too — so reloading on the same device doesn't flash the wrong language while waiting for the Firestore subscription to deliver the value

The change is immediate. No reload needed.

Default and fallback​

When you first sign in, the admin picks the language in this order:

  1. users/{uid}.preferences.adminLocale from Firestore (if you've previously chosen one)
  2. localStorage.adminLocale (recent local choice)
  3. navigator.language two-letter prefix match (e.g. browser at fr-CA → fr)
  4. "en" as the last fallback

If a translation key is missing in your chosen language, i18next falls back to English for that key. The admin never breaks if a locale's bundle is incomplete — you just see the English string for the missing piece.

Language coverage​

LocaleCodeCoverage
Englishen100% — source of truth
Françaisfr100%
Deutschde~95%
Españoles~95%
Nederlandsnl~95%
Portuguêspt~95%
한국어ko~95%

The 95% locales miss a few recently-added strings here and there — those fall back to English automatically.

Plugin and theme translations are separate per-package. Each plugin / theme ships its own bundles. They follow the same locale you pick for the admin.

Dark mode​

The ☀️/🌙 theme toggle in the topbar switches dark / light mode for the admin UI.

This is separate from:

  • Your active public theme (default / magazine / corporate / external) — that affects how published pages look, not the admin
  • Other users' admin choices — dark mode is per-browser

The toggle:

  1. Adds / removes a dark class on the document root
  2. Tailwind's dark: variants flip every dark-mode-aware element (background, text, borders, ring colors)
  3. Persists the choice in localStorage.theme = "dark" | "light"
  4. On the next reload, an inline anti-FOUC script in index.html reads the localStorage value synchronously before React mounts so you don't see a light-mode flash

Default​

If you've never picked a mode, the admin honours prefers-color-scheme from your OS. macOS / Windows users with system dark mode enabled get dark mode automatically.

Affected vs unaffected​

Dark mode affects the admin chrome only:

  • Sidebar, topbar, page backgrounds, cards, inputs, buttons, modals, tables — all flip
  • Plugin / theme settings pages flip too (they use the same Tailwind utility classes)

Dark mode does NOT affect:

  • The post editor's preview iframe (themes can have their own light/dark logic on the public site)
  • The public site (it has its own CSS, independent of the admin)
  • Any <iframe> content (e.g. embedded videos)

Per-user persistence​

Both choices live in your users/{uid} Firestore record:

{
  preferences: {
    adminLocale: "fr"
  }
  // dark mode is in localStorage only, not Firestore
}

Dark mode is per-device (localStorage), not per-user (Firestore). That's intentional — many people have different preferences across desktop / mobile.

Locale is per-user (Firestore + localStorage cache). Sign in on a different device, the admin loads in your preferred language.

Setting language for new users​

When a new editor signs in for the very first time, their users/{uid} record is created with preferences.adminLocale = "en" (English) by default. They can change it from the topbar after first login.

Admins can pre-set a new editor's locale by editing the user's Firestore record after the first login.

Continue​