Merge pull request #502 from devtron-labs/feat/theming

feat: add support for dark mode v1

Author: eshankvaish

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@devtron-labs/devtron-fe-common-lib",
-    "version": "1.4.8",
+    "version": "1.4.9",
     "description": "Supporting common component library",
     "type": "module",
     "main": "dist/index.js",

package.json

@@ -69,7 +69,7 @@ export default function AddCDButton({
                     <rect width="20" height="20" rx="10" fill="#664BEE" className="add-cd-edge-btn" />
                     <path
                         d="M6.5 10H13.5M10 6.5V13.5"
-                        stroke="white"
+                        stroke="#fff"
                         strokeWidth="1.5"
                         strokeLinecap="round"
                         strokeLinejoin="round"

src/Assets/Icon/ic-laptop.svg

@@ -17,7 +17,8 @@
 import YAML from 'yaml'
 import { noop, YAMLStringify } from '@Common/Helper'
 import { MODES } from '../Constants'
-import { Action, CodeEditorInitialValueType, CodeEditorState, CodeEditorThemesKeys } from './types'
+import { Action, CodeEditorInitialValueType, CodeEditorState } from './types'
+import { getCodeEditorThemeFromAppTheme } from './utils'
 
 export const CodeEditorReducer = (state: CodeEditorState, action: Action) => {
     switch (action.type) {
@@ -77,9 +78,10 @@ export const initialState = ({
     diffView,
     noParsing,
     tabSize,
+    appTheme,
 }: CodeEditorInitialValueType): CodeEditorState => ({
     mode: mode as MODES,
-    theme: (theme || CodeEditorThemesKeys.vs) as CodeEditorThemesKeys,
+    theme: getCodeEditorThemeFromAppTheme(theme, appTheme),
     code: noParsing ? value : parseValueToCode(value, mode, tabSize),
     defaultCode: noParsing ? defaultValue : parseValueToCode(defaultValue, mode, tabSize),
     diffMode: diffView,

src/Assets/Icon/ic-moon.svg

@@ -42,6 +42,8 @@ import {
 } from './types'
 import { CodeEditorReducer, initialState, parseValueToCode } from './CodeEditor.reducer'
 import { DEFAULT_JSON_SCHEMA_URI, MODES } from '../Constants'
+import { useTheme } from '@Shared/Providers'
+import { getCodeEditorThemeFromAppTheme } from './utils'
 
 const CodeEditorContext = React.createContext(null)
 
@@ -70,7 +72,7 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         onChange,
         readOnly,
         diffView,
-        theme = '',
+        theme,
         loading,
         customLoader,
         focus,
@@ -83,6 +85,8 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         adjustEditorHeightToContent = false,
         disableSearch = false,
     }) => {
+        const { appTheme } = useTheme()
+
         if (cleanData) {
             value = cleanKubeManifest(value)
             defaultValue = cleanKubeManifest(defaultValue)
@@ -94,7 +98,16 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
         const memoisedReducer = React.useCallback(CodeEditorReducer, [])
         const [state, dispatch] = useReducer(
             memoisedReducer,
-            initialState({ mode, theme, value, defaultValue, diffView, noParsing, tabSize }),
+            initialState({
+                mode,
+                theme,
+                value,
+                defaultValue,
+                diffView,
+                noParsing,
+                tabSize,
+                appTheme,
+            }),
         )
         const [, json, yamlCode, error] = useJsonYaml(state.code, tabSize, state.mode, !state.noParsing)
         const [, originalJson, originalYaml] = useJsonYaml(state.defaultCode, tabSize, state.mode, !state.noParsing)
@@ -128,25 +141,9 @@ const CodeEditor: React.FC<CodeEditorInterface> & CodeEditorComposition = React.
             },
         })
 
-        monaco.editor.defineTheme(CodeEditorThemesKeys.deleteDraft, {
-            base: 'vs',
-            inherit: true,
-            rules: [],
-            colors: {
-                'diffEditor.insertedTextBackground': '#ffd4d1',
-                'diffEditor.removedTextBackground': '#ffffff33',
-            },
-        })
-
-        monaco.editor.defineTheme(CodeEditorThemesKeys.unpublished, {
-            base: 'vs',
-            inherit: true,
-            rules: [],
-            colors: {
-                'diffEditor.insertedTextBackground': '#eaf1dd',
-                'diffEditor.removedTextBackground': '#ffffff33',
-            },
-        })
+        useEffect(() => {
+            dispatch({ type: 'setTheme', value: getCodeEditorThemeFromAppTheme(theme, appTheme) })
+        }, [appTheme])
 
         useEffect(() => {
             const rule = !disableSearch