custom colors for all themes

apps/remix-ide/src/app/editor/editor.js

@@ -82,7 +82,7 @@ class Editor extends Plugin {
     ReactDOM.render(
       <EditorUI
         editorAPI={this.api}
-        theme={this.currentTheme}
+        themeType={this.currentThemeType}
         currentFile={this.currentFile}
         sourceAnnotationsPerFile={this.sourceAnnotationsPerFile}
         markerPerFile={this.markerPerFile}
@@ -107,13 +107,12 @@ class Editor extends Plugin {
       this.clearAllDecorationsFor(name)
     })
 
-    const translateTheme = (theme) => this._themes[theme.name === 'Dark' ? 'remixDark' : theme.quality]
     this.on('theme', 'themeLoaded', (theme) => {
-      this.currentTheme = translateTheme(theme)
+      this.currentThemeType = theme.quality
       this.renderComponent()
     })
     try {
-      this.currentTheme = translateTheme(await this.call('theme', 'currentTheme'))
+      this.currentThemeType = (await this.call('theme', 'currentTheme')).quality
     } catch (e) {
       console.log('unable to select the theme ' + e.message)
     }

apps/remix-ide/src/assets/css/themes/remix-black_undtds.css

@@ -21,6 +21,7 @@
   --danger: #823a3a;
   --light: #1f2020;
   --dark: #1a1a1a;
+  --text: #babbcc;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css

@@ -20,6 +20,7 @@
   --danger: #f80b0b;
   --light: #fff;
   --dark: #645fb5;
+  --text: #11556c;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css

@@ -21,6 +21,8 @@
   --danger: #b84040;
   --light: #2a2c3f;
   --dark: #222336;
+  --text: #babbcc;
+  --text-background: #222336;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css

@@ -1,7 +1,7 @@
 :root {
   --blue: #007bff;
   --indigo: #6610f2;
-  --purple: #6f42c1;
+  --purple: #d145a7;
   --pink: #e83e8c;
   --red: #dc3545;
   --orange: #fd7e14;
@@ -13,13 +13,14 @@
   --gray: #6c757d;
   --gray-dark: #343a40;
   --primary: #007aa6;
-  --secondary: #a8b3bc;
+  --secondary: #b3bcc483;
   --success: #32ba89;
   --info: #007aa6;
   --warning: #c97539;
   --danger: #b84040;
   --light: #fff;
   --dark: #f8fafe;
+  --text: #747B90;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css

@@ -20,6 +20,7 @@
   --danger: #E64F29;
   --light: #eeede9;
   --dark: #01414E;
+  --text: #11556c;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
   --breakpoint-md: 768px;

libs/remix-ui/editor/src/lib/remix-ui-editor.tsx

@@ -47,7 +47,7 @@ type sourceMarkerMap = {
 /* eslint-disable-next-line */
 export interface EditorUIProps {
   activated: boolean
-  theme: string
+  themeType: string
   currentFile: string
   sourceAnnotationsPerFile: sourceAnnotationMap
   markerPerFile: sourceMarkerMap
@@ -60,7 +60,7 @@ export interface EditorUIProps {
   plugin: {
     on: (plugin: string, event: string, listener: any) => void
   }
-  editorAPI:{
+  editorAPI: {
     findMatches: (uri: string, value: string) => any
     getFontSize: () => number,
     getValue: (uri: string) => string
@@ -78,28 +78,40 @@ export const EditorUI = (props: EditorUIProps) => {
 
   const [editorModelsState, dispatch] = useReducer(reducerActions, initialState)
 
-  const defineAndSetDarkTheme = (monaco) => {
+  const formatColor = (name) => {
+    let color = window.getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+    if (color.length === 4) {
+      color = color.concat(color.substr(1))
+    }
+    return color
+  }
+  const defineAndSetTheme = (monaco) => {
+    const themeType = props.themeType === 'dark' ? 'vs-dark' : 'vs'
+    const themeName = props.themeType === 'dark' ? 'remix-dark' : 'remix-light'
     // see https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-exposed-colors
-    const lightColor = window.getComputedStyle(document.documentElement).getPropertyValue('--light').trim()
+    const lightColor = formatColor('--light')
-    const infoColor = window.getComputedStyle(document.documentElement).getPropertyValue('--info').trim()
+    const infoColor = formatColor('--info')
-
+    const darkColor = formatColor('--dark')
-    const blueColor = window.getComputedStyle(document.documentElement).getPropertyValue('--blue').trim()
+    const secondaryColor = formatColor('--secondary')
-    const successColor = window.getComputedStyle(document.documentElement).getPropertyValue('--success').trim()
+    const textColor = formatColor('--text') || darkColor
-    const warningColor = window.getComputedStyle(document.documentElement).getPropertyValue('--warning').trim()
+    const textbackground = formatColor('--text-background') || lightColor
-    const yellowColor = window.getComputedStyle(document.documentElement).getPropertyValue('--yellow').trim()
+
-    const pinkColor = window.getComputedStyle(document.documentElement).getPropertyValue('--pink').trim()
+
+    const blueColor = formatColor('--blue')
+    const successColor = formatColor('--success')
+    const warningColor = formatColor('--warning')
+    const yellowColor = formatColor('--yellow')
+    const pinkColor = formatColor('--pink')
     const locationColor = '#9e7e08'
-    const purpleColor = window.getComputedStyle(document.documentElement).getPropertyValue('--purple').trim()
+    const purpleColor = formatColor('--purple')
-    const dangerColor = window.getComputedStyle(document.documentElement).getPropertyValue('--danger').trim()
+    const dangerColor = formatColor('--danger')
-
-    const darkColor = window.getComputedStyle(document.documentElement).getPropertyValue('--dark').trim()
-    const grayColor = window.getComputedStyle(document.documentElement).getPropertyValue('--gray-dark').trim()
 
-    monaco.editor.defineTheme('remix-dark', {
+    monaco.editor.defineTheme(themeName, {
-      base: 'vs-dark',
+      base: themeType,
       inherit: true, // can also be false to completely replace the builtin rules
       rules: [
         { background: darkColor.replace('#', '') },
+        { foreground: textColor.replace('#', '') },
 
         // global variables
         { token: 'keyword.abi', foreground: blueColor },
@@ -165,24 +177,24 @@ export const EditorUI = (props: EditorUIProps) => {
 
       ],
       colors: {
-        'editor.background': darkColor,
+        // see https://code.visualstudio.com/api/references/theme-color for more settings
+        'editor.background': textbackground,
         'editorSuggestWidget.background': lightColor,
         'editorSuggestWidget.selectedBackground': lightColor,
         'editorSuggestWidget.highlightForeground': infoColor,
-        'editor.lineHighlightBorder': lightColor,
+        'editor.lineHighlightBorder': secondaryColor,
-        'editor.lineHighlightBackground': grayColor,
+        'editor.lineHighlightBackground': textbackground === darkColor ? lightColor : secondaryColor,
-        'editorGutter.background': lightColor
+        'editorGutter.background': lightColor,
+        'minimap.background': lightColor
       }
     })
-    monacoRef.current.editor.setTheme('remix-dark')
+    monacoRef.current.editor.setTheme(themeName)
   }
 
   useEffect(() => {
     if (!monacoRef.current) return
-    if (props.theme === 'remix-dark') {
+    defineAndSetTheme(monacoRef.current)
-      defineAndSetDarkTheme(monacoRef.current)
+  })
-    } else monacoRef.current.editor.setTheme(props.theme)
-  }, [props.theme])
 
   const setAnnotationsbyFile = (uri) => {
     if (props.sourceAnnotationsPerFile[uri]) {
@@ -307,11 +319,9 @@ export const EditorUI = (props: EditorUIProps) => {
     }
   }
 
-  function handleEditorDidMount (editor) {
+  function handleEditorDidMount(editor) {
     editorRef.current = editor
-    if (props.theme === 'remix-dark') {
+    defineAndSetTheme(monacoRef.current)
-      defineAndSetDarkTheme(monacoRef.current)
-    } else monacoRef.current.editor.setTheme(props.theme)
     reducerListener(props.plugin, dispatch, monacoRef.current, editorRef.current, props.events)
     props.events.onEditorMounted()
     editor.onMouseUp((e) => {
@@ -327,7 +337,7 @@ export const EditorUI = (props: EditorUIProps) => {
     })
   }
 
-  function handleEditorWillMount (monaco) {
+  function handleEditorWillMount(monaco) {
     monacoRef.current = monaco
     // Register a new language
     monacoRef.current.languages.register({ id: 'remix-solidity' })
@@ -343,7 +353,7 @@ export const EditorUI = (props: EditorUIProps) => {
       language={editorModelsState[props.currentFile] ? editorModelsState[props.currentFile].language : 'text'}
       onMount={handleEditorDidMount}
       beforeMount={handleEditorWillMount}
-      options= { { glyphMargin: true } }
+      options={{ glyphMargin: true }}
     />
   )
 }