Skip to main content

Overview

The useTheme hook returns the host’s current theme. It is a convenience wrapper around useHostContext.

Import

import { useTheme } from 'sunpeak';

Signature

function useTheme(): McpUiTheme

Returns

return
'light' | 'dark'
The current theme. Defaults to 'light' when unavailable.

Usage

import { useTheme } from 'sunpeak';

function MyResource() {
  const theme = useTheme();

  return (
    <div className={theme === 'dark' ? 'bg-black text-white' : 'bg-white text-black'}>
      ...
    </div>
  );
}