ZShip TanStack
Back to docs

Documentation

i18n and theme

How language selection, API locale, and light/dark mode are managed.

Article
PreviousNext

The template has app-level providers for language and theme state.

Language

src/lib/client/i18n.tsx owns:

  • a broad locale list aligned with Nuxt (en, zh-CN, zh-TW, ja, ko, and more)
  • product requirement for parity: full UI coverage for en + zh-CN
  • localStorage persistence (zship_tanstack_locale)
  • document lang / dir updates
  • typed translation keys grouped by shell / auth / dashboard / pricing / ai / legal / content
  • API locale normalization for backend requests (localeToApiLocale)

The root shell exposes a locale switch. API calls that support localized data use the selected locale instead of hard-coding English.

URL strategy (current)

Default remains client locale (option A): no /zh-CN path prefix. This is faster to ship and matches the current TanStack shell.

Path-prefix routing (/zh-CN/..., option B) is deferred. Re-evaluate later if SEO needs locale-specific crawl URLs comparable to Nuxt.

Docs localization

src/lib/content/docs.ts stores English as the base and optional zhCN field overrides for title/label/description/content. The docs UI resolves copy with the active client locale.

Theme

src/lib/client/theme.tsx owns:

  • light, dark, and system modes
  • localStorage persistence
  • data-theme and color-scheme updates on document.documentElement

The CSS includes explicit html[data-theme="dark"] overrides and a prefers-color-scheme: dark fallback before the client provider hydrates.