UI: Rework Monaco editor theme to match Chakra UI palette

[shivaam]

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

1. 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..
2. 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

1. breeze start-airflow --dev-mode --load-example-dags
2. Visit the DAG Code tab, XCom page, Connections > Edit > Extra field, Trigger DAG dialog, DAG Details page
3. 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]

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.

[shivaam]

Pushed 7dba46a addressing review feedback:

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

Stale

[pierrejeambrun]

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

[github-actions]

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]

Cool! Thanks for this UX improvement!

[shivaam]

Cool! Thanks for this UX improvement!

You are welcome. Happy to contribute:)

[shivaam]

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

1. 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..
2. 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

1. breeze start-airflow --dev-mode --load-example-dags
2. Visit the DAG Code tab, XCom page, Connections > Edit > Extra field, Trigger DAG dialog, DAG Details page
3. 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]

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.

[shivaam]

Pushed 7dba46a addressing review feedback:

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

Stale

[pierrejeambrun]

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

[github-actions]

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]

Cool! Thanks for this UX improvement!

[shivaam]

Cool! Thanks for this UX improvement!

You are welcome. Happy to contribute:)

[shivaam]

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

1. 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..
2. 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

1. breeze start-airflow --dev-mode --load-example-dags
2. Visit the DAG Code tab, XCom page, Connections > Edit > Extra field, Trigger DAG dialog, DAG Details page
3. 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]

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.

[shivaam]

Pushed 7dba46a addressing review feedback:

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

Stale

[pierrejeambrun]

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

[github-actions]

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]

Cool! Thanks for this UX improvement!

[shivaam]

Cool! Thanks for this UX improvement!

You are welcome. Happy to contribute:)

[shivaam]

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

1. 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..
2. 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

1. breeze start-airflow --dev-mode --load-example-dags
2. Visit the DAG Code tab, XCom page, Connections > Edit > Extra field, Trigger DAG dialog, DAG Details page
3. 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]

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.

[shivaam]

Pushed 7dba46a addressing review feedback:

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

Stale

[pierrejeambrun]

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

[github-actions]

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]

Cool! Thanks for this UX improvement!

[shivaam]

Cool! Thanks for this UX improvement!

You are welcome. Happy to contribute:)

[shivaam]

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

1. 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..
2. 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

1. breeze start-airflow --dev-mode --load-example-dags
2. Visit the DAG Code tab, XCom page, Connections > Edit > Extra field, Trigger DAG dialog, DAG Details page
3. 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]

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.

[shivaam]

Pushed 7dba46a addressing review feedback:

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

Stale

[pierrejeambrun]

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

[github-actions]

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]

Cool! Thanks for this UX improvement!

[shivaam]

Cool! Thanks for this UX improvement!

You are welcome. Happy to contribute:)

[shivaam]

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

1. 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..
2. 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

1. breeze start-airflow --dev-mode --load-example-dags
2. Visit the DAG Code tab, XCom page, Connections > Edit > Extra field, Trigger DAG dialog, DAG Details page
3. 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]

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.

[shivaam]

Pushed 7dba46a addressing review feedback:

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

Stale

[pierrejeambrun]

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

[github-actions]

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]

Cool! Thanks for this UX improvement!

[shivaam]

Cool! Thanks for this UX improvement!

You are welcome. Happy to contribute:)

[shivaam]

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

1. 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..
2. 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

1. breeze start-airflow --dev-mode --load-example-dags
2. Visit the DAG Code tab, XCom page, Connections > Edit > Extra field, Trigger DAG dialog, DAG Details page
3. 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]

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.

[shivaam]

Pushed 7dba46a addressing review feedback:

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

Stale

[pierrejeambrun]

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

[github-actions]

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]

Cool! Thanks for this UX improvement!

[shivaam]

Cool! Thanks for this UX improvement!

You are welcome. Happy to contribute:)

[shivaam]

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

1. 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..
2. 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

1. breeze start-airflow --dev-mode --load-example-dags
2. Visit the DAG Code tab, XCom page, Connections > Edit > Extra field, Trigger DAG dialog, DAG Details page
3. 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]

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.

[shivaam]

Pushed 7dba46a addressing review feedback:

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

Stale

[pierrejeambrun]

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

[github-actions]

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]

Cool! Thanks for this UX improvement!

[shivaam]

Cool! Thanks for this UX improvement!

You are welcome. Happy to contribute:)