Adding a uiSetting on the fly that can be used by code editors

elastic · Jun 1, 2023 · ab8912e · ab8912e
1 parent b2355a9
commit ab8912e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/core/rendering/core-rendering-server-internal/src/rendering_service.tsx b/packages/core/rendering/core-rendering-server-internal/src/rendering_service.tsx
@@ -175,6 +175,10 @@ export class RenderingService {
       darkMode = getSettingValue('theme:darkMode', settings, Boolean);
     }
 
+    settings.user['theme:codeEditors'] = {
+      userValue: darkMode,
+    };
+
     const themeVersion: ThemeVersion = 'v8';
 
     const stylesheetPaths = getStylesheetPaths({

diff --git a/src/plugins/kibana_react/public/code_editor/index.tsx b/src/plugins/kibana_react/public/code_editor/index.tsx
@@ -40,7 +40,7 @@ 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 darkMode = useUiSetting<boolean>('theme:codeEditors');
   return (
     <EuiErrorBoundary>
       <React.Suspense fallback={<Fallback height={props.height} />}>
@@ -54,7 +54,7 @@ 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 darkMode = useUiSetting<boolean>('theme:codeEditors');
   return (
     <EuiErrorBoundary>
       <React.Suspense fallback={<Fallback height={props.height} />}>