Skip to main content
sunpeak API

​
Overview

The useStyles hook returns the host’s style configuration. It is a convenience wrapper around useHostContext.

Wraps onhostcontextchanged

MCP Apps SDK reference
For most use cases, prefer the SDK’s useHostStyleVariables or useHostFonts hooks which automatically apply styles to the document. Use useStyles when you need raw access to the style data.

​
Import

import { useStyles } from 'sunpeak';

​
Signature

function useStyles(): McpUiHostStyles | undefined

​
Returns

​
return
McpUiHostStyles | undefined
The host’s style configuration including CSS variables and font settings, or undefined if the host does not provide styles.

​
Usage

import { useStyles } from 'sunpeak';

function MyResource() {
  const styles = useStyles();

  return (
    <div>
      {styles?.variables?.['--color-text-primary'] && (
        <p>Primary text color: {styles.variables['--color-text-primary']}</p>
      )}
    </div>
  );
}