useThemeProvider

Loads the tenant's brand palette at startup: the cached one first, so colors survive an offline boot, then GET /theme.

Import

import { useThemeProvider } from '@core/theme/useThemeProvider'

Signature

function useThemeProvider(): {
  fetchTenantTheme: () => Promise<void>
}

Returns

Member	Type	Description
fetchTenantTheme	() => Promise<void>	Applies the cached palette, then refreshes it from the API. Never rejects.

What the endpoint returns

interface TenantTheme {
  primary: string
  secondary?: string
  accent?: string
  logoUrl?: string
}

Example

import { useThemeProvider } from '@core/theme/useThemeProvider'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

void useThemeProvider().fetchTenantTheme()

app.mount('#app')

In a project built from the template this call already runs, inside bootstrapAuth(). Call it yourself only if you drop that bootstrap.

Notes

• Order matters. localStorage['sa-tenant-theme'] is read and applied first, so a returning reader sees their brand immediately instead of a flash of the default teal, and an offline boot keeps it.
• A corrupt cache entry is swallowed and the config engine's defaults stand.
• The request is skipped in mock mode. With VITE_USE_MOCK_AUTH=true there is no /theme endpoint, and probing it would 502 against the dev proxy and print a red console error on every boot. The shipped .env.development sets it, so a fresh npm run dev never makes the request. Once you remove that line, your backend answers /theme.
• A failed request leaves whatever is already applied in place and refreshes nothing. The function never rejects, so void-ing it is safe.
• logoUrl is part of the payload's type but this function does not apply it. Read it yourself if your backend sends one.

Related

• useTheme — the engine this feeds.
• useAuth — bootstrapAuth calls this.
• Theming — how a palette becomes tokens.