Maofeng
50 lines
1.4 KiB
Plaintext
50 lines
1.4 KiB
Plaintext
---
|
|
title: Appearance settings dialog
|
|
description: Compose a trigger, controller, and hotkeys into a complete appearance settings flow.
|
|
order: 1
|
|
toc:
|
|
- id: controller
|
|
title: Mount the controller
|
|
- id: trigger
|
|
title: Add a trigger
|
|
- id: custom-handle
|
|
title: Independent dialog instance
|
|
---
|
|
|
|
## Mount the controller {#controller}
|
|
|
|
Mount one `AppearanceController` inside the application's shared `PreferencesProvider`. It composes the default settings content and registers `Mod+,` to open the dialog and `Mod+D` to toggle the theme.
|
|
|
|
```tsx
|
|
<PreferencesProvider
|
|
effects={[appearancePreferenceEffect]}
|
|
initialPreferences={preferences}
|
|
>
|
|
<AppearanceController />
|
|
<App />
|
|
</PreferencesProvider>
|
|
```
|
|
|
|
## Add a trigger {#trigger}
|
|
|
|
Place `AppearanceDialogTrigger` in a user menu, settings button, or command palette. By default it connects to the handle used by the default controller.
|
|
|
|
```tsx
|
|
<AppearanceDialogTrigger render={<button type="button" />}>
|
|
Appearance
|
|
</AppearanceDialogTrigger>
|
|
```
|
|
|
|
## Independent dialog instance {#custom-handle}
|
|
|
|
When a page needs an isolated appearance dialog, pass the same new handle to its trigger and controller.
|
|
|
|
```tsx
|
|
const handle = createAppearanceDialogHandle()
|
|
|
|
<AppearanceDialogTrigger handle={handle} render={<button type="button" />}>
|
|
Open theme settings
|
|
</AppearanceDialogTrigger>
|
|
<AppearanceController handle={handle} />
|
|
```
|