diff --git a/src/app/editor/editor.js b/src/app/editor/editor.js index 7fb63b24ec..714d886375 100644 --- a/src/app/editor/editor.js +++ b/src/app/editor/editor.js @@ -4,8 +4,6 @@ const yo = require('yo-yo') const csjs = require('csjs-inject') const ace = require('brace') -require('brace/theme/tomorrow_night_blue') - const globalRegistry = require('../../global/registry') const SourceHighlighters = require('./SourceHighlighters') @@ -17,22 +15,12 @@ require('ace-mode-solidity/build/remix-ide/mode-solidity') require('brace/mode/javascript') require('brace/mode/python') require('brace/mode/json') -const styleGuide = require('../ui/styles-guide/theme-chooser') -const styles = styleGuide.chooser() - -function setTheme (cb) { - if (styles.appProperties.aceTheme) { - cb('brace/theme/', styles.appProperties.aceTheme) - } -} - -setTheme((path, theme) => { - require('brace/theme/tomorrow_night_blue') -}) +const themeChooser = require('../ui/styles-guide/theme-chooser') +require('brace/theme/tomorrow_night_blue') +require('brace/theme/solarized_light') const css = csjs` .ace-editor { - background-color : ${styles.editor.backgroundColor_Editor}; width : 100%; } ` @@ -41,35 +29,29 @@ document.head.appendChild(yo` .ace-tm .ace_gutter, .ace-tm .ace_gutter-active-line, .ace-tm .ace_marker-layer .ace_active-line { - background-color: ${styles.editor.backgroundColor_Tabs_Highlights}; + background-color: var(--secondary); } .ace_gutter-cell.ace_breakpoint{ - background-color: ${styles.editor.backgroundColor_DebuggerMode}; + background-color: var(--secondary); } .highlightreference { position:absolute; z-index:20; - background-color: ${ - styles.editor.backgroundColor_Editor_Context_Highlights - }; + background-color: var(--secondary); opacity: 0.7 } .highlightreferenceline { position:absolute; z-index:20; - background-color: ${ - styles.editor.backgroundColor_Editor_Context_Highlights - }; + background-color: var(--secondary); opacity: 0.7 } .highlightcode { position:absolute; z-index:20; - background-color: ${ - styles.editor.backgroundColor_Editor_Context_Error_Highlights - }; + background-color: var(--danger); } `) @@ -85,6 +67,14 @@ class Editor { config: this._components.registry.get('config').api } + this._themes = { + 'light': 'solarized_light', + 'dark': 'tomorrow_night_blue' + } + themeChooser.event.on('switchTheme', (type) => { + this.setTheme(type) + }) + // Init this.event = new EventManager() this.sessions = {} @@ -114,9 +104,7 @@ class Editor { this.editor.setShowPrintMargin(false) this.editor.resize(true) - if (styles.appProperties.aceTheme) { - this.editor.setTheme('ace/theme/' + styles.appProperties.aceTheme) - } + this.setTheme() this.editor.setOptions({ enableBasicAutocompletion: true, @@ -170,6 +158,10 @@ class Editor { }) } + setTheme (type) { + this.editor.setTheme('ace/theme/' + this._themes[type]) + } + _onChange () { const currentFile = this._deps.config.get('currentFile') if (!currentFile) { diff --git a/src/app/tabs/settings-tab.js b/src/app/tabs/settings-tab.js index 3c1f656b48..2d666378e2 100644 --- a/src/app/tabs/settings-tab.js +++ b/src/app/tabs/settings-tab.js @@ -148,19 +148,17 @@ module.exports = class SettingsTab { } function onswitch2darkTheme (event) { styleGuide.switchTheme('dark') - // window.location.reload() } function onswitch2lightTheme (event) { styleGuide.switchTheme('light') - // window.location.reload() } function onswitch2cleanTheme (event) { styleGuide.switchTheme('clean') - // window.location.reload() } function onchangePersonal (event) { self._deps.config.set('settings/personal-mode', !self._deps.config.get('settings/personal-mode')) } + styleGuide.switchTheme() return self._view.el } } diff --git a/src/app/ui/styles-guide/theme-chooser.js b/src/app/ui/styles-guide/theme-chooser.js index 59f06246fe..dc4dff9472 100644 --- a/src/app/ui/styles-guide/theme-chooser.js +++ b/src/app/ui/styles-guide/theme-chooser.js @@ -2,6 +2,7 @@ var styleGuideLight = require('./style-guide') var styleGuideDark = require('./styleGuideDark') var styleGuideClean = require('./styleGuideClean') var Storage = require('remix-lib').Storage +var EventEmitter = require('events') // Boostrap themes // TODO : Put it somewhere else @@ -17,7 +18,7 @@ const themeVariable = { clean: 'light' } module.exports = { - + event: new EventEmitter(), chooser: function () { const themeStorage = new Storage('style:') if (themeStorage.exists('theme')) { @@ -43,10 +44,14 @@ module.exports = { switchTheme: function (theme) { var themeStorage = new Storage('style:') - themeStorage.set('theme', theme) + if (theme) themeStorage.set('theme', theme) + else { + theme = themeStorage.get('theme') + } if (themes[theme]) { document.getElementById('theme-link').setAttribute('href', themes[theme]) document.documentElement.style.setProperty('--theme', themeVariable[theme]) + this.event.emit('switchTheme', themeVariable[theme]) } // if (theme === 'dark') { // return styleGuideDark()