Inherit core theme in React plugins

airflow-core/src/airflow/ui/src/context/ChakraCustomProvider.tsx

@@ -31,7 +31,12 @@ export const ChakraCustomProvider = ({ children }: PropsWithChildren) => {
       return undefined;
     }
 
-    return createTheme(theme as Theme);
+    const syst = createTheme(theme as Theme);
+
+    // Once the system is created, make it globally available to dynamically imported React plugins.
+    Reflect.set(globalThis, "ChakraUISystem", syst);
+
+    return syst;
   }, [theme]);
 
   return system && <ChakraProvider value={system}>{children}</ChakraProvider>;

dev/react-plugin-tools/react_plugin_template/README.md

@@ -72,6 +72,8 @@ For development and testing, use `pnpm dev` which will:
 - Start a development server on port 5173
 - Load the component using `src/dev.tsx` entry point
 - Enable hot module replacement
+- Chakra Theme provided for local development is the default one, but in production when the plugin is loaded into the Airflow Core UI,
+  it will inherit the main application theme for a consistent look and feel.
 
 ### Library Configuration
 

dev/react-plugin-tools/react_plugin_template/src/global.d.ts

@@ -0,0 +1,24 @@
+/*!
+ * 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.
+ */
+
+export interface global {}
+
+declare global {
+  var ChakraUISystem: SystemContext | undefined
+}

dev/react-plugin-tools/react_plugin_template/src/main.tsx

@@ -23,7 +23,7 @@ import { FC } from "react";
 import { ColorModeProvider } from "src/context/colorMode";
 import { HomePage } from "src/pages/HomePage";
 
-import { system } from "./theme";
+import { localSystem } from "./theme";
 
 export interface PluginComponentProps {
   // Add any props your plugin component needs
@@ -33,6 +33,12 @@ export interface PluginComponentProps {
  * Main plugin component
  */
 const PluginComponent: FC<PluginComponentProps> = (props) => {
+
+  // Use the globalChakraUISystem provided by the Airflow Core UI,
+  // so the plugin has a consistent theming with the host Airflow UI,
+  // fallback to localSystem for local development.
+  const system = (globalThis.ChakraUISystem)  ?? localSystem;
+
   return (
     <ChakraProvider value={system}>
       <ColorModeProvider>