UI: Rework Monaco editor theme to match Chakra UI palette

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/src/components/JsonEditor.tsx

@@ -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/RenderedJsonField.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/context/colorMode/index.ts

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

airflow-core/src/airflow/ui/src/context/colorMode/useMonacoTheme.test.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.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,
+  };
+};