shivaam opened a new pull request, #64748: URL: https://github.com/apache/airflow/pull/64748
## 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 ## Motivation Monaco was adopted across the UI via https://github.com/apache/airflow/pull/55467 (DAG code viewer + diff) and https://github.com/apache/airflow/pull/62708 (JSON editors) but has always shipped with the default VS Code themes. The result is a visible mismatch between editor panels and Chakra UI-themed surfaces — editors look like a VS Code window embedded inside a different application. ## 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. Rasterizing a single pixel and reading back its sRGB bytes is the only reliable path. - **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 4. Open devtools console on the DAG Code tab and run: ```js const editor = document.querySelector('.monaco-editor .monaco-editor-background'); console.log(getComputedStyle(editor).backgroundColor); ``` In light mode this should report `rgb(248, 250, 253)` (≈ `#f8fafd`, Chakra `gray.50`), not `rgb(255, 255, 255)` (VS Code default) 5. `pnpm lint` — zero errors 6. `pnpm test` — 185 tests pass (179 existing + 6 new for the hook) ## Tests New file `src/context/colorMode/useMonacoTheme.test.ts` covers: - Theme name returned for `colorMode = "light" | "dark" | undefined` - `defineTheme` invoked twice (light + dark) on first `beforeMount` - Module-level guard prevents re-registration on subsequent mounts - Both registered themes use `inherit: true` and empty `rules` The OKLCH→hex canvas conversion itself is validated end-to-end in a real browser during manual testing — jsdom/happy-dom do not implement the full Canvas2D color pipeline so unit-testing that path would only exercise the mock, not the real behaviour. ## Related work There is an earlier attempt at this same issue in https://github.com/apache/airflow/pull/64268. That PR bundles bulk task instance actions from #63855 and uses `ctx.fillStyle` readback for the OKLCH conversion, which silently falls back to default themes on Chrome 111+. This PR is scope-isolated to the Monaco theme fix and uses the `getImageData` approach which I verified works against Chrome's current behavior. --- ##### Was generative AI tooling used to co-author this PR? - [x] Yes — Claude Code (Opus 4.6) Generated-by: Claude Code (Opus 4.6) following [the guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#gen-ai-assisted-contributions) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
