[8.19] [Vega] Change Vega editor inactiveSelectionBackground color in dark mode to match Monaco Editor dark theme (#229589) (#229803)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[Vega] Change Vega editor inactiveSelectionBackground color in dark
mode to match Monaco Editor dark theme
(#229589)](#229589)

<!--- Backport version: 10.0.1 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Krzysztof
Kowalczyk","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-07-29T12:39:09Z","message":"[Vega]
Change Vega editor inactiveSelectionBackground color in dark mode to
match Monaco Editor dark theme (#229589)\n\n## Summary\n\nThis PR fixes
wrong color being used for when you have text selected in\nVega editor
and the editor isn't focused. After the change, the color\nmatches the
default value used in Monaco Editor dark theme.\n\n| Before | After
|\n|--------|-------|\n| <img width=\"373\" height=\"995\"
alt=\"Before\"\nsrc=\"https://github.com/user-attachments/assets/183684db-a1f4-43b4-bc1d-f3c5e9c1193d\"\n/>
| <img width=\"371\" height=\"946\"
alt=\"After\"\nsrc=\"https://github.com/user-attachments/assets/ee965d26-8016-45af-b6f1-1ed86953467c\"\n/>
|\n\nCloses:
#228296","sha":"95a18def87020db328b1bf89369f634395e13879","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","Feature:Vega","Team:Visualizations","release_note:skip","backport:version","v9.1.0","v8.19.0","v9.2.0"],"title":"[Vega]
Change Vega editor inactiveSelectionBackground color in dark mode to
match Monaco Editor dark
theme","number":229589,"url":"https://github.com/elastic/kibana/pull/229589","mergeCommit":{"message":"[Vega]
Change Vega editor inactiveSelectionBackground color in dark mode to
match Monaco Editor dark theme (#229589)\n\n## Summary\n\nThis PR fixes
wrong color being used for when you have text selected in\nVega editor
and the editor isn't focused. After the change, the color\nmatches the
default value used in Monaco Editor dark theme.\n\n| Before | After
|\n|--------|-------|\n| <img width=\"373\" height=\"995\"
alt=\"Before\"\nsrc=\"https://github.com/user-attachments/assets/183684db-a1f4-43b4-bc1d-f3c5e9c1193d\"\n/>
| <img width=\"371\" height=\"946\"
alt=\"After\"\nsrc=\"https://github.com/user-attachments/assets/ee965d26-8016-45af-b6f1-1ed86953467c\"\n/>
|\n\nCloses:
#228296","sha":"95a18def87020db328b1bf89369f634395e13879"}},"sourceBranch":"main","suggestedTargetBranches":["9.1","8.19"],"targetPullRequestStates":[{"branch":"9.1","label":"v9.1.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/229589","number":229589,"mergeCommit":{"message":"[Vega]
Change Vega editor inactiveSelectionBackground color in dark mode to
match Monaco Editor dark theme (#229589)\n\n## Summary\n\nThis PR fixes
wrong color being used for when you have text selected in\nVega editor
and the editor isn't focused. After the change, the color\nmatches the
default value used in Monaco Editor dark theme.\n\n| Before | After
|\n|--------|-------|\n| <img width=\"373\" height=\"995\"
alt=\"Before\"\nsrc=\"https://github.com/user-attachments/assets/183684db-a1f4-43b4-bc1d-f3c5e9c1193d\"\n/>
| <img width=\"371\" height=\"946\"
alt=\"After\"\nsrc=\"https://github.com/user-attachments/assets/ee965d26-8016-45af-b6f1-1ed86953467c\"\n/>
|\n\nCloses:
#228296","sha":"95a18def87020db328b1bf89369f634395e13879"}}]}]
BACKPORT-->

Author: kowalczyk-krzysztof

src/platform/plugins/private/vis_types/vega/public/components/vega_vis_editor.tsx

@@ -11,12 +11,15 @@ import { XJsonLang } from '@kbn/monaco';
 import useMount from 'react-use/lib/useMount';
 import hjson from 'hjson';
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import compactStringify from 'json-stringify-pretty-compact';
 import { i18n } from '@kbn/i18n';
 
 import { VisEditorOptionsProps } from '@kbn/visualizations-plugin/public';
 import { CodeEditor, HJsonLang } from '@kbn/code-editor';
+import { css } from '@emotion/react';
+import { type UseEuiTheme, useEuiTheme } from '@elastic/eui';
+import { type CSSInterpolation } from '@emotion/css';
 import { getNotifications } from '../services';
 import { VisParams } from '../vega_fn';
 import { VegaHelpMenu } from './vega_help_menu';
@@ -48,7 +51,38 @@ function format(
   }
 }
 
+type EmotionStyles = Record<string, CSSInterpolation | ((theme: UseEuiTheme) => CSSInterpolation)>;
+
+const useMemoCss = <T extends EmotionStyles>(styleMap: T): { [K in keyof T]: CSSInterpolation } => {
+  const euiThemeContext = useEuiTheme();
+
+  const outputStyles = useMemo(() => {
+    return Object.entries(styleMap).reduce<{ [K in keyof T]: CSSInterpolation }>(
+      (acc, [key, value]) => {
+        acc[key as keyof T] = typeof value === 'function' ? value(euiThemeContext) : value;
+        return acc;
+      },
+      {} as { [K in keyof T]: CSSInterpolation }
+    );
+  }, [euiThemeContext, styleMap]);
+
+  return outputStyles;
+};
+
+const monacoOverride = {
+  override: ({ colorMode }: UseEuiTheme) =>
+    css({
+      // See discussion: https://github.com/elastic/kibana/issues/228296#issuecomment-3126033291
+      ...(colorMode === 'DARK' && {
+        '.monaco-editor': {
+          '--vscode-editor-inactiveSelectionBackground': '#3a3d41',
+        },
+      }),
+    }),
+};
+
 function VegaVisEditor({ stateParams, setValue }: VisEditorOptionsProps<VisParams>) {
+  const monacoStyles = useMemoCss(monacoOverride);
   const [languageId, setLanguageId] = useState<string>();
 
   useMount(() => {
@@ -103,6 +137,7 @@ function VegaVisEditor({ stateParams, setValue }: VisEditorOptionsProps<VisParam
         <VegaActionsMenu formatHJson={formatHJson} formatJson={formatJson} />
       </div>
       <CodeEditor
+        classNameCss={monacoStyles.override}
         width="100%"
         height="100%"
         languageId={languageId}