UI: Rework Monaco editor theme to match Chakra UI palette by shivaam · Pull Request #64748 · apache/airflow

shivaam · 2026-04-05T19:26:46Z

Summary

Register custom airflow-light / airflow-dark Monaco themes derived from Chakra UI color tokens so that every Monaco editor in the UI (DAG Code viewer, code diff viewer, JSON editor, RenderedJsonField) visually integrates with the rest of the app instead of using Monaco's default vs / vs-dark themes.

closes: #64253

Open Questions

Design question: I added a module-level themesRegistered flag so defineTheme
only runs on the first beforeMount. Without it, pages with many editors (e.g.
XCom table with ~50 rows) re-register themes on every mount. Measured cost without the guard: ~4ms on a 50-editor page. Negligible. Happy to drop the flag for simpler code + tests if you prefer..
Design question: Chakra v3 uses OKLCH, Monaco's defineTheme only accepts
#rrggbb. I convert by rasterizing a 1x1 canvas pixel and reading back sRGB
via getImageData. I checked ctx.fillStyle readback — it preserves the OKLCH string unchanged on Chrome 111+, so that path silently fails (this is what PR Rework Monaco editor style to match Chakra UI color palette #64268 does).

Implementation notes

New hook useMonacoTheme (src/context/colorMode/useMonacoTheme.ts) — registers both custom themes exactly once via a module-level flag, returns a stable beforeMount callback and the correct theme name for the current color mode.
inherit: true + empty rules — Monaco's default syntax highlighting (keywords, strings, comments) is preserved. Only editor shell colors (background, foreground, gutter, selection, scrollbar, line numbers) are overridden.
OKLCH → hex conversion via getImageData — Chakra v3 uses OKLCH colors. ctx.fillStyle readback cannot be relied on because Chrome 111+ preserves the OKLCH string instead of converting to hex, which Monaco would silently ignore.
Single registration — themes are registered once per session via a module-level flag so pages with many editor instances (e.g. XCom table with many RenderedJsonField rows) don't pay the cost on every mount.
All four Monaco usages (JsonEditor, RenderedJsonField, Code, CodeDiffViewer) are updated to use the hook. No changes to component structure, dynamic height behavior, or any other behavior beyond theme wiring.

How to test

breeze start-airflow --dev-mode --load-example-dags
Visit the DAG Code tab, XCom page, Connections > Edit > Extra field, Trigger DAG dialog, DAG Details page
Toggle between light and dark mode — editor shell colors should smoothly match the surrounding Chakra UI surfaces instead of the default VS Code palette

Was generative AI tooling used to co-author this PR?

Yes — Claude Code (Opus 4.6)

Generated-by: Claude Code (Opus 4.6) following the guidelines

pierrejeambrun

Just one nit, but directions looks good to me.

Let me know when this is out of draft (fix static checks, CI more generally) and it's ready for a more in depth review + local testing.

shivaam · 2026-04-08T15:30:17Z

Just one nit, but directions looks good to me.

Let me know when this is out of draft (fix static checks, CI more generally) and it's ready for a more in depth review + local testing.

@pierrejeambrun handled the nits and the PR is ready for local testing

pierrejeambrun

LGTM. Tested locally and working as expected.

IT's also nicely inheriting custom theming:
Overriding the brand color palette (see text selection)

Someone overriding the 'grey' color palette will have something like:

vs

Copilot

Pull request overview

Registers custom airflow-light / airflow-dark Monaco themes derived from Chakra UI tokens, and wires them into all Monaco editor usages so editor chrome matches the app’s design system.

Changes:

Add useMonacoTheme hook that defines and selects the Monaco theme based on current Chakra color mode.
Update all Monaco editor call sites (Editor + DiffEditor) to use the hook’s beforeMount + theme.
Add unit tests covering theme selection and one-time registration behavior.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
airflow-core/src/airflow/ui/src/context/colorMode/useMonacoTheme.ts	Defines custom Monaco themes using Chakra CSS variables and exposes `beforeMount` + `theme`.
airflow-core/src/airflow/ui/src/context/colorMode/useMonacoTheme.test.ts	Tests theme name selection and single registration behavior.
airflow-core/src/airflow/ui/src/context/colorMode/index.ts	Exports `useMonacoTheme` from the colorMode barrel.
airflow-core/src/airflow/ui/src/pages/Dag/Code/Code.tsx	Uses `useMonacoTheme` for the DAG code viewer Monaco editor.
airflow-core/src/airflow/ui/src/pages/Dag/Code/CodeDiffViewer.tsx	Uses `useMonacoTheme` for the DAG code diff Monaco editor.
airflow-core/src/airflow/ui/src/components/JsonEditor.tsx	Uses `useMonacoTheme` for the JSON editor component.
airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx	Uses `useMonacoTheme` for read-only rendered JSON Monaco editor instances.

Register custom airflow-light and airflow-dark Monaco themes derived from Chakra UI color tokens so that the DAG Code viewer, diff viewer, and JSON editors visually integrate with the rest of the app instead of using Monaco's default vs/vs-dark themes. The new useMonacoTheme hook rasterizes a single pixel through a 2D canvas and reads it back via getImageData to convert Chakra's OKLCH color values into the #rrggbb strings that Monaco's defineTheme accepts — ctx.fillStyle readback cannot be used because modern Chrome preserves the original OKLCH string. Themes are registered once via a module-level flag and then passed to every Monaco editor via the beforeMount callback. closes: apache#64253

Address review feedback: React Compiler handles memoization, so the useCallback wrapper around defineAirflowMonacoThemes is redundant. Pass the function reference directly instead. Also fix prettier formatting in tests.

Address review feedback: the canvas-based cssVarToHex was brittle (depended on Canvas2D rendering and browser-specific fillStyle behavior, and required canvas mocking in happy-dom tests). Replace it with culori's parse/formatHex, which handles OKLCH and other modern color spaces directly with no DOM rasterization. Also add afterEach(vi.restoreAllMocks()) to the tests so the getComputedStyle spy does not leak between runs.

shivaam · 2026-04-11T13:27:09Z

Pushed 7dba46a addressing review feedback:

Canvas → culori for color conversion (@pierrejeambrun)
afterEach(vi.restoreAllMocks()) to prevent mock leak (@Copilot)

unparseable -> unparsable.

Stale

pierrejeambrun

My bad, my testing setup was wrong. Working as expected thanks 🎉 , nice one

…#64748) * UI: Rework Monaco editor theme to match Chakra UI palette Register custom airflow-light and airflow-dark Monaco themes derived from Chakra UI color tokens so that the DAG Code viewer, diff viewer, and JSON editors visually integrate with the rest of the app instead of using Monaco's default vs/vs-dark themes. The new useMonacoTheme hook rasterizes a single pixel through a 2D canvas and reads it back via getImageData to convert Chakra's OKLCH color values into the #rrggbb strings that Monaco's defineTheme accepts — ctx.fillStyle readback cannot be used because modern Chrome preserves the original OKLCH string. Themes are registered once via a module-level flag and then passed to every Monaco editor via the beforeMount callback. closes: #64253 * UI: Remove unnecessary useCallback in useMonacoTheme Address review feedback: React Compiler handles memoization, so the useCallback wrapper around defineAirflowMonacoThemes is redundant. Pass the function reference directly instead. Also fix prettier formatting in tests. * UI: Use culori for Monaco theme color conversion Address review feedback: the canvas-based cssVarToHex was brittle (depended on Canvas2D rendering and browser-specific fillStyle behavior, and required canvas mocking in happy-dom tests). Replace it with culori's parse/formatHex, which handles OKLCH and other modern color spaces directly with no DOM rasterization. Also add afterEach(vi.restoreAllMocks()) to the tests so the getComputedStyle spy does not leak between runs. * UI: Fix codespell typo in useMonacoTheme comment unparseable -> unparsable. (cherry picked from commit bfe46f6) Co-authored-by: Shivam Rastogi <6463385+shivaam@users.noreply.github.com>

github-actions · 2026-04-14T15:59:56Z

Backport successfully created: v3-2-test

Note: As of Merging PRs targeted for Airflow 3.X
the committer who merges the PR is responsible for backporting the PRs that are bug fixes (generally speaking) to the maintenance branches.

In matter of doubt please ask in #release-management Slack channel.

Status	Branch	Result
✅	v3-2-test

jscheffl · 2026-04-15T19:20:35Z

Cool! Thanks for this UX improvement!

shivaam · 2026-04-15T20:19:00Z

Cool! Thanks for this UX improvement!

You are welcome. Happy to contribute:)

boring-cyborg bot added the area:UI Related to UI/UX. For Frontend Developers. label Apr 5, 2026

shivaam mentioned this pull request Apr 5, 2026

Rework style for the monaco-editor #64253

Closed

1 task

shivaam commented Apr 5, 2026

View reviewed changes

Comment thread airflow-core/src/airflow/ui/src/context/colorMode/useMonacoTheme.ts

pierrejeambrun mentioned this pull request Apr 7, 2026

Improve Monaco editor styling to better match Airflow UI #64290

Closed

pierrejeambrun reviewed Apr 7, 2026

View reviewed changes

Comment thread airflow-core/src/airflow/ui/src/context/colorMode/useMonacoTheme.ts Outdated

Comment thread airflow-core/src/airflow/ui/src/context/colorMode/useMonacoTheme.ts

shivaam marked this pull request as ready for review April 8, 2026 06:41

shivaam requested review from bbovenzi, choo121600, guan404ming, ryanahamilton, shubhamraj-git and vatsrahul1001 as code owners April 8, 2026 06:42

pierrejeambrun approved these changes Apr 10, 2026

View reviewed changes

pierrejeambrun added this to the Airflow 3.2.1 milestone Apr 10, 2026

pierrejeambrun added the backport-to-v3-2-test Mark PR with this label to backport to v3-2-test branch label Apr 10, 2026

pierrejeambrun reviewed Apr 10, 2026

View reviewed changes

Comment thread airflow-core/src/airflow/ui/src/context/colorMode/useMonacoTheme.ts Outdated

kaxil requested a review from Copilot April 10, 2026 19:55

Copilot AI reviewed Apr 10, 2026

View reviewed changes

Comment thread airflow-core/src/airflow/ui/src/context/colorMode/useMonacoTheme.test.ts Outdated

shivaam added 3 commits April 11, 2026 05:23

UI: Remove unnecessary useCallback in useMonacoTheme

eff86d1

Address review feedback: React Compiler handles memoization, so the useCallback wrapper around defineAirflowMonacoThemes is redundant. Pass the function reference directly instead. Also fix prettier formatting in tests.

shivaam force-pushed the fix/monaco-theme-64253 branch from 061ca08 to 7dba46a Compare April 11, 2026 13:21

shivaam added 2 commits April 11, 2026 08:28

UI: Fix codespell typo in useMonacoTheme comment

2f7abcb

unparseable -> unparsable.

Merge branch 'main' into fix/monaco-theme-64253

b854cdb

vatsrahul1001 modified the milestones: Airflow 3.2.1, Airflow 3.2.2 Apr 14, 2026

pierrejeambrun previously approved these changes Apr 14, 2026

View reviewed changes

pierrejeambrun approved these changes Apr 14, 2026

View reviewed changes

pierrejeambrun merged commit bfe46f6 into apache:main Apr 14, 2026
80 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI: Rework Monaco editor theme to match Chakra UI palette#64748

UI: Rework Monaco editor theme to match Chakra UI palette#64748
pierrejeambrun merged 5 commits intoapache:mainfrom
shivaam:fix/monaco-theme-64253

shivaam commented Apr 5, 2026 •

edited

Loading

Uh oh!

Uh oh!

pierrejeambrun left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

shivaam commented Apr 8, 2026

Uh oh!

pierrejeambrun left a comment

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

shivaam commented Apr 11, 2026

Uh oh!

pierrejeambrun left a comment •

edited

Loading

Uh oh!

Uh oh!

github-actions bot commented Apr 14, 2026

Uh oh!

jscheffl commented Apr 15, 2026

Uh oh!

shivaam commented Apr 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

shivaam commented Apr 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Implementation notes

How to test

Was generative AI tooling used to co-author this PR?

Uh oh!

Uh oh!

pierrejeambrun left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

shivaam commented Apr 8, 2026

Uh oh!

pierrejeambrun left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

shivaam commented Apr 11, 2026

Uh oh!

pierrejeambrun left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented Apr 14, 2026

Backport successfully created: v3-2-test

Uh oh!

jscheffl commented Apr 15, 2026

Uh oh!

shivaam commented Apr 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

shivaam commented Apr 5, 2026 •

edited

Loading

pierrejeambrun left a comment •

edited

Loading

pierrejeambrun left a comment •

edited

Loading