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",
@@ -79,6 +80,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,
+ };
+};

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",
@@ -79,6 +80,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,
+ };
+};

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",
@@ -79,6 +80,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,
+ };
+};

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",
@@ -79,6 +80,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,
+ };
+};

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",
@@ -79,6 +80,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,
+ };
+};

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",
@@ -79,6 +80,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,
+ };
+};

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",
@@ -79,6 +80,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,
+ };
+};

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",
@@ -79,6 +80,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,
+ };
+};