Fixing DarkMode issue on Security Plugin CodeEditorFields (#175365)

## Summary

Closes https://github.com/elastic/kibana/issues/175078

## Testing

Instructions:

1. Login as `elastic`
2. Navigate to User Profile, enable DarkMode
3. Navigate to the following screens and check CodeEditorFields for
appropriate themeing:
  - API Key Flyout
  - Edit Roles page
  - Role Mappings

## Screenshots
<img width="1294" alt="Screenshot 2024-01-23 at 9 52 02 AM"
src="96d9e58f-647d-4efc-87f3-b7cf03cf25b3">
<img width="704" alt="Screenshot 2024-01-23 at 9 52 15 AM"
src="7776a7e3-6c5a-40d1-9cd0-ff702998977d">
<img width="1100" alt="Screenshot 2024-01-23 at 10 47 00 PM"
src="fe0c8fef-0959-41bf-8351-eb1f3350a93b">

x-pack/plugins/security/public/management/api_keys/api_keys_grid/api_key_flyout.tsx

@@ -38,7 +38,7 @@ import useAsyncFn from 'react-use/lib/useAsyncFn';
 import { CodeEditorField } from '@kbn/code-editor';
 import { i18n } from '@kbn/i18n';
 import { FormattedDate, FormattedMessage } from '@kbn/i18n-react';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useDarkMode, useKibana } from '@kbn/kibana-react-plugin/public';
 import type { KibanaServerError } from '@kbn/kibana-utils-plugin/public';
 
 import type { CategorizedApiKey } from './api_keys_grid_page';
@@ -146,6 +146,7 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
 }) => {
   const { euiTheme } = useEuiTheme();
   const { services } = useKibana();
+  const isDarkMode = useDarkMode();
   const { value: currentUser, loading: isLoadingCurrentUser } = useCurrentUser();
   const [{ value: roles, loading: isLoadingRoles }, getRoles] = useAsyncFn(
     () => new RolesAPIClient(services.http!).getRoles(),
@@ -662,6 +663,7 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
                       fullWidth
                       languageId="xjson"
                       height={200}
+                      useDarkTheme={isDarkMode}
                     />
                   </FormRow>
                 </EuiPanel>
@@ -749,6 +751,7 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
                           fullWidth
                           languageId="xjson"
                           height={200}
+                          useDarkTheme={isDarkMode}
                         />
                       </FormRow>
                     </>
@@ -833,6 +836,7 @@ export const ApiKeyFlyout: FunctionComponent<ApiKeyFlyoutProps> = ({
                         fullWidth
                         languageId="xjson"
                         height={200}
+                        useDarkTheme={isDarkMode}
                       />
                     </FormRow>
                   </>

x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.test.tsx

@@ -28,6 +28,7 @@ jest.mock('@kbn/kibana-react-plugin/public', () => ({
   useKibana: jest.fn().mockReturnValue({
     services: { docLinks: { links: { apis: { createRoleMapping: 'createRoleMappingLink' } } } },
   }),
+  useDarkMode: jest.fn().mockReturnValue(false),
 }));
 
 describe('JSONRuleEditor', () => {

x-pack/plugins/security/public/management/role_mappings/edit_role_mapping/rule_editor_panel/json_rule_editor.tsx

@@ -15,7 +15,7 @@ import React, { Fragment, useState } from 'react';
 import { CodeEditorField } from '@kbn/code-editor';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { useDarkMode, useKibana } from '@kbn/kibana-react-plugin/public';
 import { XJsonLang } from '@kbn/monaco';
 
 import type { Rule } from '../../model';
@@ -30,6 +30,7 @@ interface Props {
 
 export const JSONRuleEditor = (props: Props) => {
   const docLinks = useKibana().services.docLinks!;
+  const isDarkMode = useDarkMode();
   const [rawRules, setRawRules] = useState(
     JSON.stringify(props.rules ? props.rules.toRaw() : {}, null, 2)
   );
@@ -105,6 +106,7 @@ export const JSONRuleEditor = (props: Props) => {
           onChange={onRulesChange}
           fullWidth={true}
           height="300px"
+          useDarkTheme={isDarkMode}
           options={{
             accessibilitySupport: 'off',
             lineNumbers: 'on',

x-pack/plugins/security/public/management/roles/edit_role/edit_role_page.tsx

@@ -37,7 +37,7 @@ import type { KibanaFeature } from '@kbn/features-plugin/common';
 import type { FeaturesPluginStart } from '@kbn/features-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { reactRouterNavigate } from '@kbn/kibana-react-plugin/public';
+import { reactRouterNavigate, useDarkMode } from '@kbn/kibana-react-plugin/public';
 import type { Cluster } from '@kbn/remote-clusters-plugin/public';
 import { REMOTE_CLUSTERS_PATH } from '@kbn/remote-clusters-plugin/public';
 import type { Space, SpacesApiUi } from '@kbn/spaces-plugin/public';
@@ -304,6 +304,8 @@ export const EditRolePage: FunctionComponent<Props> = ({
   history,
   spacesApiUi,
 }) => {
+  const isDarkMode = useDarkMode();
+
   if (!dataViews) {
     // The dataViews plugin is technically marked as an optional dependency because we don't need to pull it in for Anonymous pages (such
     // as the login page). That said, it _is_ required for this page to function correctly, so we throw an error here if it's not available.
@@ -483,6 +485,7 @@ export const EditRolePage: FunctionComponent<Props> = ({
           license={license}
           docLinks={docLinks}
           canUseRemoteIndices={featureCheckState.value?.canUseRemoteIndices}
+          isDarkMode={isDarkMode}
         />
       </div>
     );

x-pack/plugins/security/public/management/roles/edit_role/privileges/es/elasticsearch_privileges.tsx

@@ -42,6 +42,7 @@ interface Props {
   indexPatterns: string[];
   remoteClusters?: Cluster[];
   canUseRemoteIndices?: boolean;
+  isDarkMode?: boolean;
 }
 
 export class ElasticsearchPrivileges extends Component<Props, {}> {
@@ -173,6 +174,7 @@ export class ElasticsearchPrivileges extends Component<Props, {}> {
           onChange={onChange}
           availableIndexPrivileges={builtinESPrivileges.index}
           editable={editable}
+          isDarkMode={this.props.isDarkMode}
         />
 
         {canUseRemoteIndices && (
@@ -208,6 +210,7 @@ export class ElasticsearchPrivileges extends Component<Props, {}> {
               onChange={onChange}
               availableIndexPrivileges={builtinESPrivileges.index}
               editable={editable}
+              isDarkMode={this.props.isDarkMode}
             />
           </>
         )}

x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privilege_form.tsx

@@ -48,6 +48,7 @@ interface Props {
   allowDocumentLevelSecurity: boolean;
   allowFieldLevelSecurity: boolean;
   validator: RoleValidator;
+  isDarkMode?: boolean;
 }
 
 interface State {
@@ -460,6 +461,7 @@ export class IndexPrivilegeForm extends Component<Props, State> {
                   )}
                   value={indexPrivilege.query ?? ''}
                   onChange={this.onQueryChange}
+                  useDarkTheme={this.props.isDarkMode}
                   options={{
                     readOnly: this.props.isRoleReadOnly,
                     minimap: {

x-pack/plugins/security/public/management/roles/edit_role/privileges/es/index_privileges.tsx

@@ -29,6 +29,7 @@ interface Props {
   onChange: (role: Role) => void;
   validator: RoleValidator;
   editable?: boolean;
+  isDarkMode?: boolean;
 }
 
 interface State {
@@ -94,6 +95,7 @@ export class IndexPrivileges extends Component<Props, State> {
             remoteClusters={remoteClusters}
             onChange={this.onIndexPrivilegeChange(i)}
             onDelete={this.onIndexPrivilegeDelete(i)}
+            isDarkMode={this.props.isDarkMode}
           />
         ))}
         {this.props.editable && (