Changing where CodeEditor fields get useDarkMode value

examples/expressions_explorer/public/app.tsx

@@ -18,7 +18,7 @@ import {
   EuiText,
   EuiLink,
 } from '@elastic/eui';
-import { AppMountParameters, IUiSettingsClient } from '@kbn/core/public';
+import { AppMountParameters, IUiSettingsClient, ThemeServiceStart } from '@kbn/core/public';
 import { ExpressionsStart } from '@kbn/expressions-plugin/public';
 import { Start as InspectorStart } from '@kbn/inspector-plugin/public';
 import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
@@ -35,12 +35,21 @@ interface Props {
   actions: UiActionsStart;
   uiSettings: IUiSettingsClient;
   settings: SettingsStart;
+  theme: ThemeServiceStart;
 }
 
-const ExpressionsExplorer = ({ expressions, inspector, actions, uiSettings, settings }: Props) => {
+const ExpressionsExplorer = ({
+  expressions,
+  inspector,
+  actions,
+  uiSettings,
+  settings,
+  theme,
+}: Props) => {
   const { Provider: KibanaReactContextProvider } = createKibanaReactContext({
     uiSettings,
     settings,
+    theme,
   });
   return (
     <KibanaReactContextProvider>

examples/expressions_explorer/public/plugin.tsx

@@ -49,7 +49,7 @@ export class ExpressionsExplorerPlugin implements Plugin<void, void, SetupDeps,
       title: 'Expressions Explorer',
       navLinkStatus: AppNavLinkStatus.hidden,
       async mount(params: AppMountParameters) {
-        const [, depsStart] = await core.getStartServices();
+        const [coreStart, depsStart] = await core.getStartServices();
         const { renderApp } = await import('./app');
         return renderApp(
           {
@@ -58,6 +58,7 @@ export class ExpressionsExplorerPlugin implements Plugin<void, void, SetupDeps,
             actions: depsStart.uiActions,
             uiSettings: core.uiSettings,
             settings: core.settings,
+            theme: coreStart.theme,
           },
           params
         );

packages/kbn-text-based-editor/src/text_based_languages_editor.test.tsx

@@ -16,18 +16,23 @@ import {
   TextBasedLanguagesEditor,
   TextBasedLanguagesEditorProps,
 } from './text_based_languages_editor';
+import { of } from 'rxjs';
 
 describe('TextBasedLanguagesEditor', () => {
   const uiConfig: Record<string, any> = {};
   const uiSettings = {
     get: (key: string) => uiConfig[key],
   } as IUiSettingsClient;
+  const theme = {
+    theme$: of({ darkMode: false }),
+  };
 
   const services = {
     uiSettings,
     settings: {
       client: uiSettings,
     },
+    theme,
   };
 
   function renderTextBasedLanguagesEditorComponent(testProps: TextBasedLanguagesEditorProps) {

src/plugins/advanced_settings/public/management_app/advanced_settings.tsx

@@ -74,6 +74,7 @@ export class AdvancedSettings extends Component<AdvancedSettingsProps> {
           services={{
             uiSettings: this.props.settingsService.client,
             settings: this.props.settingsService,
+            theme: { theme$: this.props.theme },
           }}
         >
           <Form

src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx

@@ -21,6 +21,12 @@ jest.mock('@kbn/kibana-react-plugin/public/ui_settings/use_ui_setting', () => ({
   useUiSetting: jest.fn(),
 }));
 
+jest.mock('@kbn/kibana-react-plugin/public/theme/use_theme', () => ({
+  useKibanaTheme: jest.fn(() => {
+    return { darkMode: false };
+  }),
+}));
+
 const defaults = {
   requiresPageReload: false,
   readOnly: false,

src/plugins/discover/public/services/doc_views/components/doc_viewer_source/source.test.tsx

@@ -16,6 +16,7 @@ import { EuiButton, EuiEmptyPrompt, EuiLoadingSpinner } from '@elastic/eui';
 import { JsonCodeEditorCommon } from '../../../../components/json_code_editor/json_code_editor_common';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { buildDataTableRecord } from '../../../../utils/build_data_record';
+import { of } from 'rxjs';
 
 const mockDataView = {
   getComputedFields: () => [],
@@ -35,6 +36,9 @@ const services = {
   data: {
     dataViewService: mockDataViewService,
   },
+  theme: {
+    theme$: of({ darkMode: false }),
+  },
 };
 
 describe('Source Viewer component', () => {

src/plugins/inspector/public/plugin.tsx

@@ -106,6 +106,7 @@ export class InspectorPublicPlugin implements Plugin<Setup, Start> {
               uiSettings: core.uiSettings,
               share: startDeps.share,
               settings: core.settings,
+              theme: core.theme,
             }}
           />,
           { theme$: core.theme.theme$ }

src/plugins/inspector/public/ui/inspector_panel.test.tsx

@@ -14,9 +14,10 @@ import { Adapters } from '../../common';
 import type { ApplicationStart, HttpSetup, IUiSettingsClient } from '@kbn/core/public';
 import { SharePluginStart } from '@kbn/share-plugin/public';
 import { sharePluginMock } from '@kbn/share-plugin/public/mocks';
-import { applicationServiceMock } from '@kbn/core/public/mocks';
+import { applicationServiceMock, themeServiceMock } from '@kbn/core/public/mocks';
 import { settingsServiceMock } from '@kbn/core-ui-settings-browser-mocks';
 import type { SettingsStart } from '@kbn/core-ui-settings-browser';
+import { ThemeServiceStart } from '@kbn/core/public';
 
 describe('InspectorPanel', () => {
   let adapters: Adapters;
@@ -27,12 +28,14 @@ describe('InspectorPanel', () => {
     share: sharePluginMock.createStartContract(),
     uiSettings: {},
     settings: settingsServiceMock.createStartContract(),
+    theme: themeServiceMock.createStartContract(),
   } as unknown as {
     application: ApplicationStart;
     http: HttpSetup;
     share: SharePluginStart;
     uiSettings: IUiSettingsClient;
     settings: SettingsStart;
+    theme: ThemeServiceStart;
   };
 
   beforeEach(() => {

src/plugins/inspector/public/ui/inspector_panel.tsx

@@ -18,7 +18,12 @@ import {
   EuiFlyoutBody,
   EuiLoadingSpinner,
 } from '@elastic/eui';
-import { ApplicationStart, HttpStart, IUiSettingsClient } from '@kbn/core/public';
+import {
+  ApplicationStart,
+  HttpStart,
+  IUiSettingsClient,
+  ThemeServiceStart,
+} from '@kbn/core/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { SharePluginStart } from '@kbn/share-plugin/public';
 import type { SettingsStart } from '@kbn/core-ui-settings-browser';
@@ -48,6 +53,7 @@ interface InspectorPanelProps {
     uiSettings: IUiSettingsClient;
     share: SharePluginStart;
     settings: SettingsStart;
+    theme: ThemeServiceStart;
   };
 }
 

src/plugins/kibana_react/public/code_editor/code_editor.test.tsx

@@ -115,8 +115,8 @@ describe('<CodeEditor />', () => {
     // Verify our mount callback will be called
     expect(editorWillMount.mock.calls.length).toBe(1);
 
-    // Verify that both, default and transparent theme will be setup
-    expect((monaco.editor.defineTheme as jest.Mock).mock.calls.length).toBe(2);
+    // Verify that both, default and transparent theme will be setup and then redefined as new values come through from the theme$ observable
+    expect((monaco.editor.defineTheme as jest.Mock).mock.calls.length).toBe(4);
 
     // Verify our language features have been registered
     expect((monaco.languages.onLanguage as jest.Mock).mock.calls.length).toBe(1);

src/plugins/kibana_react/public/code_editor/code_editor.tsx

@@ -357,6 +357,15 @@ export const CodeEditor: React.FC<Props> = ({
     ]
   );
 
+  useEffect(() => {
+    // Register themes when 'useDarkThem' changes
+    monaco.editor.defineTheme('euiColors', useDarkTheme ? DARK_THEME : LIGHT_THEME);
+    monaco.editor.defineTheme(
+      'euiColorsTransparent',
+      useDarkTheme ? DARK_THEME_TRANSPARENT : LIGHT_THEME_TRANSPARENT
+    );
+  }, [useDarkTheme]);
+
   const _editorDidMount = useCallback(
     (editor: monaco.editor.IStandaloneCodeEditor, __monaco: unknown) => {
       if (__monaco !== monaco) {

src/plugins/kibana_react/public/code_editor/index.tsx

@@ -9,7 +9,7 @@
 import React from 'react';
 import { EuiDelayRender, EuiErrorBoundary, EuiSkeletonText } from '@elastic/eui';
 
-import { useUiSetting } from '../ui_settings';
+import { useKibanaTheme } from '../theme';
 import type { Props } from './code_editor';
 
 export * from './languages/constants';
@@ -40,11 +40,11 @@ export type CodeEditorProps = Props;
  * @see CodeEditorField to render a code editor in the same style as other EUI form fields.
  */
 export const CodeEditor: React.FunctionComponent<Props> = (props) => {
-  const darkMode = useUiSetting<boolean>('theme:darkMode');
+  const coreTheme = useKibanaTheme();
   return (
     <EuiErrorBoundary>
       <React.Suspense fallback={<Fallback height={props.height} />}>
-        <LazyBaseEditor {...props} useDarkTheme={darkMode} />
+        <LazyBaseEditor {...props} useDarkTheme={coreTheme.darkMode} />
       </React.Suspense>
     </EuiErrorBoundary>
   );
@@ -54,11 +54,11 @@ export const CodeEditor: React.FunctionComponent<Props> = (props) => {
  * Renders a Monaco code editor in the same style as other EUI form fields.
  */
 export const CodeEditorField: React.FunctionComponent<Props> = (props) => {
-  const darkMode = useUiSetting<boolean>('theme:darkMode');
+  const coreTheme = useKibanaTheme();
   return (
     <EuiErrorBoundary>
       <React.Suspense fallback={<Fallback height={props.height} />}>
-        <LazyCodeEditorField {...props} useDarkTheme={darkMode} />
+        <LazyCodeEditorField {...props} useDarkTheme={coreTheme.darkMode} />
       </React.Suspense>
     </EuiErrorBoundary>
   );

src/plugins/kibana_react/public/index.ts

@@ -86,7 +86,7 @@ export type { ToMountPointOptions } from './util';
 /** @deprecated Use `RedirectAppLinks` from `@kbn/shared-ux-link-redirect-app` */
 export { RedirectAppLinks } from './app_links';
 
-export { wrapWithTheme, KibanaThemeProvider } from './theme';
+export { wrapWithTheme, KibanaThemeProvider, useKibanaTheme } from './theme';
 
 /** dummy plugin, we just want kibanaReact to have its own bundle */
 export function plugin() {

src/plugins/kibana_react/public/page_template/no_data_page/no_data_card/elastic_agent_card.test.tsx

@@ -19,6 +19,7 @@ jest.mock('../../../context', () => ({
       },
       application: { capabilities: { navLinks: { integrations: true } } },
       uiSettings: { get: jest.fn() },
+      theme: { theme$: jest.fn() },
     },
   }),
 }));

src/plugins/kibana_react/public/theme/index.ts

@@ -8,4 +8,5 @@
 
 export { wrapWithTheme } from './wrap_with_theme';
 export { KibanaThemeProvider } from './kibana_theme_provider';
+export { useKibanaTheme } from './use_theme';
 export type { EuiTheme } from './types';

src/plugins/kibana_react/public/theme/use_theme.test.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FC, useEffect } from 'react';
+import { mountWithIntl } from '@kbn/test-jest-helpers';
+import type { CoreTheme } from '@kbn/core/public';
+import { KibanaContextProvider } from '../context';
+import { themeServiceMock } from '@kbn/core/public/mocks';
+import { useKibanaTheme } from './use_theme';
+
+describe('useKibanaTheme', () => {
+  let resultTheme: CoreTheme | undefined;
+
+  beforeEach(() => {
+    resultTheme = undefined;
+  });
+
+  const InnerComponent: FC = () => {
+    const theme = useKibanaTheme();
+    useEffect(() => {
+      resultTheme = theme;
+    }, [theme]);
+    return <div>foo</div>;
+  };
+
+  it('retrieve CoreTheme when theme service is provided in context', async () => {
+    const expectedCoreTheme: CoreTheme = { darkMode: false };
+
+    const themeServiceStart = themeServiceMock.createStartContract();
+
+    mountWithIntl(
+      <KibanaContextProvider services={{ theme: themeServiceStart }}>
+        <InnerComponent />
+      </KibanaContextProvider>
+    );
+
+    expect(resultTheme).toEqual(expectedCoreTheme);
+  });
+
+  it('throws type error when theme is not provided', async () => {
+    const mount = () => {
+      return mountWithIntl(
+        <KibanaContextProvider>
+          <InnerComponent />
+        </KibanaContextProvider>
+      );
+    };
+
+    expect(mount).toThrow(new TypeError('theme service not available in kibana-react context.'));
+  });
+});

src/plugins/kibana_react/public/theme/use_theme.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { CoreTheme } from '@kbn/core-theme-browser';
+import useObservable from 'react-use/lib/useObservable';
+import { useKibana } from '../context/context';
+
+export const useKibanaTheme = (): CoreTheme => {
+  const defaultTheme: CoreTheme = { darkMode: false };
+
+  const {
+    services: { theme },
+  } = useKibana();
+
+  if (!theme) {
+    throw new TypeError('theme service not available in kibana-react context.');
+  }
+
+  return useObservable(theme.theme$, defaultTheme);
+};

src/plugins/kibana_react/public/util/to_mount_point.tsx

@@ -11,7 +11,7 @@ import ReactDOM from 'react-dom';
 import { Observable } from 'rxjs';
 import { I18nProvider } from '@kbn/i18n-react';
 import type { MountPoint, CoreTheme } from '@kbn/core/public';
-import { KibanaThemeProvider } from '../theme';
+import { KibanaThemeProvider } from '../theme/kibana_theme_provider';
 
 export interface ToMountPointOptions {
   theme$?: Observable<CoreTheme>;

src/plugins/kibana_react/tsconfig.json

@@ -12,6 +12,7 @@
     "@kbn/test-jest-helpers",
     "@kbn/i18n",
     "@kbn/i18n-react",
+    "@kbn/core-theme-browser",
   ],
   "exclude": [
     "target/**/*",

src/plugins/saved_objects_management/public/management_section/object_view/saved_object_view.test.tsx

@@ -20,6 +20,7 @@ import {
   uiSettingsServiceMock,
   scopedHistoryMock,
   docLinksServiceMock,
+  themeServiceMock,
 } from '@kbn/core/public/mocks';
 
 import type { SavedObjectWithMetadata } from '../../types';
@@ -42,6 +43,7 @@ describe('SavedObjectEdition', () => {
   let applications: ReturnType<typeof applicationServiceMock.createStartContract>;
   let docLinks: ReturnType<typeof docLinksServiceMock.createStartContract>;
   let settings: ReturnType<typeof settingsServiceMock.createStartContract>;
+  let theme: ReturnType<typeof themeServiceMock.createStartContract>;
 
   const shallowRender = (overrides: Partial<SavedObjectEditionProps> = {}) => {
     return shallowWithI18nProvider(
@@ -62,6 +64,7 @@ describe('SavedObjectEdition', () => {
     history = scopedHistoryMock.create();
     docLinks = docLinksServiceMock.createStartContract();
     applications = applicationServiceMock.createStartContract();
+    theme = themeServiceMock.createStartContract();
     applications.capabilities = {
       navLinks: {},
       management: {},
@@ -86,6 +89,7 @@ describe('SavedObjectEdition', () => {
       uiSettings,
       docLinks: docLinks.links,
       settings,
+      theme,
     };
 
     bulkDeleteObjectsMock.mockResolvedValue([{}]);