[v3-2-test] UI: Rework Monaco editor theme to match Chakra UI palette (#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>

Author: shivaam

airflow-core/src/airflow/ui/package.json

@@ -43,6 +43,7 @@
     "chart.js": "^4.5.1",
     "chartjs-adapter-dayjs-4": "^1.0.4",
     "chartjs-plugin-annotation": "^3.1.0",
+    "culori": "^4.0.2",
     "dayjs": "^1.11.19",
     "elkjs": "^0.11.1",
     "html-to-image": "^1.11.13",
@@ -78,6 +79,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/culori": "^4.0.1",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",

airflow-core/src/airflow/ui/pnpm-lock.yaml

@@ -19,7 +19,7 @@
 import Editor, { type EditorProps } from "@monaco-editor/react";
 import { useRef } from "react";
 
-import { useColorMode } from "src/context/colorMode";
+import { useMonacoTheme } from "src/context/colorMode";
 
 type JsonEditorProps = {
   readonly editable?: boolean;
@@ -39,7 +39,7 @@ export const JsonEditor = ({
   value,
   ...rest
 }: JsonEditorProps) => {
-  const { colorMode } = useColorMode();
+  const { beforeMount, theme } = useMonacoTheme();
   const onBlurRef = useRef(onBlur);
 
   onBlurRef.current = onBlur;
@@ -55,8 +55,6 @@ export const JsonEditor = ({
     scrollBeyondLastLine: false,
   };
 
-  const theme = colorMode === "dark" ? "vs-dark" : "vs-light";
-
   const handleChange = (val: string | undefined) => {
     onChange?.(val ?? "");
   };
@@ -72,6 +70,7 @@ export const JsonEditor = ({
       {...rest}
     >
       <Editor
+        beforeMount={beforeMount}
         height={height}
         language="json"
         onChange={handleChange}

airflow-core/src/airflow/ui/src/components/JsonEditor.tsx

@@ -21,7 +21,7 @@ import Editor, { type OnMount } from "@monaco-editor/react";
 import { useCallback, useState } from "react";
 
 import { ClipboardRoot, ClipboardIconButton } from "src/components/ui";
-import { useColorMode } from "src/context/colorMode";
+import { useMonacoTheme } from "src/context/colorMode";
 
 const MAX_HEIGHT = 300;
 const MIN_HEIGHT = 40;
@@ -34,12 +34,11 @@ type Props = {
 
 const RenderedJsonField = ({ collapsed = false, content, enableClipboard = true, ...rest }: Props) => {
   const contentFormatted = JSON.stringify(content, undefined, 2);
-  const { colorMode } = useColorMode();
+  const { beforeMount, theme } = useMonacoTheme();
   const lineCount = contentFormatted.split("\n").length;
   const expandedHeight = Math.min(Math.max(lineCount * 19 + 10, MIN_HEIGHT), MAX_HEIGHT);
   const [editorHeight, setEditorHeight] = useState(collapsed ? MIN_HEIGHT : expandedHeight);
   const [isReady, setIsReady] = useState(!collapsed);
-  const theme = colorMode === "dark" ? "vs-dark" : "vs-light";
 
   const handleMount: OnMount = useCallback(
     (editorInstance) => {
@@ -75,6 +74,7 @@ const RenderedJsonField = ({ collapsed = false, content, enableClipboard = true,
       {...rest}
     >
       <Editor
+        beforeMount={beforeMount}
         height={`${editorHeight}px`}
         language="json"
         onMount={handleMount}

airflow-core/src/airflow/ui/src/components/RenderedJsonField.tsx

@@ -19,3 +19,4 @@
 
 export * from "./ColorModeProvider";
 export * from "./useColorMode";
+export * from "./useMonacoTheme";

airflow-core/src/airflow/ui/src/context/colorMode/index.ts

@@ -0,0 +1,128 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import type { Monaco } from "@monaco-editor/react";
+import { renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// `useColorMode` is the only dependency of the hook we want to test. We mock
+// it with a mutable return so individual tests can drive light/dark behaviour.
+const colorModeMock = vi.fn<() => { colorMode: "dark" | "light" | undefined }>();
+
+vi.mock("./useColorMode", () => ({
+  useColorMode: () => colorModeMock(),
+}));
+
+// The hook registers Monaco themes exactly once via a module-level flag. We
+// reset modules between tests so each test starts with a fresh flag state.
+const loadHook = async () => {
+  const module = await import("./useMonacoTheme");
+
+  return module.useMonacoTheme;
+};
+
+const createFakeMonaco = () => {
+  const defineTheme = vi.fn();
+
+  return { defineTheme, monaco: { editor: { defineTheme } } as unknown as Monaco };
+};
+
+// happy-dom does not resolve Chakra's CSS custom properties, so the hook's
+// `getPropertyValue` calls would return empty strings. Stub it to return a
+// parseable value — culori accepts plain hex, so the exact string doesn't
+// matter as long as it's a valid CSS color the parser recognizes.
+const stubComputedStyle = () => {
+  vi.spyOn(globalThis, "getComputedStyle").mockReturnValue({
+    getPropertyValue: () => "#abcdef",
+  } as unknown as CSSStyleDeclaration);
+};
+
+describe("useMonacoTheme", () => {
+  beforeEach(() => {
+    vi.resetModules();
+    colorModeMock.mockReturnValue({ colorMode: "light" });
+    stubComputedStyle();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("returns the airflow-light theme name when color mode is light", async () => {
+    const useMonacoTheme = await loadHook();
+    const { result } = renderHook(() => useMonacoTheme());
+
+    expect(result.current.theme).toBe("airflow-light");
+  });
+
+  it("returns the airflow-dark theme name when color mode is dark", async () => {
+    colorModeMock.mockReturnValue({ colorMode: "dark" });
+    const useMonacoTheme = await loadHook();
+    const { result } = renderHook(() => useMonacoTheme());
+
+    expect(result.current.theme).toBe("airflow-dark");
+  });
+
+  it("falls back to airflow-light when color mode is undefined", async () => {
+    colorModeMock.mockReturnValue({ colorMode: undefined });
+    const useMonacoTheme = await loadHook();
+    const { result } = renderHook(() => useMonacoTheme());
+
+    expect(result.current.theme).toBe("airflow-light");
+  });
+
+  it("registers both airflow themes when beforeMount runs for the first time", async () => {
+    const useMonacoTheme = await loadHook();
+    const { result } = renderHook(() => useMonacoTheme());
+    const { defineTheme, monaco } = createFakeMonaco();
+
+    result.current.beforeMount(monaco);
+
+    expect(defineTheme).toHaveBeenCalledTimes(2);
+    expect(defineTheme).toHaveBeenCalledWith("airflow-light", expect.objectContaining({ base: "vs" }));
+    expect(defineTheme).toHaveBeenCalledWith("airflow-dark", expect.objectContaining({ base: "vs-dark" }));
+  });
+
+  it("does not re-register themes on subsequent beforeMount calls", async () => {
+    const useMonacoTheme = await loadHook();
+    const { result } = renderHook(() => useMonacoTheme());
+    const first = createFakeMonaco();
+    const second = createFakeMonaco();
+
+    result.current.beforeMount(first.monaco);
+    result.current.beforeMount(second.monaco);
+
+    expect(first.defineTheme).toHaveBeenCalledTimes(2);
+    expect(second.defineTheme).not.toHaveBeenCalled();
+  });
+
+  it("inherits from the base theme and adds no syntax token rules", async () => {
+    const useMonacoTheme = await loadHook();
+    const { result } = renderHook(() => useMonacoTheme());
+    const { defineTheme, monaco } = createFakeMonaco();
+
+    result.current.beforeMount(monaco);
+
+    for (const call of defineTheme.mock.calls) {
+      const [, themeData] = call as [string, { inherit: boolean; rules: Array<unknown> }];
+
+      expect(themeData.inherit).toBe(true);
+      expect(themeData.rules).toEqual([]);
+    }
+  });
+});

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

@@ -0,0 +1,98 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import type { Monaco } from "@monaco-editor/react";
+import { formatHex, parse } from "culori";
+
+import { useColorMode } from "./useColorMode";
+
+const LIGHT_THEME_NAME = "airflow-light";
+const DARK_THEME_NAME = "airflow-dark";
+
+let themesRegistered = false;
+
+// Convert any CSS color (including modern color spaces like OKLCH that Chakra
+// UI uses) to a #rrggbb string that Monaco's `defineTheme` accepts. culori
+// handles parsing and gamut mapping; we fall back to black for unset or
+// unparsable values so Monaco never sees an invalid color.
+const toHex = (cssVar: string): string => {
+  const value = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
+
+  return formatHex(parse(value)) ?? "#000000";
+};
+
+const defineAirflowMonacoThemes = (monaco: Monaco) => {
+  if (themesRegistered) {
+    return;
+  }
+
+  monaco.editor.defineTheme(LIGHT_THEME_NAME, {
+    base: "vs",
+    colors: {
+      "editor.background": toHex("--chakra-colors-gray-50"),
+      "editor.foreground": toHex("--chakra-colors-gray-900"),
+      "editor.inactiveSelectionBackground": toHex("--chakra-colors-gray-200"),
+      "editor.lineHighlightBackground": toHex("--chakra-colors-gray-100"),
+      "editor.selectionBackground": toHex("--chakra-colors-brand-200"),
+      "editorGutter.background": toHex("--chakra-colors-gray-50"),
+      "editorLineNumber.activeForeground": toHex("--chakra-colors-gray-700"),
+      "editorLineNumber.foreground": toHex("--chakra-colors-gray-400"),
+      "editorSuggestWidget.background": toHex("--chakra-colors-gray-50"),
+      "editorWidget.background": toHex("--chakra-colors-gray-50"),
+      "editorWidget.border": toHex("--chakra-colors-gray-300"),
+      "scrollbarSlider.activeBackground": `${toHex("--chakra-colors-gray-500")}c0`,
+      "scrollbarSlider.background": `${toHex("--chakra-colors-gray-300")}80`,
+      "scrollbarSlider.hoverBackground": `${toHex("--chakra-colors-gray-400")}a0`,
+    },
+    inherit: true,
+    rules: [],
+  });
+
+  monaco.editor.defineTheme(DARK_THEME_NAME, {
+    base: "vs-dark",
+    colors: {
+      "editor.background": toHex("--chakra-colors-gray-900"),
+      "editor.foreground": toHex("--chakra-colors-gray-100"),
+      "editor.inactiveSelectionBackground": toHex("--chakra-colors-gray-800"),
+      "editor.lineHighlightBackground": toHex("--chakra-colors-gray-800"),
+      "editor.selectionBackground": toHex("--chakra-colors-brand-800"),
+      "editorGutter.background": toHex("--chakra-colors-gray-900"),
+      "editorLineNumber.activeForeground": toHex("--chakra-colors-gray-300"),
+      "editorLineNumber.foreground": toHex("--chakra-colors-gray-600"),
+      "editorSuggestWidget.background": toHex("--chakra-colors-gray-900"),
+      "editorWidget.background": toHex("--chakra-colors-gray-900"),
+      "editorWidget.border": toHex("--chakra-colors-gray-700"),
+      "scrollbarSlider.activeBackground": `${toHex("--chakra-colors-gray-500")}c0`,
+      "scrollbarSlider.background": `${toHex("--chakra-colors-gray-700")}80`,
+      "scrollbarSlider.hoverBackground": `${toHex("--chakra-colors-gray-600")}a0`,
+    },
+    inherit: true,
+    rules: [],
+  });
+
+  themesRegistered = true;
+};
+
+export const useMonacoTheme = () => {
+  const { colorMode } = useColorMode();
+
+  return {
+    beforeMount: defineAirflowMonacoThemes,
+    theme: colorMode === "dark" ? DARK_THEME_NAME : LIGHT_THEME_NAME,
+  };
+};