fix: diff modal editor background

monaco applies the theme to all editors thus, we cannot have two separate themes at the same time
kubeshop · Aug 31, 2021 · c200aa4 · c200aa4
1 parent 4debe15
commit c200aa4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 17 deletions.
diff --git a/src/components/organisms/DiffModal/DiffModal.tsx b/src/components/organisms/DiffModal/DiffModal.tsx
@@ -6,7 +6,7 @@ import {useAppDispatch, useAppSelector} from '@redux/hooks';
 import {useEffect, useState} from 'react';
 import {stringify} from 'yaml';
 
-import {KUBESHOP_MONACO_DIFF_THEME} from '@utils/monaco';
+import {KUBESHOP_MONACO_THEME} from '@utils/monaco';
 
 import Colors from '@styles/Colors';
 import {applyResourceWithConfirm} from '@redux/services/applyResourceWithConfirm';
@@ -38,6 +38,15 @@ const LeftButton = styled(Button)`
 
 const MonacoDiffContainer = styled.div`
   padding: 8px;
+  & .monaco-editor .monaco-editor-background {
+    background-color: ${Colors.grey1000} !important;
+  }
+  & .monaco-editor .margin {
+    background-color: ${Colors.grey1000} !important;
+  }
+  & .diffOverview {
+    background-color: ${Colors.grey1000} !important;
+  }
 `;
 
 const DiffModal = () => {
@@ -120,7 +129,7 @@ const DiffModal = () => {
           original={resourceContent}
           value={diffContent}
           options={options}
-          theme={KUBESHOP_MONACO_DIFF_THEME}
+          theme={KUBESHOP_MONACO_THEME}
         />
       </MonacoDiffContainer>
     </StyledModal>

diff --git a/src/utils/monaco.ts b/src/utils/monaco.ts
@@ -1,9 +1,6 @@
 import {monaco} from 'react-monaco-editor';
 
-import Colors from '@styles/Colors';
-
 const KUBESHOP_MONACO_THEME = 'kubeshopTheme';
-const KUBESHOP_MONACO_DIFF_THEME = 'kubeshopDiffTheme';
 
 const KUBESHOP_THEME_DATA: monaco.editor.IStandaloneThemeData = {
   base: 'vs-dark',
@@ -22,17 +19,6 @@ const createKubeshopTheme = (editor: typeof monaco.editor) => {
   editor.defineTheme(KUBESHOP_MONACO_THEME, KUBESHOP_THEME_DATA);
 };
 
-const createKubeshopDiffTheme = (editor: typeof monaco.editor) => {
-  editor.defineTheme(KUBESHOP_MONACO_DIFF_THEME, {
-    ...KUBESHOP_THEME_DATA,
-    colors: {
-      ...KUBESHOP_THEME_DATA.colors,
-      'editor.background': Colors.grey1000,
-    },
-  });
-};
-
 createKubeshopTheme(monaco.editor);
-createKubeshopDiffTheme(monaco.editor);
 
-export {KUBESHOP_MONACO_THEME, KUBESHOP_MONACO_DIFF_THEME};
+export {KUBESHOP_MONACO_THEME};