dynamically change theme

pull/1/head
yann300 6 years ago
parent 1faf99c18c
commit f897ebdcdf
  1. 50
      src/app/editor/editor.js
  2. 4
      src/app/tabs/settings-tab.js
  3. 9
      src/app/ui/styles-guide/theme-chooser.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);
}
</style>
`)
@ -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) {

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

@ -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()

Loading…
Cancel
Save