platform-blocks-theminglisted
Install: claude install-skill platform-blocks/skills
# Platform Blocks Theming
Platform Blocks theming is a single `PlatformBlocksTheme` object distributed by
`PlatformBlocksProvider` through React context. Two complete themes ship with the
library (`DEFAULT_THEME` light, `DARK_THEME` dark) and the provider switches between
them automatically — unless you hand it a `theme` of your own, which turns that
switching off (see "Theme resolution rules").
All public APIs import from the package root:
```tsx
import {
PlatformBlocksProvider, PlatformBlocksThemeProvider, ThemeModeProvider,
useTheme, useThemeVisuals, useThemeLayout, useThemeMode, useColorScheme,
createTheme, DEFAULT_THEME, DARK_THEME,
resolveVariantRoles, CORE_COLORS,
withAlpha, readableTextOn, contrastRatio, composite, pickReadable,
Surface, useSurfaceLevel,
type PlatformBlocksTheme, type PlatformBlocksThemeOverride,
type ThemeModeConfig, type ColorSchemeMode,
} from '@platform-blocks/ui';
```
## Core workflow
1. **Mount the provider once** at the app root. With no `theme` prop it renders
`DEFAULT_THEME` in light and `{...DEFAULT_THEME, ...DARK_THEME, colorScheme: 'dark'}`
in dark, following the OS by default (`colorSchemeMode="auto"`).
2. **Add user-controlled light/dark/auto** by passing `themeModeConfig` (see
`ThemeModeConfig` in api.md). That mounts `ThemeModeProvider` internally and makes
`useThemeMode()` available anywhere below: `{ mode, setMode, cycleMode, actualColorScheme }`.
3. **Customize colors/tokens** either with a partial o