Fix (styles): Make ace code editor themes consistent

CHANGELOG.md

@@ -48,6 +48,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Update main menu to display 'Dashboards' for consistency ([#4453](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4453))
 - [Multiple DataSource] Retain the original sample data API ([#4526](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4526))
 - Fix Node.js download link ([#4556](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4556))
+- [TSVB, Dashboards] Fix inconsistent dark mode code editor themes ([#4609](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4609))
 
 ### 🚞 Infrastructure
 

src/core/public/styles/_ace_overrides.scss

@@ -6,7 +6,7 @@
 
 // In order to override the TM (Textmate) theme of Ace/Brace, everywhere,
 // it is being scoped by a known outer selector
-.application {
+.coreSystemRootDomElement {
   .ace-tm {
     $aceBackground: tintOrShade($euiColorLightShade, 50%, 0);
 

src/plugins/vis_default_editor/public/components/controls/raw_json.tsx

@@ -100,7 +100,7 @@ function RawJsonParamEditor({
       <>
         <EuiCodeEditor
           mode="json"
-          theme="github"
+          theme="textmate"
           width="100%"
           height="250px"
           value={value}

src/plugins/vis_type_timeseries/public/application/components/markdown_editor.js

@@ -126,7 +126,7 @@ export class MarkdownEditor extends Component {
           <EuiCodeEditor
             onLoad={this.handleOnLoad}
             mode="markdown"
-            theme="github"
+            theme="textmate"
             width="100%"
             height="100%"
             name={`ace-${model.id}`}

src/plugins/vis_type_timeseries/public/application/components/panel_config/markdown.js

@@ -293,7 +293,7 @@ class MarkdownPanelConfigUi extends Component {
             <EuiSpacer size="s" />
             <EuiCodeEditor
               mode="less"
-              theme="github"
+              theme="textmate"
               width="100%"
               name={`ace-css-${model.id}`}
               setOptions={{ fontSize: '14px' }}