mirror
/
remix-project
mirror of https://github.com/ethereum/remix-project.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #2900 from ethereum/editorTheme

Browse Source 
editor color themes: renamed edited 'chaos' to 'remixDark'
uiCheck
yann300 5 years ago committed by GitHub
parent 49bd1c2aaf 18a1818d56
commit fd94c42665
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 57 additions and 76 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 102
      assets/js/editor/darkTheme.js
  2. 10
      src/app/editor/editor.js
  3. 1
      src/app/tabs/theme-module.js
  4. 20
      test-browser/tests/generalSettings.test.js

102
assets/js/editor/darkTheme.js
Unescape View File

@ -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;\
}\

10
src/app/editor/editor.js
Unescape View File

@ -20,8 +20,9 @@ require('brace/mode/javascript')
require('brace/mode/python')
require('brace/mode/json')
require('brace/mode/rust')
require('brace/theme/chrome')
require('../../../assets/js/editor/darkTheme')
require('brace/theme/chrome') // for all light themes
require('brace/theme/chaos') // for all dark themes
require('../../../assets/js/editor/darkTheme') // a custom one for remix 'Dark' theme
const css = csjs`
.ace-editor {
@ -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

1
src/app/tabs/theme-module.js
Unescape View File

@ -18,7 +18,6 @@ const themes = [
{name: 'Yeti', quality: 'light', url: 'https://bootswatch.com/4/yeti/bootstrap.min.css'},
{name: 'Cyborg', quality: 'dark', url: 'https://bootswatch.com/4/cyborg/bootstrap.min.css'},
{name: 'Darkly', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/darkly/bootstrap.min.css'},
{name: 'Slate', quality: 'light', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/slate/bootstrap.min.css'},
{name: 'Superhero', quality: 'dark', url: 'https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/superhero/bootstrap.min.css'}
]

20
test-browser/tests/generalSettings.test.js
Unescape View File

@ -212,18 +212,6 @@ module.exports = {
.checkElementStyle(':root', '--danger', remixIdeThemes.darkly.danger)
},
'Should load Slate theme': function (browser) {
browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
.click('*[data-id="settingsTabThemeSlate"]')
.pause(2000)
.checkElementStyle(':root', '--primary', remixIdeThemes.slate.primary)
.checkElementStyle(':root', '--secondary', remixIdeThemes.slate.secondary)
.checkElementStyle(':root', '--success', remixIdeThemes.slate.success)
.checkElementStyle(':root', '--info', remixIdeThemes.slate.info)
.checkElementStyle(':root', '--warning', remixIdeThemes.slate.warning)
.checkElementStyle(':root', '--danger', remixIdeThemes.slate.danger)
},
'Should load Superhero theme': function (browser) {
browser.waitForElementVisible('*[data-id="verticalIconsKindsettings"]', 5000)
.click('*[data-id="settingsTabThemeSuperhero"]')
@ -337,14 +325,6 @@ var remixIdeThemes = {
warning: '#F39C12',
danger: '#E74C3C'
},
slate: {
primary: '#3A3F44',
secondary: '#7A8288',
success: '#62c462',
info: '#5bc0de',
warning: '#f89406',
danger: '#ee5f5b'
},
superhero: {
primary: '#DF691A',
secondary: '#4E5D6C',

Write Preview
Loading…
Cancel
Save