Light and dark theme support for the text editor

[kumaradityaraj]

Close #394

Description

Adds theme support to @openworkflowspec/text-editor by introducing a theme prop that resolves to a Monaco Editor theme.

Changes

• Added a theme prop to TextEditor.
• Resolve the provided theme to a valid Monaco Editor theme.
• Apply the resolved theme when creating/configuring Monaco.
• Preserve the existing default behavior when no theme is provided.

Testing

• Verified the editor renders correctly with the configured Monaco theme.
• Verified the default theme behavior remains unchanged when no theme is provided.

Note (BUG)

Storybook has a bug in which the args and Globals are not getting in sync with each other which may lead to the docs reloads in dev mode and less reloads in production. In this pr all the features work perfectly fine in components but in docs it does not work. Link to official storybook bug issue - ISSE1 ISSUE2

[netlify]

✅ Deploy Preview for openworkflow-editor ready!

Name	Link
🔨 Latest commit	fb7ba12
🔍 Latest deploy log	https://app.netlify.com/projects/openworkflow-editor/deploys/6aaa643206f06d00082dfb52
😎 Deploy Preview	https://deploy-preview-435--openworkflow-editor.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

🟡 Changes recommended

Unresolved moderate issues affect initial Storybook synchronization, global Monaco theme behavior, and default-theme compatibility.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

Adds light, dark, and system color-mode support to the Monaco-based text editor.

Changes:

• Adds color-mode resolution and Monaco theme application.
• Updates Storybook integration, tests, and Monaco mocks.
• Preserves configurable theme behavior through the new prop.

File summaries

File	Summary	Findings
packages/text-editor/tests/text-editor/TextEditor.test.tsx	Tests theme behavior.	None.
packages/text-editor/tests/__mocks__/monaco-editor.ts	Mocks Monaco theme changes.	None.
packages/text-editor/stories/features/TextEditor.tsx	Forwards colorMode.	None.
packages/text-editor/src/types/colorMode.ts	Defines color-mode types.	None.
packages/text-editor/src/TextEditor.tsx	Applies themes and exposes colorMode.	Moderate (3 votes): Monaco themes are global across editor instances. Moderate (3 votes): omitted colorMode changes the previous default on dark systems. Nit (3 votes): document the prop in the README. Nit (1 vote): re-export the public color-mode type.
packages/text-editor/src/hooks/useResolvedColorMode.ts	Resolves explicit and system modes.	Nit (3 votes): add coverage for system preference resolution, updates, cleanup, and invalid values.
packages/text-editor/.storybook/preview.tsx	Synchronizes Storybook color-mode controls.	Moderate (2 votes): an initial persisted or URL-selected global mode may not apply until the toolbar changes.

Review details

Suppressed comments (1)

packages/text-editor/src/TextEditor.tsx:32

• ColorMode is now part of the exported TextEditorProps, but src/index.ts still exports only TextEditor, so consumers cannot import the new public type from @openworkflowspec/text-editor. The analogous diagram package re-exports its color-mode types from its entry point; re-export the public color-mode type here as well.

  colorMode?: ColorMode;

• Files reviewed: 7/7 changed files
• Comments generated: 5
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.