diff --git a/apps/remix-ide/src/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js index 3adf7911db..57a05a136f 100644 --- a/apps/remix-ide/src/app/editor/editor.js +++ b/apps/remix-ide/src/app/editor/editor.js @@ -82,7 +82,7 @@ class Editor extends Plugin { ReactDOM.render( 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) } diff --git a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css b/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css index 1bd8ae1492..ffee2473c1 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-black_undtds.css +++ b/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; diff --git a/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css b/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css index 9fc0a08dd6..1e4c83a413 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-candy_ikhg4m.css +++ b/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; diff --git a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css b/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css index 36782082b6..8c032629a4 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-dark_tvx1s2.css +++ b/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; diff --git a/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css b/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css index afd940e43e..210919b90a 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-light_powaqg.css +++ b/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; diff --git a/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css b/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css index 35f947c57d..a1de29be12 100644 --- a/apps/remix-ide/src/assets/css/themes/remix-midcentury_hrzph3.css +++ b/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; diff --git a/libs/remix-ui/editor/src/lib/remix-ui-editor.tsx b/libs/remix-ui/editor/src/lib/remix-ui-editor.tsx index bd071a7230..eb3e05992c 100644 --- a/libs/remix-ui/editor/src/lib/remix-ui-editor.tsx +++ b/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 infoColor = window.getComputedStyle(document.documentElement).getPropertyValue('--info').trim() - - const blueColor = window.getComputedStyle(document.documentElement).getPropertyValue('--blue').trim() - const successColor = window.getComputedStyle(document.documentElement).getPropertyValue('--success').trim() - const warningColor = window.getComputedStyle(document.documentElement).getPropertyValue('--warning').trim() - const yellowColor = window.getComputedStyle(document.documentElement).getPropertyValue('--yellow').trim() - const pinkColor = window.getComputedStyle(document.documentElement).getPropertyValue('--pink').trim() + const lightColor = formatColor('--light') + const infoColor = formatColor('--info') + const darkColor = formatColor('--dark') + const secondaryColor = formatColor('--secondary') + const textColor = formatColor('--text') || darkColor + const textbackground = formatColor('--text-background') || lightColor + + + 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 dangerColor = window.getComputedStyle(document.documentElement).getPropertyValue('--danger').trim() - - const darkColor = window.getComputedStyle(document.documentElement).getPropertyValue('--dark').trim() - const grayColor = window.getComputedStyle(document.documentElement).getPropertyValue('--gray-dark').trim() + const purpleColor = formatColor('--purple') + const dangerColor = formatColor('--danger') - monaco.editor.defineTheme('remix-dark', { - base: 'vs-dark', + monaco.editor.defineTheme(themeName, { + 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.lineHighlightBackground': grayColor, - 'editorGutter.background': lightColor + 'editor.lineHighlightBorder': secondaryColor, + 'editor.lineHighlightBackground': textbackground === darkColor ? lightColor : secondaryColor, + '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') { - defineAndSetDarkTheme(monacoRef.current) - } else monacoRef.current.editor.setTheme(props.theme) - }, [props.theme]) + defineAndSetTheme(monacoRef.current) + }) 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') { - defineAndSetDarkTheme(monacoRef.current) - } else monacoRef.current.editor.setTheme(props.theme) + defineAndSetTheme(monacoRef.current) 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 }} /> ) }