useTheme

useTheme() returns 'light' or 'dark' and re-renders with the host theme. It is read-only: apps adapt to the workspace theme; they do not mutate it.

TSX

import { useTheme } from '@sota/platform';

export function Preview() {
  const theme = useTheme();
  return <div className="preview" data-theme={theme}>Preview</div>;
}

Code

.preview {
  color: var(--foreground);
  background: var(--background);
}

.preview[data-theme='dark'] .diagram {
  filter: brightness(0.9);
}

Prefer the shared design tokens inherited by native surfaces. Use the hook only when behavior or non-CSS assets genuinely differ by theme.