63 lines
2.1 KiB
Plaintext
63 lines
2.1 KiB
Plaintext
|
---
|
||
|
|
title: Overview
|
||
|
|
description: Understand the Appearance package atoms, theme data, and preference boundary.
|
||
|
|
order: 1
|
||
|
|
toc:
|
||
|
|
- id: package-role
|
||
|
|
title: Package role
|
||
|
|
- id: atomic-components
|
||
|
|
title: Atomic components
|
||
|
|
- id: preferences
|
||
|
|
title: Preference integration
|
||
|
|
---
|
||
|
|
|
||
|
|
## Package role {#package-role}
|
||
|
|
|
||
|
|
`@workspace/appearance` provides the definitions, effects, theme data, and UI components for theme modes, base colors, accent colors, and compact layouts. It does not create its own provider or store. The application aggregates it with other preference packages through `@workspace/preferences`.
|
||
|
|
|
||
|
|
## Atomic components {#atomic-components}
|
||
|
|
|
||
|
|
The controlled components can be composed independently without preference context:
|
||
|
|
|
||
|
|
- `ThemeModeField` selects light, dark, or system mode.
|
||
|
|
- `CompactLayoutField` toggles the main content width.
|
||
|
|
- `ThemeColorPicker` and `ThemeColorSwatchButton` select theme colors.
|
||
|
|
- `ThemePreview` previews a set of theme variables.
|
||
|
|
- `ThemeConfigCard` combines the preview, base color, and accent color controls.
|
||
|
|
- `ThemeToggle` switches between light and dark themes.
|
||
|
|
|
||
|
|
`AppearanceSettings`, `AppearanceDialog`, and `AppearanceController` are optional composition layers built from these atoms.
|
||
|
|
|
||
|
|
## Preference integration {#preferences}
|
||
|
|
|
||
|
|
```tsx
|
||
|
|
import {
|
||
|
|
createDefaultPreferences,
|
||
|
|
PreferencesProvider,
|
||
|
|
} from "@workspace/preferences"
|
||
|
|
import {
|
||
|
|
AppearanceController,
|
||
|
|
appearancePreferenceDefinitions,
|
||
|
|
appearancePreferenceEffect,
|
||
|
|
} from "@workspace/appearance"
|
||
|
|
|
||
|
|
const preferenceDefinitions = {
|
||
|
|
...appearancePreferenceDefinitions,
|
||
|
|
}
|
||
|
|
const initialPreferences = createDefaultPreferences(preferenceDefinitions)
|
||
|
|
const preferenceEffects = [appearancePreferenceEffect] as const
|
||
|
|
|
||
|
|
export function App() {
|
||
|
|
return (
|
||
|
|
<PreferencesProvider
|
||
|
|
effects={preferenceEffects}
|
||
|
|
initialPreferences={initialPreferences}
|
||
|
|
>
|
||
|
|
<AppearanceController />
|
||
|
|
</PreferencesProvider>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
Add definitions and effects from locale, keyboard, or other packages to the same objects. The application can persist every `{ key, value }` update through the shared `onPreferenceChange` and parse cookies on the server with the aggregated definitions.
|