From 73a7c4e922dca2a3cd36542a6cd6e43f5e96b8da Mon Sep 17 00:00:00 2001 From: LianaHus Date: Thu, 28 May 2020 01:12:54 +0200 Subject: [PATCH] new Ace editor dark theme --- apps/remix-ide/src/app/editor/editor.js | 2 +- assets/js/editor/darkTheme.js | 180 ++++++++++++++++++++++++ 2 files changed, 181 insertions(+), 1 deletion(-) create mode 100644 assets/js/editor/darkTheme.js diff --git a/apps/remix-ide/src/app/editor/editor.js b/apps/remix-ide/src/app/editor/editor.js index bf0055562b..3d429697d4 100644 --- a/apps/remix-ide/src/app/editor/editor.js +++ b/apps/remix-ide/src/app/editor/editor.js @@ -20,8 +20,8 @@ require('brace/mode/javascript') require('brace/mode/python') require('brace/mode/json') require('brace/mode/rust') -require('brace/theme/chaos') require('brace/theme/chrome') +require('../../../assets/js/editor/darkTheme') const css = csjs` .ace-editor { diff --git a/assets/js/editor/darkTheme.js b/assets/js/editor/darkTheme.js new file mode 100644 index 0000000000..9c7e68f0be --- /dev/null +++ b/assets/js/editor/darkTheme.js @@ -0,0 +1,180 @@ +ace.define("ace/theme/chaos",["require","exports","module","ace/lib/dom"], function(acequire, exports, module) { + + exports.isDark = true; + exports.cssClass = "ace-chaos"; + exports.cssText = ".ace-chaos .ace_gutter {\ + background: #2a2c3f;\ + color: #8789a1;\ + border-right: 1px solid #282828;\ + }\ + .ace-chaos .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 {\ + background-position: -6px center;\ + background-image: none;\ + background: #F10;\ + border-left: none;\ + padding-left: 0;\ + color: #000;\ + }\ + .ace-chaos .ace_print-margin {\ + border-left: 1px solid #555;\ + right: 0;\ + background: #1D1D1D;\ + }\ + .ace-chaos {\ + background-color: #222336;\ + color: #a2a3bd;\ + }\ + .ace-chaos .ace_cursor {\ + border-left: 2px solid #FFFFFF;\ + }\ + .ace-chaos .ace_cursor.ace_overwrite {\ + border-left: 0px;\ + border-bottom: 1px solid #FFFFFF;\ + }\ + .ace-chaos .ace_marker-layer .ace_selection {\ + background: #494836;\ + }\ + .ace-chaos .ace_marker-layer .ace_step {\ + background: rgb(198, 219, 174);\ + }\ + .ace-chaos .ace_marker-layer .ace_bracket {\ + margin: -1px 0 0 -1px;\ + border: 1px solid #FCE94F;\ + }\ + .ace-chaos .ace_marker-layer .ace_active-line {\ + background: #363950;\ + }\ + .ace-chaos .ace_gutter-active-line {\ + background-color: #363950;\ + }\ + .ace-chaos .ace_invisible {\ + color: #404040;\ + }\ + .ace-chaos .ace_rparen {\ + color: #d4d7ed;\ + }\ + .ace-chaos .ace_lparen {\ + color: #d4d7ed;\ + }\ + .ace-chaos .ace_keyword {\ + color:#ffa76d;\ + }\ + .ace-chaos .ace_keyword.ace_operator {\ + color:#eceeff;\ + }\ + .ace-chaos .ace_constant {\ + color:#1EDAFB;\ + }\ + .ace-chaos .ace_constant.ace_language {\ + color:#FDC251;\ + }\ + .ace-chaos .ace_constant.ace_library {\ + color:#8DFF0A;\ + }\ + .ace-chaos .ace_constant.ace_numeric {\ + color:#eceeff;\ + }\ + .ace-chaos .ace_invalid {\ + color:#FFFFFF;\ + background-color:#990000;\ + }\ + .ace-chaos .ace_invalid.ace_deprecated {\ + color:#FFFFFF;\ + background-color:#990000;\ + }\ + .ace-chaos .ace_support {\ + color: #999;\ + }\ + .ace-chaos .ace_support.ace_function {\ + color:#3fe2a7;\ + }\ + .ace-chaos .ace_function {\ + color:#3fe2a7;\ + }\ + .ace-chaos .ace_string {\ + color:#eceeff;\ + }\ + .ace-chaos .ace_comment {\ + color:#a7a7a7;\ + font-style:italic;\ + padding-bottom: 0px;\ + }\ + .ace-chaos .ace_type {\ + color:#75ceef;\ + }]\ + .ace-chaos .ace_visibility (\ + color:#f7d777;\ + )\ + .ace-chaos .ace_identifier {\ + color:#bec1dd;\ + }\ + .ace-chaos .ace_modifier {\ + color:#efff2f;\ + }\ + .ace-chaos .ace-boolean {\ + color:#ff86ac;\ + }\ + .ace-chaos .ace_statemutability {\ + color:#ff8181;\ + }\ + .ace-chaos .ace_variable {\ + color:#e0bb83;\ + }\ + .ace-chaos .ace_meta.ace_tag {\ + color:#BE53E6;\ + }\ + .ace-chaos .ace_entity.ace_other.ace_attribute-name {\ + color:#4aa8fd;\ + }\ + .ace-chaos .ace_markup.ace_underline {\ + text-decoration: underline;\ + }\ + .ace-chaos .ace_fold-widget {\ + text-align: center;\ + }\ + .ace-chaos .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{\ + background: none;\ + border: none;\ + box-shadow: none;\ + }\ + .ace-chaos .ace_fold-widget.ace_start:after {\ + content: '▾'\ + }\ + .ace-chaos .ace_fold-widget.ace_end:after {\ + content: '▴'\ + }\ + .ace-chaos .ace_fold-widget.ace_closed:after {\ + content: '‣'\ + }\ + .ace-chaos .ace_indent-guide {\ + border-right:1px dotted #333;\ + margin-right:-1px;\ + }\ + .ace-chaos .ace_fold { \ + background: #222; \ + border-radius: 3px; \ + color: #7AF; \ + border: none; \ + }\ + .ace-chaos .ace_fold:hover {\ + background: #CCC; \ + color: #000;\ + }\ + "; + + var dom = acequire("../lib/dom"); + dom.importCssString(exports.cssText, exports.cssClass); + + }); \ No newline at end of file