Respect system dark mode in ESQL editor

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.
elastic · Nov 14, 2024 · 120c9f6 · 120c9f6
1 parent aa4f430
commit 120c9f6
Show file tree

Hide file tree

Showing 7 changed files with 185 additions and 166 deletions.
diff --git a/packages/kbn-esql-editor/src/esql_editor.tsx b/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';
@@ -89,8 +96,10 @@ export const ESQLEditor = memo(function ESQLEditor({
     application,
     core,
     fieldsMetadata,
+    theme,
     uiSettings,
   } = kibana.services;
+  const darkMode = theme.getTheme().darkMode;
   const timeZone = core?.uiSettings?.get('dateFormat:tz');
   const histogramBarTarget = uiSettings?.get('histogram:barTarget') ?? 50;
   const [code, setCode] = useState<string>(query.esql ?? '');
@@ -597,7 +606,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',
   };

diff --git a/packages/kbn-monaco/index.ts b/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';

diff --git a/packages/kbn-monaco/src/esql/index.ts b/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';
diff --git a/packages/kbn-monaco/src/esql/lib/constants.ts b/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';
diff --git a/packages/kbn-monaco/src/esql/lib/esql_theme.test.ts b/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 = [