docs(appearance): document preference hooks

2026-09-29 22:12:56 +08:00
parent 642cb71b93
commit e34675a931
4 changed files with 68 additions and 2 deletions
@@ -57,7 +57,18 @@ For a more granular layout, compose `baseColorSwatches`, `accentColorSwatches`,

 ## State bindings {#connected-layer}

-`AppearanceSettings` is the default binding layer between the atoms and the shared `PreferencesProvider`. A custom surface can call `usePreference` from `@workspace/preferences` for individual values without reusing the default layout.
+`AppearanceSettings` is the default binding layer between the atoms and the shared `PreferencesProvider`. A custom surface can use Appearance hooks such as `useThemeMode`, `useThemeConfig`, and `useResolvedTheme` without knowing shared-preference string keys or reusing the default layout.
+
+```tsx
+const [themeConfig, setThemeConfig] = useThemeConfig()
+const resolvedTheme = useResolvedTheme()
+
+<ThemeConfigCard
+  config={themeConfig}
+  onConfigChange={setThemeConfig}
+  scheme={resolvedTheme}
+/>
+```

 ## Live preview {#live-preview}