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>
  );
}