useTheme

useTheme() は 'light' または 'dark' を返し host theme 変更時に re-render します。Read-only であり、app は workspace theme を変更しません。

TSX

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

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

コード

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

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

通常は native surface が継承する design token を優先します。