Respect system dark mode in ESQL editor (elastic#200233)

When `uiSettings.overrides.theme:darkMode: true` is set, the ESQL editor
uses dark mode.

When `uiSettings.overrides.theme:darkMode: system` is set, the ESQL
editor uses light mode, while the rest of the UI uses dark mode.

Update the ESQL theme creation to create both light and dark variations
of the theme at startup and use the theme in React component to
determine which ESQL theme to use at runtime.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>

packages/kbn-esql-editor/src/esql_editor.test.tsx

@@ -16,23 +16,20 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { ESQLEditor } from './esql_editor';
 import type { ESQLEditorProps } from './types';
 import { ReactWrapper } from 'enzyme';
-import { of } from 'rxjs';
+import { coreMock } from '@kbn/core/server/mocks';
 
 describe('ESQLEditor', () => {
   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,
+    core: coreMock.createStart(),
   };
 
   function renderESQLEditorComponent(testProps: ESQLEditorProps) {

packages/kbn-esql-editor/src/esql_editor.tsx

@@ -25,7 +25,14 @@ import type { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import type { AggregateQuery } from '@kbn/es-query';
 import type { ExpressionsStart } from '@kbn/expressions-plugin/public';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { ESQLLang, ESQL_LANG_ID, ESQL_THEME_ID, monaco, type ESQLCallbacks } from '@kbn/monaco';
+import {
+  ESQLLang,
+  ESQL_LANG_ID,
+  ESQL_DARK_THEME_ID,
+  ESQL_LIGHT_THEME_ID,
+  monaco,
+  type ESQLCallbacks,
+} from '@kbn/monaco';
 import memoize from 'lodash/memoize';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
@@ -91,7 +98,8 @@ export const ESQLEditor = memo(function ESQLEditor({
     fieldsMetadata,
     uiSettings,
   } = kibana.services;
-  const timeZone = core?.uiSettings?.get('dateFormat:tz');
+  const darkMode = core.theme?.getTheme().darkMode;
+  const timeZone = uiSettings?.get('dateFormat:tz');
   const histogramBarTarget = uiSettings?.get('histogram:barTarget') ?? 50;
   const [code, setCode] = useState<string>(query.esql ?? '');
   // To make server side errors less "sticky", register the state of the code when submitting
@@ -597,7 +605,7 @@ export const ESQLEditor = memo(function ESQLEditor({
       vertical: 'auto',
     },
     scrollBeyondLastLine: false,
-    theme: ESQL_THEME_ID,
+    theme: darkMode ? ESQL_DARK_THEME_ID : ESQL_LIGHT_THEME_ID,
     wordWrap: 'on',
     wrappingIndent: 'none',
   };

packages/kbn-monaco/index.ts

@@ -20,7 +20,7 @@ export {
 } from './src/monaco_imports';
 export { XJsonLang } from './src/xjson';
 export { SQLLang } from './src/sql';
-export { ESQL_LANG_ID, ESQL_THEME_ID, ESQLLang } from './src/esql';
+export { ESQL_LANG_ID, ESQL_DARK_THEME_ID, ESQL_LIGHT_THEME_ID, ESQLLang } from './src/esql';
 export type { ESQLCallbacks } from '@kbn/esql-validation-autocomplete';
 
 export * from './src/painless';

packages/kbn-monaco/src/esql/index.ts

@@ -7,6 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { ESQL_LANG_ID, ESQL_THEME_ID } from './lib/constants';
+export { ESQL_LANG_ID, ESQL_DARK_THEME_ID, ESQL_LIGHT_THEME_ID } from './lib/constants';
 export { ESQLLang } from './language';
-export { buildESQlTheme } from './lib/esql_theme';
+export { buildESQLTheme } from './lib/esql_theme';

packages/kbn-monaco/src/esql/lib/constants.ts

@@ -8,6 +8,7 @@
  */
 
 export const ESQL_LANG_ID = 'esql';
-export const ESQL_THEME_ID = 'esqlTheme';
+export const ESQL_LIGHT_THEME_ID = 'esqlThemeLight';
+export const ESQL_DARK_THEME_ID = 'esqlThemeDark';
 
 export const ESQL_TOKEN_POSTFIX = '.esql';

packages/kbn-monaco/src/esql/lib/esql_theme.test.ts

@@ -9,12 +9,12 @@
 
 import { ESQLErrorListener, getLexer as _getLexer } from '@kbn/esql-ast';
 import { ESQL_TOKEN_POSTFIX } from './constants';
-import { buildESQlTheme } from './esql_theme';
+import { buildESQLTheme } from './esql_theme';
 import { CharStreams } from 'antlr4';
 
 describe('ESQL Theme', () => {
   it('should not have multiple rules for a single token', () => {
-    const theme = buildESQlTheme();
+    const theme = buildESQLTheme({ darkMode: false });
 
     const seen = new Set<string>();
     const duplicates: string[] = [];
@@ -40,7 +40,7 @@ describe('ESQL Theme', () => {
     .map((name) => name!.toLowerCase());
 
   it('every rule should apply to a valid lexical name', () => {
-    const theme = buildESQlTheme();
+    const theme = buildESQLTheme({ darkMode: false });
 
     // These names aren't from the lexer... they are added on our side
     // see packages/kbn-monaco/src/esql/lib/esql_token_helpers.ts
@@ -62,7 +62,7 @@ describe('ESQL Theme', () => {
   });
 
   it('every valid lexical name should have a corresponding rule', () => {
-    const theme = buildESQlTheme();
+    const theme = buildESQLTheme({ darkMode: false });
     const tokenIDs = theme.rules.map((rule) => rule.token.replace(ESQL_TOKEN_POSTFIX, ''));
 
     const validExceptions = [