Fix (styles): Make ace code editor themes consistent (#4609)

* Fix (styles): Make ace code editor themes consistent Use "textmate" theme everywhere Update override selector to apply to root, to style portaled components, too (such as filter editor) Signed-off-by: Josh Romero <[email protected]> * add changelog Signed-off-by: Josh Romero <[email protected]> --------- Signed-off-by: Josh Romero <[email protected]>
opensearch-project · Jul 24, 2023 · f8ad83f · f8ad83f
1 parent c06b298
commit f8ad83f
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -49,6 +49,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
 

diff --git a/src/core/public/styles/_ace_overrides.scss b/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);
 

diff --git a/src/plugins/vis_default_editor/public/components/controls/raw_json.tsx b/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}

diff --git a/src/plugins/vis_type_timeseries/public/application/components/markdown_editor.js b/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}`}

diff --git a/src/plugins/vis_type_timeseries/public/application/components/panel_config/markdown.js b/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' }}