alouette/skills/alouette-migration/references/25.md

A modern, customizable design system built on top of NativeWind v5 with configurable defaults

# alouette 25

Breaking changes of 25.0.0.

## To 25.0.0

### Regenerate a custom palette: `system` is resolved in CSS

`AlouetteProvider` now applies the `system` theme instead of a mode resolved
in JS, and a `ScopedTheme` takes `"system"` / `"system_<accent>"`. The palette
CSS resolves them with `prefers-color-scheme`, so the prerendered HTML already
wears the visitor's mode instead of flashing light until hydration. A palette
generated by an older `alouette/theme-generator` has no `.system*` blocks: on
web, the whole app then renders light whatever the OS asks for. Re-run the
app's `writeTheme(...)` (or `generateTheme(...)`) script. The `themeVariables`
map is unchanged.

### Pass a stored preference to `ScopedTheme` as is

Resolving the preference in JS before applying it renders `light` on the
server, so a dark-mode visitor sees the light page until the JS runs. Pass it
as is; keep `useResolvedColorMode` for what reads the mode in JS (a status bar
style, a computed color). `ColorModePreference` is unchanged.

```tsx
// Before
<ScopedTheme theme={useResolvedColorMode(preference)}>{children}</ScopedTheme>

// After
<ScopedTheme theme={preference}>{children}</ScopedTheme>
```

`useCurrentMode`, `useCurrentTheme`, `useResolvedColorMode` and
`useSystemColorMode` still return a resolved `light` / `dark` theme. On web
they now read `light` during the server render and hydration, then the OS
mode on the next render.

Changed appearance: on web, `html` and `body` take the dark tokens while a
`system` scope is in the document and the OS is dark.