{
  "title": "useThemeColors",
  "description": "Read the resolved theme tokens (colors, spacing, radii, typography) for the current color scheme.",
  "url": "/docs/hooks/use-theme-colors",
  "since": "0.0.1",
  "tags": [
    "hooks",
    "theming"
  ],
  "platform": "both",
  "source": "---\ntitle: useThemeColors\ndescription: Read the resolved theme tokens (colors, spacing, radii, typography) for the current color scheme.\nsince: 0.0.1\ntags: [hooks, theming]\nplatform: both\ncategory: hooks\n---\n\nReturns the fully resolved theme object for the current `colorScheme` ('light' | 'dark') under the nearest `<NoriProvider>` / `<ThemeProvider>`. Every component in the library reads its tokens through this hook — use it to style your own components in the same look-and-feel.\n\n## Usage\n\n```tsx\nimport { useThemeColors } from '@nori-ui/core/client';\nimport { px } from '@nori-ui/core/theme/px';\nimport { View, Text } from 'react-native';\n\nfunction Card() {\n    const colors = useThemeColors();\n    return (\n        <View\n            style={{\n                backgroundColor: colors.semantic.background.subtle,\n                borderRadius: px(colors.radius.md),\n                padding: px(colors.spacing['4']),\n            }}\n        >\n            <Text\n                style={{\n                    fontFamily: colors.fontFamily.body,\n                    fontSize: px(colors.fontSize.md),\n                    color: colors.semantic.text.default,\n                }}\n            >\n                Hello\n            </Text>\n        </View>\n    );\n}\n```\n\n## Token surface\n\nThe returned object exposes the following families (see [Theming](/docs/theming) for the full token tree):\n\n- `semantic.{background, text, border, …}` — color roles that change with the active scheme.\n- `colors.{neutral, primary, danger, success, warning, info}.{50…900}` — the raw palette ramps.\n- `spacing` — `0` … `64` numeric scale.\n- `radius` — `xs` … `full`.\n- `fontFamily`, `fontSize`, `fontWeight`, `lineHeight`, `letterSpacing` — typography.\n- `shadow.{sm, md, lg}` — elevation tokens.\n\n## Notes\n\n- The returned object is **memoized per scheme + theme combo** — safe to use as a dependency in `useMemo` / `useEffect` arrays.\n- `colors.semantic.*` automatically swaps between the active light / dark mapping; `colors.colors.*` does not.\n- The hook is client-only — import from `@nori-ui/core/client`.\n\n## Related\n\n- [Theming](/docs/theming) — token reference + custom theme construction.\n"
}