diff --git a/apps/remix-ide/src/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js index 7319033074..76b90fa6e5 100644 --- a/apps/remix-ide/src/app/editor/editor.js +++ b/apps/remix-ide/src/app/editor/editor.js @@ -21,6 +21,7 @@ require('brace/mode/python') require('brace/mode/json') require('brace/mode/rust') require('brace/theme/chrome') +require('brace/theme/chaos') require('../../../assets/js/editor/darkTheme') const css = csjs` @@ -62,10 +63,11 @@ class Editor extends Plugin { this._themes = { 'light': 'chrome', - 'dark': 'chaos' + 'dark': 'chaos', + 'remixDark': 'remixDark' } themeModule.events.on('themeChanged', (theme) => { - this.setTheme(theme.quality) + this.setTheme(theme.name === 'Dark' ? 'remixDark' : theme.quality) }) // Init diff --git a/assets/js/editor/darkTheme.js b/assets/js/editor/darkTheme.js index 41a1750600..2b1334cf2e 100644 --- a/assets/js/editor/darkTheme.js +++ b/assets/js/editor/darkTheme.js @@ -1,21 +1,21 @@ /* eslint-disable */ -ace.define("ace/theme/chaos",["require","exports","module","ace/lib/dom"], function(acequire, exports, module) { +ace.define("ace/theme/remixDark",["require","exports","module","ace/lib/dom"], function(acequire, exports, module) { exports.isDark = true; - exports.cssClass = "ace-chaos"; - exports.cssText = ".ace-chaos .ace_gutter {\ + exports.cssClass = "ace-remixDark"; + exports.cssText = ".ace-remixDark .ace_gutter {\ background: #2a2c3f;\ color: #8789a1;\ border-right: 1px solid #282828;\ }\ - .ace-chaos .ace_gutter-cell.ace_warning {\ + .ace-remixDark .ace_gutter-cell.ace_warning {\ background-image: none;\ background: #FC0;\ border-left: none;\ padding-left: 0;\ color: #000;\ }\ - .ace-chaos .ace_gutter-cell.ace_error {\ + .ace-remixDark .ace_gutter-cell.ace_error {\ background-position: -6px center;\ background-image: none;\ background: #F10;\ @@ -23,153 +23,153 @@ ace.define("ace/theme/chaos",["require","exports","module","ace/lib/dom"], funct padding-left: 0;\ color: #000;\ }\ - .ace-chaos .ace_print-margin {\ + .ace-remixDark .ace_print-margin {\ border-left: 1px solid #555;\ right: 0;\ background: #1D1D1D;\ }\ - .ace-chaos {\ + .ace-remixDark {\ background-color: #222336;\ color: #a2a3bd;\ }\ - .ace-chaos .ace_cursor {\ + .ace-remixDark .ace_cursor {\ border-left: 2px solid #FFFFFF;\ }\ - .ace-chaos .ace_cursor.ace_overwrite {\ + .ace-remixDark .ace_cursor.ace_overwrite {\ border-left: 0px;\ border-bottom: 1px solid #FFFFFF;\ }\ - .ace-chaos .ace_marker-layer .ace_selection {\ + .ace-remixDark .ace_marker-layer .ace_selection {\ background: #494836;\ }\ - .ace-chaos .ace_marker-layer .ace_step {\ + .ace-remixDark .ace_marker-layer .ace_step {\ background: rgb(198, 219, 174);\ }\ - .ace-chaos .ace_marker-layer .ace_bracket {\ + .ace-remixDark .ace_marker-layer .ace_bracket {\ margin: -1px 0 0 -1px;\ border: 1px solid #FCE94F;\ }\ - .ace-chaos .ace_marker-layer .ace_active-line {\ + .ace-remixDark .ace_marker-layer .ace_active-line {\ background: #363950;\ }\ - .ace-chaos .ace_gutter-active-line {\ + .ace-remixDark .ace_gutter-active-line {\ background-color: #363950;\ }\ - .ace-chaos .ace_invisible {\ + .ace-remixDark .ace_invisible {\ color: #404040;\ }\ - .ace-chaos .ace_rparen {\ + .ace-remixDark .ace_rparen {\ color: #d4d7ed;\ }\ - .ace-chaos .ace_lparen {\ + .ace-remixDark .ace_lparen {\ color: #d4d7ed;\ }\ - .ace-chaos .ace_keyword {\ + .ace-remixDark .ace_keyword {\ color:#ffa76d;\ }\ - .ace-chaos .ace_keyword.ace_operator {\ + .ace-remixDark .ace_keyword.ace_operator {\ color:#eceeff;\ }\ - .ace-chaos .ace_constant {\ + .ace-remixDark .ace_constant {\ color:#1EDAFB;\ }\ - .ace-chaos .ace_constant.ace_language {\ + .ace-remixDark .ace_constant.ace_language {\ color:#FDC251;\ }\ - .ace-chaos .ace_constant.ace_library {\ + .ace-remixDark .ace_constant.ace_library {\ color:#8DFF0A;\ }\ - .ace-chaos .ace_constant.ace_numeric {\ + .ace-remixDark .ace_constant.ace_numeric {\ color:#eceeff;\ }\ - .ace-chaos .ace_invalid {\ + .ace-remixDark .ace_invalid {\ color:#FFFFFF;\ background-color:#990000;\ }\ - .ace-chaos .ace_invalid.ace_deprecated {\ + .ace-remixDark .ace_invalid.ace_deprecated {\ color:#FFFFFF;\ background-color:#990000;\ }\ - .ace-chaos .ace_support {\ + .ace-remixDark .ace_support {\ color: #999;\ }\ - .ace-chaos .ace_support.ace_function {\ + .ace-remixDark .ace_support.ace_function {\ color:#3fe2a7;\ }\ - .ace-chaos .ace_function {\ + .ace-remixDark .ace_function {\ color:#3fe2a7;\ }\ - .ace-chaos .ace_string {\ + .ace-remixDark .ace_string {\ color:#eceeff;\ }\ - .ace-chaos .ace_comment {\ + .ace-remixDark .ace_comment {\ color:#a7a7a7;\ font-style:italic;\ padding-bottom: 0px;\ }\ - .ace-chaos .ace_type {\ + .ace-remixDark .ace_type {\ color:#75ceef;\ }]\ - .ace-chaos .ace_visibility (\ + .ace-remixDark .ace_visibility (\ color:#f7d777;\ )\ - .ace-chaos .ace_identifier {\ + .ace-remixDark .ace_identifier {\ color:#bec1dd;\ }\ - .ace-chaos .ace_modifier {\ + .ace-remixDark .ace_modifier {\ color:#efff2f;\ }\ - .ace-chaos .ace-boolean {\ + .ace-remixDark .ace-boolean {\ color:#ff86ac;\ }\ - .ace-chaos .ace_statemutability {\ + .ace-remixDark .ace_statemutability {\ color:#FFCC00;\ }\ - .ace-chaos .ace_variable {\ + .ace-remixDark .ace_variable {\ color:#e0bb83;\ }\ - .ace-chaos .ace_meta.ace_tag {\ + .ace-remixDark .ace_meta.ace_tag {\ color:#BE53E6;\ }\ - .ace-chaos .ace_entity.ace_other.ace_attribute-name {\ + .ace-remixDark .ace_entity.ace_other.ace_attribute-name {\ color:#4aa8fd;\ }\ - .ace-chaos .ace_markup.ace_underline {\ + .ace-remixDark .ace_markup.ace_underline {\ text-decoration: underline;\ }\ - .ace-chaos .ace_fold-widget {\ + .ace-remixDark .ace_fold-widget {\ text-align: center;\ }\ - .ace-chaos .ace_fold-widget:hover {\ + .ace-remixDark .ace_fold-widget:hover {\ color: #777;\ }\ - .ace-chaos .ace_fold-widget.ace_start,\ - .ace-chaos .ace_fold-widget.ace_end,\ - .ace-chaos .ace_fold-widget.ace_closed{\ + .ace-remixDark .ace_fold-widget.ace_start,\ + .ace-remixDark .ace_fold-widget.ace_end,\ + .ace-remixDark .ace_fold-widget.ace_closed{\ background: none;\ border: none;\ box-shadow: none;\ }\ - .ace-chaos .ace_fold-widget.ace_start:after {\ + .ace-remixDark .ace_fold-widget.ace_start:after {\ content: '▾'\ }\ - .ace-chaos .ace_fold-widget.ace_end:after {\ + .ace-remixDark .ace_fold-widget.ace_end:after {\ content: '▴'\ }\ - .ace-chaos .ace_fold-widget.ace_closed:after {\ + .ace-remixDark .ace_fold-widget.ace_closed:after {\ content: '‣'\ }\ - .ace-chaos .ace_indent-guide {\ + .ace-remixDark .ace_indent-guide {\ border-right:1px dotted #333;\ margin-right:-1px;\ }\ - .ace-chaos .ace_fold { \ + .ace-remixDark .ace_fold { \ background: #222; \ border-radius: 3px; \ color: #7AF; \ border: none; \ }\ - .ace-chaos .ace_fold:hover {\ + .ace-remixDark .ace_fold:hover {\ background: #CCC; \ color: #000;\ }\