mirror of
https://github.com/4ian/GDevelop.git
synced 2025-10-15 10:19:04 +00:00
Allow to choose a custom theme for the Monaco code editor
This commit is contained in:
Florian Rival
249
newIDE/app/src/CodeEditor/Theme/GitHub.js
Normal file
249
newIDE/app/src/CodeEditor/Theme/GitHub.js
Normal file
@@ -0,0 +1,249 @@
|
||||
const themeData = {
|
||||
base: 'vs',
|
||||
inherit: true,
|
||||
rules: [
|
||||
{
|
||||
foreground: '999988',
|
||||
fontStyle: 'italic',
|
||||
token: 'comment',
|
||||
},
|
||||
{
|
||||
foreground: '999999',
|
||||
fontStyle: 'bold',
|
||||
token: 'comment.block.preprocessor',
|
||||
},
|
||||
{
|
||||
foreground: '999999',
|
||||
fontStyle: 'bold italic',
|
||||
token: 'comment.documentation',
|
||||
},
|
||||
{
|
||||
foreground: '999999',
|
||||
fontStyle: 'bold italic',
|
||||
token: 'comment.block.documentation',
|
||||
},
|
||||
{
|
||||
foreground: 'a61717',
|
||||
background: 'e3d2d2',
|
||||
token: 'invalid.illegal',
|
||||
},
|
||||
{
|
||||
fontStyle: 'bold',
|
||||
token: 'keyword',
|
||||
},
|
||||
{
|
||||
fontStyle: 'bold',
|
||||
token: 'storage',
|
||||
},
|
||||
{
|
||||
fontStyle: 'bold',
|
||||
token: 'keyword.operator',
|
||||
},
|
||||
{
|
||||
fontStyle: 'bold',
|
||||
token: 'constant.language',
|
||||
},
|
||||
{
|
||||
fontStyle: 'bold',
|
||||
token: 'support.constant',
|
||||
},
|
||||
{
|
||||
foreground: '445588',
|
||||
fontStyle: 'bold',
|
||||
token: 'storage.type',
|
||||
},
|
||||
{
|
||||
foreground: '445588',
|
||||
fontStyle: 'bold',
|
||||
token: 'support.type',
|
||||
},
|
||||
{
|
||||
foreground: '008080',
|
||||
token: 'entity.other.attribute-name',
|
||||
},
|
||||
{
|
||||
foreground: '0086b3',
|
||||
token: 'variable.other',
|
||||
},
|
||||
{
|
||||
foreground: '999999',
|
||||
token: 'variable.language',
|
||||
},
|
||||
{
|
||||
foreground: '445588',
|
||||
fontStyle: 'bold',
|
||||
token: 'entity.name.type',
|
||||
},
|
||||
{
|
||||
foreground: '445588',
|
||||
fontStyle: 'bold',
|
||||
token: 'entity.other.inherited-class',
|
||||
},
|
||||
{
|
||||
foreground: '445588',
|
||||
fontStyle: 'bold',
|
||||
token: 'support.class',
|
||||
},
|
||||
{
|
||||
foreground: '008080',
|
||||
token: 'variable.other.constant',
|
||||
},
|
||||
{
|
||||
foreground: '800080',
|
||||
token: 'constant.character.entity',
|
||||
},
|
||||
{
|
||||
foreground: '990000',
|
||||
token: 'entity.name.exception',
|
||||
},
|
||||
{
|
||||
foreground: '990000',
|
||||
token: 'entity.name.function',
|
||||
},
|
||||
{
|
||||
foreground: '990000',
|
||||
token: 'support.function',
|
||||
},
|
||||
{
|
||||
foreground: '990000',
|
||||
token: 'keyword.other.name-of-parameter',
|
||||
},
|
||||
{
|
||||
foreground: '555555',
|
||||
token: 'entity.name.section',
|
||||
},
|
||||
{
|
||||
foreground: '000080',
|
||||
token: 'entity.name.tag',
|
||||
},
|
||||
{
|
||||
foreground: '008080',
|
||||
token: 'variable.parameter',
|
||||
},
|
||||
{
|
||||
foreground: '008080',
|
||||
token: 'support.variable',
|
||||
},
|
||||
{
|
||||
foreground: '009999',
|
||||
token: 'constant.numeric',
|
||||
},
|
||||
{
|
||||
foreground: '009999',
|
||||
token: 'constant.other',
|
||||
},
|
||||
{
|
||||
foreground: 'dd1144',
|
||||
token: 'string - string source',
|
||||
},
|
||||
{
|
||||
foreground: 'dd1144',
|
||||
token: 'constant.character',
|
||||
},
|
||||
{
|
||||
foreground: '009926',
|
||||
token: 'string.regexp',
|
||||
},
|
||||
{
|
||||
foreground: '990073',
|
||||
token: 'constant.other.symbol',
|
||||
},
|
||||
{
|
||||
fontStyle: 'bold',
|
||||
token: 'punctuation',
|
||||
},
|
||||
{
|
||||
foreground: '000000',
|
||||
background: 'ffdddd',
|
||||
token: 'markup.deleted',
|
||||
},
|
||||
{
|
||||
fontStyle: 'italic',
|
||||
token: 'markup.italic',
|
||||
},
|
||||
{
|
||||
foreground: 'aa0000',
|
||||
token: 'markup.error',
|
||||
},
|
||||
{
|
||||
foreground: '999999',
|
||||
token: 'markup.heading.1',
|
||||
},
|
||||
{
|
||||
foreground: '000000',
|
||||
background: 'ddffdd',
|
||||
token: 'markup.inserted',
|
||||
},
|
||||
{
|
||||
foreground: '888888',
|
||||
token: 'markup.output',
|
||||
},
|
||||
{
|
||||
foreground: '888888',
|
||||
token: 'markup.raw',
|
||||
},
|
||||
{
|
||||
foreground: '555555',
|
||||
token: 'markup.prompt',
|
||||
},
|
||||
{
|
||||
fontStyle: 'bold',
|
||||
token: 'markup.bold',
|
||||
},
|
||||
{
|
||||
foreground: 'aaaaaa',
|
||||
token: 'markup.heading',
|
||||
},
|
||||
{
|
||||
foreground: 'aa0000',
|
||||
token: 'markup.traceback',
|
||||
},
|
||||
{
|
||||
fontStyle: 'underline',
|
||||
token: 'markup.underline',
|
||||
},
|
||||
{
|
||||
foreground: '999999',
|
||||
background: 'eaf2f5',
|
||||
token: 'meta.diff.range',
|
||||
},
|
||||
{
|
||||
foreground: '999999',
|
||||
background: 'eaf2f5',
|
||||
token: 'meta.diff.index',
|
||||
},
|
||||
{
|
||||
foreground: '999999',
|
||||
background: 'eaf2f5',
|
||||
token: 'meta.separator',
|
||||
},
|
||||
{
|
||||
foreground: '999999',
|
||||
background: 'ffdddd',
|
||||
token: 'meta.diff.header.from-file',
|
||||
},
|
||||
{
|
||||
foreground: '999999',
|
||||
background: 'ddffdd',
|
||||
token: 'meta.diff.header.to-file',
|
||||
},
|
||||
{
|
||||
foreground: '4183c4',
|
||||
token: 'meta.link',
|
||||
},
|
||||
],
|
||||
colors: {
|
||||
'editor.foreground': '#000000',
|
||||
'editor.background': '#F8F8FF',
|
||||
'editor.selectionBackground': '#B4D5FE',
|
||||
'editor.lineHighlightBackground': '#FFFEEB',
|
||||
'editorCursor.foreground': '#666666',
|
||||
'editorWhitespace.foreground': '#BBBBBB',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'GitHub',
|
||||
themeName: 'github',
|
||||
themeData,
|
||||
};
|
||||
146
newIDE/app/src/CodeEditor/Theme/Monokai.js
Normal file
146
newIDE/app/src/CodeEditor/Theme/Monokai.js
Normal file
@@ -0,0 +1,146 @@
|
||||
const themeData = {
|
||||
base: 'vs-dark',
|
||||
inherit: true,
|
||||
rules: [
|
||||
{
|
||||
foreground: '75715e',
|
||||
token: 'comment',
|
||||
},
|
||||
{
|
||||
foreground: 'e6db74',
|
||||
token: 'string',
|
||||
},
|
||||
{
|
||||
foreground: 'ae81ff',
|
||||
token: 'constant.numeric',
|
||||
},
|
||||
{
|
||||
foreground: 'ae81ff',
|
||||
token: 'constant.language',
|
||||
},
|
||||
{
|
||||
foreground: 'ae81ff',
|
||||
token: 'constant.character',
|
||||
},
|
||||
{
|
||||
foreground: 'ae81ff',
|
||||
token: 'constant.other',
|
||||
},
|
||||
{
|
||||
foreground: 'f92672',
|
||||
token: 'keyword',
|
||||
},
|
||||
{
|
||||
foreground: 'f92672',
|
||||
token: 'storage',
|
||||
},
|
||||
{
|
||||
foreground: '66d9ef',
|
||||
fontStyle: 'italic',
|
||||
token: 'storage.type',
|
||||
},
|
||||
{
|
||||
foreground: 'a6e22e',
|
||||
fontStyle: 'underline',
|
||||
token: 'entity.name.class',
|
||||
},
|
||||
{
|
||||
foreground: 'a6e22e',
|
||||
fontStyle: 'italic underline',
|
||||
token: 'entity.other.inherited-class',
|
||||
},
|
||||
{
|
||||
foreground: 'a6e22e',
|
||||
token: 'entity.name.function',
|
||||
},
|
||||
{
|
||||
foreground: 'fd971f',
|
||||
fontStyle: 'italic',
|
||||
token: 'variable.parameter',
|
||||
},
|
||||
{
|
||||
foreground: 'f92672',
|
||||
token: 'entity.name.tag',
|
||||
},
|
||||
{
|
||||
foreground: 'a6e22e',
|
||||
token: 'entity.other.attribute-name',
|
||||
},
|
||||
{
|
||||
foreground: '66d9ef',
|
||||
token: 'support.function',
|
||||
},
|
||||
{
|
||||
foreground: '66d9ef',
|
||||
token: 'support.constant',
|
||||
},
|
||||
{
|
||||
foreground: '66d9ef',
|
||||
fontStyle: 'italic',
|
||||
token: 'support.type',
|
||||
},
|
||||
{
|
||||
foreground: '66d9ef',
|
||||
fontStyle: 'italic',
|
||||
token: 'support.class',
|
||||
},
|
||||
{
|
||||
foreground: 'f8f8f0',
|
||||
background: 'f92672',
|
||||
token: 'invalid',
|
||||
},
|
||||
{
|
||||
foreground: 'f8f8f0',
|
||||
background: 'ae81ff',
|
||||
token: 'invalid.deprecated',
|
||||
},
|
||||
{
|
||||
foreground: 'cfcfc2',
|
||||
token: 'meta.structure.dictionary.json string.quoted.double.json',
|
||||
},
|
||||
{
|
||||
foreground: '75715e',
|
||||
token: 'meta.diff',
|
||||
},
|
||||
{
|
||||
foreground: '75715e',
|
||||
token: 'meta.diff.header',
|
||||
},
|
||||
{
|
||||
foreground: 'f92672',
|
||||
token: 'markup.deleted',
|
||||
},
|
||||
{
|
||||
foreground: 'a6e22e',
|
||||
token: 'markup.inserted',
|
||||
},
|
||||
{
|
||||
foreground: 'e6db74',
|
||||
token: 'markup.changed',
|
||||
},
|
||||
{
|
||||
foreground: 'ae81ff',
|
||||
token: 'constant.numeric.line-number.find-in-files - match',
|
||||
},
|
||||
{
|
||||
foreground: 'e6db74',
|
||||
token: 'entity.name.filename.find-in-files',
|
||||
},
|
||||
],
|
||||
colors: {
|
||||
'editor.foreground': '#F8F8F2',
|
||||
'editor.background': '#272822',
|
||||
'editor.selectionBackground': '#49483E',
|
||||
'editor.lineHighlightBackground': '#3E3D32',
|
||||
'editorCursor.foreground': '#F8F8F0',
|
||||
'editorWhitespace.foreground': '#3B3A32',
|
||||
'editorIndentGuide.activeBackground': '#9D550F',
|
||||
'editor.selectionHighlightBorder': '#222218',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'Monokai',
|
||||
themeName: 'monokai',
|
||||
themeData,
|
||||
};
|
||||
139
newIDE/app/src/CodeEditor/Theme/SolarizedDark.js
Normal file
139
newIDE/app/src/CodeEditor/Theme/SolarizedDark.js
Normal file
@@ -0,0 +1,139 @@
|
||||
const themeData = {
|
||||
base: 'vs-dark',
|
||||
inherit: true,
|
||||
rules: [
|
||||
{
|
||||
foreground: '657b83',
|
||||
fontStyle: 'italic',
|
||||
token: 'comment',
|
||||
},
|
||||
{
|
||||
foreground: '2aa198',
|
||||
token: 'string',
|
||||
},
|
||||
{
|
||||
foreground: 'd30102',
|
||||
token: 'string.regexp',
|
||||
},
|
||||
{
|
||||
foreground: 'd33682',
|
||||
token: 'constant.numeric',
|
||||
},
|
||||
{
|
||||
foreground: '268bd2',
|
||||
token: 'variable.language',
|
||||
},
|
||||
{
|
||||
foreground: '268bd2',
|
||||
token: 'variable.other',
|
||||
},
|
||||
{
|
||||
foreground: '859900',
|
||||
token: 'keyword',
|
||||
},
|
||||
{
|
||||
foreground: '93a1a1',
|
||||
fontStyle: 'bold',
|
||||
token: 'storage',
|
||||
},
|
||||
{
|
||||
foreground: 'cb4b16',
|
||||
token: 'entity.name.class',
|
||||
},
|
||||
{
|
||||
foreground: 'cb4b16',
|
||||
token: 'entity.name.type.class',
|
||||
},
|
||||
{
|
||||
foreground: '268bd2',
|
||||
token: 'entity.name.function',
|
||||
},
|
||||
{
|
||||
foreground: '859900',
|
||||
token: 'punctuation.definition.variable',
|
||||
},
|
||||
{
|
||||
foreground: 'd30102',
|
||||
token: 'punctuation.section.embedded.begin',
|
||||
},
|
||||
{
|
||||
foreground: 'd30102',
|
||||
token: 'punctuation.section.embedded.end',
|
||||
},
|
||||
{
|
||||
foreground: 'b58900',
|
||||
token: 'constant.language',
|
||||
},
|
||||
{
|
||||
foreground: 'b58900',
|
||||
token: 'meta.preprocessor',
|
||||
},
|
||||
{
|
||||
foreground: 'cb4b16',
|
||||
token: 'support.function.construct',
|
||||
},
|
||||
{
|
||||
foreground: 'cb4b16',
|
||||
token: 'keyword.other.new',
|
||||
},
|
||||
{
|
||||
foreground: 'cb4b16',
|
||||
token: 'constant.character',
|
||||
},
|
||||
{
|
||||
foreground: 'cb4b16',
|
||||
token: 'constant.other',
|
||||
},
|
||||
{
|
||||
foreground: '6c71c4',
|
||||
token: 'entity.other.inherited-class',
|
||||
},
|
||||
{
|
||||
foreground: '268bd2',
|
||||
fontStyle: 'bold',
|
||||
token: 'entity.name.tag',
|
||||
},
|
||||
{
|
||||
foreground: '657b83',
|
||||
token: 'punctuation.definition.tag',
|
||||
},
|
||||
{
|
||||
foreground: '93a1a1',
|
||||
token: 'entity.other.attribute-name',
|
||||
},
|
||||
{
|
||||
foreground: '268bd2',
|
||||
token: 'support.function',
|
||||
},
|
||||
{
|
||||
foreground: 'd30102',
|
||||
token: 'punctuation.separator.continuation',
|
||||
},
|
||||
{
|
||||
foreground: '859900',
|
||||
token: 'support.type',
|
||||
},
|
||||
{
|
||||
foreground: '859900',
|
||||
token: 'support.class',
|
||||
},
|
||||
{
|
||||
foreground: 'cb4b16',
|
||||
token: 'support.type.exception',
|
||||
},
|
||||
],
|
||||
colors: {
|
||||
'editor.foreground': '#93A1A1',
|
||||
'editor.background': '#002B36',
|
||||
'editor.selectionBackground': '#073642',
|
||||
'editor.lineHighlightBackground': '#073642',
|
||||
'editorCursor.foreground': '#D30102',
|
||||
'editorWhitespace.foreground': '#93A1A1',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'Solarized-Dark',
|
||||
themeName: 'solarized-dark',
|
||||
themeData,
|
||||
};
|
||||
138
newIDE/app/src/CodeEditor/Theme/SolarizedLight.js
Normal file
138
newIDE/app/src/CodeEditor/Theme/SolarizedLight.js
Normal file
@@ -0,0 +1,138 @@
|
||||
const themeData = {
|
||||
base: 'vs',
|
||||
inherit: true,
|
||||
rules: [
|
||||
{
|
||||
foreground: '93a1a1',
|
||||
token: 'comment',
|
||||
},
|
||||
{
|
||||
foreground: '2aa198',
|
||||
token: 'string',
|
||||
},
|
||||
{
|
||||
foreground: 'd30102',
|
||||
token: 'string.regexp',
|
||||
},
|
||||
{
|
||||
foreground: 'd33682',
|
||||
token: 'constant.numeric',
|
||||
},
|
||||
{
|
||||
foreground: '268bd2',
|
||||
token: 'variable.language',
|
||||
},
|
||||
{
|
||||
foreground: '268bd2',
|
||||
token: 'variable.other',
|
||||
},
|
||||
{
|
||||
foreground: '859900',
|
||||
token: 'keyword',
|
||||
},
|
||||
{
|
||||
foreground: '073642',
|
||||
fontStyle: 'bold',
|
||||
token: 'storage',
|
||||
},
|
||||
{
|
||||
foreground: '268bd2',
|
||||
token: 'entity.name.class',
|
||||
},
|
||||
{
|
||||
foreground: '268bd2',
|
||||
token: 'entity.name.type.class',
|
||||
},
|
||||
{
|
||||
foreground: '268bd2',
|
||||
token: 'entity.name.function',
|
||||
},
|
||||
{
|
||||
foreground: '859900',
|
||||
token: 'punctuation.definition.variable',
|
||||
},
|
||||
{
|
||||
foreground: 'd30102',
|
||||
token: 'punctuation.section.embedded.begin',
|
||||
},
|
||||
{
|
||||
foreground: 'd30102',
|
||||
token: 'punctuation.section.embedded.end',
|
||||
},
|
||||
{
|
||||
foreground: 'b58900',
|
||||
token: 'constant.language',
|
||||
},
|
||||
{
|
||||
foreground: 'b58900',
|
||||
token: 'meta.preprocessor',
|
||||
},
|
||||
{
|
||||
foreground: 'd30102',
|
||||
token: 'support.function.construct',
|
||||
},
|
||||
{
|
||||
foreground: 'd30102',
|
||||
token: 'keyword.other.new',
|
||||
},
|
||||
{
|
||||
foreground: 'cb4b16',
|
||||
token: 'constant.character',
|
||||
},
|
||||
{
|
||||
foreground: 'cb4b16',
|
||||
token: 'constant.other',
|
||||
},
|
||||
{
|
||||
foreground: '268bd2',
|
||||
fontStyle: 'bold',
|
||||
token: 'entity.name.tag',
|
||||
},
|
||||
{
|
||||
foreground: '93a1a1',
|
||||
token: 'punctuation.definition.tag.begin',
|
||||
},
|
||||
{
|
||||
foreground: '93a1a1',
|
||||
token: 'punctuation.definition.tag.end',
|
||||
},
|
||||
{
|
||||
foreground: '93a1a1',
|
||||
token: 'entity.other.attribute-name',
|
||||
},
|
||||
{
|
||||
foreground: '268bd2',
|
||||
token: 'support.function',
|
||||
},
|
||||
{
|
||||
foreground: 'd30102',
|
||||
token: 'punctuation.separator.continuation',
|
||||
},
|
||||
{
|
||||
foreground: '859900',
|
||||
token: 'support.type',
|
||||
},
|
||||
{
|
||||
foreground: '859900',
|
||||
token: 'support.class',
|
||||
},
|
||||
{
|
||||
foreground: 'cb4b16',
|
||||
token: 'support.type.exception',
|
||||
},
|
||||
],
|
||||
colors: {
|
||||
'editor.foreground': '#586E75',
|
||||
'editor.background': '#FDF6E3',
|
||||
'editor.selectionBackground': '#073642',
|
||||
'editor.lineHighlightBackground': '#EEE8D5',
|
||||
'editorCursor.foreground': '#000000',
|
||||
'editorWhitespace.foreground': '#93A1A1',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'Solarized-Light',
|
||||
themeName: 'solarized-light',
|
||||
themeData,
|
||||
};
|
||||
183
newIDE/app/src/CodeEditor/Theme/Tomorrow.js
Normal file
183
newIDE/app/src/CodeEditor/Theme/Tomorrow.js
Normal file
@@ -0,0 +1,183 @@
|
||||
const themeData = {
|
||||
base: 'vs',
|
||||
inherit: true,
|
||||
rules: [
|
||||
{
|
||||
foreground: '8e908c',
|
||||
token: 'comment',
|
||||
},
|
||||
{
|
||||
foreground: '666969',
|
||||
token: 'keyword.operator.class',
|
||||
},
|
||||
{
|
||||
foreground: '666969',
|
||||
token: 'constant.other',
|
||||
},
|
||||
{
|
||||
foreground: '666969',
|
||||
token: 'source.php.embedded.line',
|
||||
},
|
||||
{
|
||||
foreground: 'c82829',
|
||||
token: 'variable',
|
||||
},
|
||||
{
|
||||
foreground: 'c82829',
|
||||
token: 'support.other.variable',
|
||||
},
|
||||
{
|
||||
foreground: 'c82829',
|
||||
token: 'string.other.link',
|
||||
},
|
||||
{
|
||||
foreground: 'c82829',
|
||||
token: 'string.regexp',
|
||||
},
|
||||
{
|
||||
foreground: 'c82829',
|
||||
token: 'entity.name.tag',
|
||||
},
|
||||
{
|
||||
foreground: 'c82829',
|
||||
token: 'entity.other.attribute-name',
|
||||
},
|
||||
{
|
||||
foreground: 'c82829',
|
||||
token: 'meta.tag',
|
||||
},
|
||||
{
|
||||
foreground: 'c82829',
|
||||
token: 'declaration.tag',
|
||||
},
|
||||
{
|
||||
foreground: 'f5871f',
|
||||
token: 'constant.numeric',
|
||||
},
|
||||
{
|
||||
foreground: 'f5871f',
|
||||
token: 'constant.language',
|
||||
},
|
||||
{
|
||||
foreground: 'f5871f',
|
||||
token: 'support.constant',
|
||||
},
|
||||
{
|
||||
foreground: 'f5871f',
|
||||
token: 'constant.character',
|
||||
},
|
||||
{
|
||||
foreground: 'f5871f',
|
||||
token: 'variable.parameter',
|
||||
},
|
||||
{
|
||||
foreground: 'f5871f',
|
||||
token: 'punctuation.section.embedded',
|
||||
},
|
||||
{
|
||||
foreground: 'f5871f',
|
||||
token: 'keyword.other.unit',
|
||||
},
|
||||
{
|
||||
foreground: 'c99e00',
|
||||
token: 'entity.name.class',
|
||||
},
|
||||
{
|
||||
foreground: 'c99e00',
|
||||
token: 'entity.name.type.class',
|
||||
},
|
||||
{
|
||||
foreground: 'c99e00',
|
||||
token: 'support.type',
|
||||
},
|
||||
{
|
||||
foreground: 'c99e00',
|
||||
token: 'support.class',
|
||||
},
|
||||
{
|
||||
foreground: '718c00',
|
||||
token: 'string',
|
||||
},
|
||||
{
|
||||
foreground: '718c00',
|
||||
token: 'constant.other.symbol',
|
||||
},
|
||||
{
|
||||
foreground: '718c00',
|
||||
token: 'entity.other.inherited-class',
|
||||
},
|
||||
{
|
||||
foreground: '718c00',
|
||||
token: 'markup.heading',
|
||||
},
|
||||
{
|
||||
foreground: '3e999f',
|
||||
token: 'keyword.operator',
|
||||
},
|
||||
{
|
||||
foreground: '3e999f',
|
||||
token: 'constant.other.color',
|
||||
},
|
||||
{
|
||||
foreground: '4271ae',
|
||||
token: 'entity.name.function',
|
||||
},
|
||||
{
|
||||
foreground: '4271ae',
|
||||
token: 'meta.function-call',
|
||||
},
|
||||
{
|
||||
foreground: '4271ae',
|
||||
token: 'support.function',
|
||||
},
|
||||
{
|
||||
foreground: '4271ae',
|
||||
token: 'keyword.other.special-method',
|
||||
},
|
||||
{
|
||||
foreground: '4271ae',
|
||||
token: 'meta.block-level',
|
||||
},
|
||||
{
|
||||
foreground: '8959a8',
|
||||
token: 'keyword',
|
||||
},
|
||||
{
|
||||
foreground: '8959a8',
|
||||
token: 'storage',
|
||||
},
|
||||
{
|
||||
foreground: '8959a8',
|
||||
token: 'storage.type',
|
||||
},
|
||||
{
|
||||
foreground: 'ffffff',
|
||||
background: 'c82829',
|
||||
token: 'invalid',
|
||||
},
|
||||
{
|
||||
foreground: 'ffffff',
|
||||
background: '4271ae',
|
||||
token: 'meta.separator',
|
||||
},
|
||||
{
|
||||
foreground: 'ffffff',
|
||||
background: '8959a8',
|
||||
token: 'invalid.deprecated',
|
||||
},
|
||||
],
|
||||
colors: {
|
||||
'editor.foreground': '#4D4D4C',
|
||||
'editor.background': '#FFFFFF',
|
||||
'editor.selectionBackground': '#D6D6D6',
|
||||
'editor.lineHighlightBackground': '#EFEFEF',
|
||||
'editorCursor.foreground': '#AEAFAD',
|
||||
'editorWhitespace.foreground': '#D1D1D1',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'Tomorrow',
|
||||
themeName: 'tomorrow',
|
||||
themeData,
|
||||
};
|
||||
187
newIDE/app/src/CodeEditor/Theme/TomorrowNight.js
Normal file
187
newIDE/app/src/CodeEditor/Theme/TomorrowNight.js
Normal file
@@ -0,0 +1,187 @@
|
||||
const themeData = {
|
||||
base: 'vs-dark',
|
||||
inherit: true,
|
||||
rules: [
|
||||
{
|
||||
foreground: '969896',
|
||||
token: 'comment',
|
||||
},
|
||||
{
|
||||
foreground: 'ced1cf',
|
||||
token: 'keyword.operator.class',
|
||||
},
|
||||
{
|
||||
foreground: 'ced1cf',
|
||||
token: 'constant.other',
|
||||
},
|
||||
{
|
||||
foreground: 'ced1cf',
|
||||
token: 'source.php.embedded.line',
|
||||
},
|
||||
{
|
||||
foreground: 'cc6666',
|
||||
token: 'variable',
|
||||
},
|
||||
{
|
||||
foreground: 'cc6666',
|
||||
token: 'support.other.variable',
|
||||
},
|
||||
{
|
||||
foreground: 'cc6666',
|
||||
token: 'string.other.link',
|
||||
},
|
||||
{
|
||||
foreground: 'cc6666',
|
||||
token: 'string.regexp',
|
||||
},
|
||||
{
|
||||
foreground: 'cc6666',
|
||||
token: 'entity.name.tag',
|
||||
},
|
||||
{
|
||||
foreground: 'cc6666',
|
||||
token: 'entity.other.attribute-name',
|
||||
},
|
||||
{
|
||||
foreground: 'cc6666',
|
||||
token: 'meta.tag',
|
||||
},
|
||||
{
|
||||
foreground: 'cc6666',
|
||||
token: 'declaration.tag',
|
||||
},
|
||||
{
|
||||
foreground: 'de935f',
|
||||
token: 'constant.numeric',
|
||||
},
|
||||
{
|
||||
foreground: 'de935f',
|
||||
token: 'constant.language',
|
||||
},
|
||||
{
|
||||
foreground: 'de935f',
|
||||
token: 'support.constant',
|
||||
},
|
||||
{
|
||||
foreground: 'de935f',
|
||||
token: 'constant.character',
|
||||
},
|
||||
{
|
||||
foreground: 'de935f',
|
||||
token: 'variable.parameter',
|
||||
},
|
||||
{
|
||||
foreground: 'de935f',
|
||||
token: 'punctuation.section.embedded',
|
||||
},
|
||||
{
|
||||
foreground: 'de935f',
|
||||
token: 'keyword.other.unit',
|
||||
},
|
||||
{
|
||||
foreground: 'f0c674',
|
||||
token: 'entity.name.class',
|
||||
},
|
||||
{
|
||||
foreground: 'f0c674',
|
||||
token: 'entity.name.type.class',
|
||||
},
|
||||
{
|
||||
foreground: 'f0c674',
|
||||
token: 'support.type',
|
||||
},
|
||||
{
|
||||
foreground: 'f0c674',
|
||||
token: 'support.class',
|
||||
},
|
||||
{
|
||||
foreground: 'b5bd68',
|
||||
token: 'string',
|
||||
},
|
||||
{
|
||||
foreground: 'b5bd68',
|
||||
token: 'constant.other.symbol',
|
||||
},
|
||||
{
|
||||
foreground: 'b5bd68',
|
||||
token: 'entity.other.inherited-class',
|
||||
},
|
||||
{
|
||||
foreground: 'b5bd68',
|
||||
token: 'markup.heading',
|
||||
},
|
||||
{
|
||||
foreground: '8abeb7',
|
||||
token: 'keyword.operator',
|
||||
},
|
||||
{
|
||||
foreground: '8abeb7',
|
||||
token: 'constant.other.color',
|
||||
},
|
||||
{
|
||||
foreground: '81a2be',
|
||||
token: 'entity.name.function',
|
||||
},
|
||||
{
|
||||
foreground: '81a2be',
|
||||
token: 'meta.function-call',
|
||||
},
|
||||
{
|
||||
foreground: '81a2be',
|
||||
token: 'support.function',
|
||||
},
|
||||
{
|
||||
foreground: '81a2be',
|
||||
token: 'keyword.other.special-method',
|
||||
},
|
||||
{
|
||||
foreground: '81a2be',
|
||||
token: 'meta.block-level',
|
||||
},
|
||||
{
|
||||
foreground: 'b294bb',
|
||||
token: 'keyword',
|
||||
},
|
||||
{
|
||||
foreground: 'b294bb',
|
||||
token: 'storage',
|
||||
},
|
||||
{
|
||||
foreground: 'b294bb',
|
||||
token: 'storage.type',
|
||||
},
|
||||
{
|
||||
foreground: 'b294bb',
|
||||
token: 'entity.name.tag.css',
|
||||
},
|
||||
{
|
||||
foreground: 'ced2cf',
|
||||
background: 'df5f5f',
|
||||
token: 'invalid',
|
||||
},
|
||||
{
|
||||
foreground: 'ced2cf',
|
||||
background: '82a3bf',
|
||||
token: 'meta.separator',
|
||||
},
|
||||
{
|
||||
foreground: 'ced2cf',
|
||||
background: 'b798bf',
|
||||
token: 'invalid.deprecated',
|
||||
},
|
||||
],
|
||||
colors: {
|
||||
'editor.foreground': '#C5C8C6',
|
||||
'editor.background': '#1D1F21',
|
||||
'editor.selectionBackground': '#373B41',
|
||||
'editor.lineHighlightBackground': '#282A2E',
|
||||
'editorCursor.foreground': '#AEAFAD',
|
||||
'editorWhitespace.foreground': '#4B4E55',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'Tomorrow-Night',
|
||||
themeName: 'tomorrow-night',
|
||||
themeData,
|
||||
};
|
||||
208
newIDE/app/src/CodeEditor/Theme/VibrantInk.js
Normal file
208
newIDE/app/src/CodeEditor/Theme/VibrantInk.js
Normal file
@@ -0,0 +1,208 @@
|
||||
const themeData = {
|
||||
base: 'vs-dark',
|
||||
inherit: true,
|
||||
rules: [
|
||||
{
|
||||
foreground: 'ffffff',
|
||||
background: '0f0f0f',
|
||||
token: 'text',
|
||||
},
|
||||
{
|
||||
background: '000000',
|
||||
token: 'source.ruby.rails.embedded.html',
|
||||
},
|
||||
{
|
||||
foreground: 'ffffff',
|
||||
background: '101010',
|
||||
token: 'text.html.ruby',
|
||||
},
|
||||
{
|
||||
foreground: 'ccff33',
|
||||
background: '000000',
|
||||
token: 'invalid',
|
||||
},
|
||||
{
|
||||
foreground: 'ccff33',
|
||||
background: '000000',
|
||||
token: 'invalid.deprecated',
|
||||
},
|
||||
{
|
||||
foreground: '99cc99',
|
||||
token: 'constant.numeric',
|
||||
},
|
||||
{
|
||||
foreground: 'ffffff',
|
||||
background: '000000',
|
||||
token: 'source',
|
||||
},
|
||||
{
|
||||
foreground: '9933cc',
|
||||
token: 'comment',
|
||||
},
|
||||
{
|
||||
foreground: '339999',
|
||||
token: 'constant',
|
||||
},
|
||||
{
|
||||
foreground: 'ff6600',
|
||||
token: 'keyword',
|
||||
},
|
||||
{
|
||||
foreground: 'edf8f9',
|
||||
token: 'keyword.preprocessor',
|
||||
},
|
||||
{
|
||||
foreground: 'ffffff',
|
||||
token: 'keyword.preprocessor directive',
|
||||
},
|
||||
{
|
||||
foreground: 'ffcc00',
|
||||
token: 'entity.name.function',
|
||||
},
|
||||
{
|
||||
foreground: 'ffcc00',
|
||||
token: 'storage.type.function.js',
|
||||
},
|
||||
{
|
||||
fontStyle: 'italic',
|
||||
token: 'variable.parameter',
|
||||
},
|
||||
{
|
||||
foreground: '772cb7',
|
||||
background: '070707',
|
||||
token: 'source comment.block',
|
||||
},
|
||||
{
|
||||
foreground: 'ffffff',
|
||||
token: 'variable.other',
|
||||
},
|
||||
{
|
||||
foreground: 'ffcc00',
|
||||
token: 'support.function',
|
||||
},
|
||||
{
|
||||
foreground: '66ff00',
|
||||
token: 'string',
|
||||
},
|
||||
{
|
||||
foreground: 'aaaaaa',
|
||||
token: 'string constant.character.escape',
|
||||
},
|
||||
{
|
||||
foreground: '000000',
|
||||
background: 'cccc33',
|
||||
token: 'string.interpolated',
|
||||
},
|
||||
{
|
||||
foreground: '44b4cc',
|
||||
token: 'string.regexp',
|
||||
},
|
||||
{
|
||||
foreground: 'cccc33',
|
||||
token: 'string.literal',
|
||||
},
|
||||
{
|
||||
foreground: '555555',
|
||||
token: 'string.interpolated constant.character.escape',
|
||||
},
|
||||
{
|
||||
fontStyle: 'underline',
|
||||
token: 'entity.name.class',
|
||||
},
|
||||
{
|
||||
fontStyle: 'underline',
|
||||
token: 'support.class.js',
|
||||
},
|
||||
{
|
||||
fontStyle: 'italic underline',
|
||||
token: 'entity.other.inherited-class',
|
||||
},
|
||||
{
|
||||
foreground: 'ff6600',
|
||||
token: 'meta.tag.inline.any.html',
|
||||
},
|
||||
{
|
||||
foreground: 'ff6600',
|
||||
token: 'meta.tag.block.any.html',
|
||||
},
|
||||
{
|
||||
foreground: '99cc99',
|
||||
fontStyle: 'italic',
|
||||
token: 'entity.other.attribute-name',
|
||||
},
|
||||
{
|
||||
foreground: 'dde93d',
|
||||
token: 'keyword.other',
|
||||
},
|
||||
{
|
||||
foreground: 'ff6600',
|
||||
token: 'meta.selector.css',
|
||||
},
|
||||
{
|
||||
foreground: 'ff6600',
|
||||
token: 'entity.other.attribute-name.pseudo-class.css',
|
||||
},
|
||||
{
|
||||
foreground: 'ff6600',
|
||||
token: 'entity.name.tag.wildcard.css',
|
||||
},
|
||||
{
|
||||
foreground: 'ff6600',
|
||||
token: 'entity.other.attribute-name.id.css',
|
||||
},
|
||||
{
|
||||
foreground: 'ff6600',
|
||||
token: 'entity.other.attribute-name.class.css',
|
||||
},
|
||||
{
|
||||
foreground: '999966',
|
||||
token: 'support.type.property-name.css',
|
||||
},
|
||||
{
|
||||
foreground: 'ffffff',
|
||||
token: 'keyword.other.unit.css',
|
||||
},
|
||||
{
|
||||
foreground: 'ffffff',
|
||||
token: 'constant.other.rgb-value.css',
|
||||
},
|
||||
{
|
||||
foreground: 'ffffff',
|
||||
token: 'constant.numeric.css',
|
||||
},
|
||||
{
|
||||
foreground: 'ffffff',
|
||||
token: 'support.function.event-handler.js',
|
||||
},
|
||||
{
|
||||
foreground: 'ffffff',
|
||||
token: 'keyword.operator.js',
|
||||
},
|
||||
{
|
||||
foreground: 'cccc66',
|
||||
token: 'keyword.control.js',
|
||||
},
|
||||
{
|
||||
foreground: 'ffffff',
|
||||
token: 'support.class.prototype.js',
|
||||
},
|
||||
{
|
||||
foreground: 'ff6600',
|
||||
token: 'object.property.function.prototype.js',
|
||||
},
|
||||
],
|
||||
colors: {
|
||||
'editor.foreground': '#FFFFFF',
|
||||
'editor.background': '#0F0F0F',
|
||||
'editor.selectionBackground': '#6699CC',
|
||||
'editor.lineHighlightBackground': '#333333',
|
||||
'editorCursor.foreground': '#FFFFFF',
|
||||
'editorWhitespace.foreground': '#404040',
|
||||
},
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'Vibrant Ink',
|
||||
themeName: 'vibrant-ink',
|
||||
themeData,
|
||||
};
|
||||
40
newIDE/app/src/CodeEditor/Theme/index.js
Normal file
40
newIDE/app/src/CodeEditor/Theme/index.js
Normal file
@@ -0,0 +1,40 @@
|
||||
// @flow
|
||||
import TomorrowNight from './TomorrowNight';
|
||||
import Monokai from './Monokai';
|
||||
import Tomorrow from './Tomorrow';
|
||||
import SolarizedDark from './SolarizedDark';
|
||||
import SolarizedLight from './SolarizedLight';
|
||||
import VibrantInk from './VibrantInk';
|
||||
import GitHub from './GitHub';
|
||||
|
||||
type CodeEditorTheme = {|
|
||||
name: string,
|
||||
themeName: string,
|
||||
themeData?: any,
|
||||
|};
|
||||
|
||||
// Want to add a new theme? Grab a theme made for Visual Studio Code (Monaco Editor)
|
||||
// (for example on https://bitwiser.in/monaco-themes/). Copy an existing file (like Monokai.js),
|
||||
// replace themeData, update the name, and finally add it to this list
|
||||
// (+import it at the top of the file):
|
||||
const themes: Array<CodeEditorTheme> = [
|
||||
// Built-in Monaco editor themes
|
||||
{
|
||||
name: 'Visual Studio',
|
||||
themeName: 'vs',
|
||||
},
|
||||
{
|
||||
name: 'Visual Studio Dark',
|
||||
themeName: 'vs-dark',
|
||||
},
|
||||
// Third parties themes
|
||||
GitHub,
|
||||
Monokai,
|
||||
SolarizedDark,
|
||||
SolarizedLight,
|
||||
Tomorrow,
|
||||
TomorrowNight,
|
||||
VibrantInk,
|
||||
];
|
||||
|
||||
export const getAllThemes = () => themes;
|
||||
@@ -3,6 +3,8 @@ import * as React from 'react';
|
||||
import { setupAutocompletions } from './LocalCodeEditorAutocompletions';
|
||||
import PlaceholderLoader from '../UI/PlaceholderLoader';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import PreferencesContext from '../MainFrame/Preferences/PreferencesContext';
|
||||
import { getAllThemes } from './Theme';
|
||||
|
||||
export type State = {|
|
||||
MonacoEditor: ?any,
|
||||
@@ -24,7 +26,8 @@ const monacoEditorOptions = {
|
||||
|
||||
// There is only a single instance of monaco living, keep track
|
||||
// of if its initialized or not.
|
||||
let monacoInitialized = false;
|
||||
let monacoCompletionsInitialized = false;
|
||||
let monacoThemesInitialized = false;
|
||||
|
||||
export class CodeEditor extends React.Component<Props, State> {
|
||||
state = {
|
||||
@@ -32,9 +35,27 @@ export class CodeEditor extends React.Component<Props, State> {
|
||||
error: null,
|
||||
};
|
||||
|
||||
setupEditor = (editor: any, monaco: any) => {
|
||||
if (!monacoInitialized) {
|
||||
monacoInitialized = true;
|
||||
setupEditorThemes = (monaco: any) => {
|
||||
if (!monacoThemesInitialized) {
|
||||
monacoThemesInitialized = true;
|
||||
|
||||
getAllThemes().forEach(codeEditorTheme => {
|
||||
// Builtin themes don't have themeData, don't redefine them.
|
||||
if (codeEditorTheme.themeData) {
|
||||
console.log(codeEditorTheme.themeName);
|
||||
console.log(codeEditorTheme.themeData);
|
||||
monaco.editor.defineTheme(
|
||||
codeEditorTheme.themeName,
|
||||
codeEditorTheme.themeData
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
setupEditorCompletions = (editor: any, monaco: any) => {
|
||||
if (!monacoCompletionsInitialized) {
|
||||
monacoCompletionsInitialized = true;
|
||||
|
||||
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
|
||||
// noLib: true,
|
||||
@@ -47,7 +68,7 @@ export class CodeEditor extends React.Component<Props, State> {
|
||||
}
|
||||
|
||||
if (this.props.onEditorMounted) this.props.onEditorMounted();
|
||||
}
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.loadMonacoEditor();
|
||||
@@ -88,16 +109,21 @@ export class CodeEditor extends React.Component<Props, State> {
|
||||
}
|
||||
|
||||
return (
|
||||
<MonacoEditor
|
||||
width={this.props.width || 600}
|
||||
height="400"
|
||||
language="javascript"
|
||||
theme="vs-dark"
|
||||
value={this.props.value}
|
||||
onChange={this.props.onChange}
|
||||
editorDidMount={this.setupEditor}
|
||||
options={monacoEditorOptions}
|
||||
/>
|
||||
<PreferencesContext.Consumer>
|
||||
{({ values }) => (
|
||||
console.log(values.codeEditorThemeName) || <MonacoEditor
|
||||
width={this.props.width || 600}
|
||||
height="400"
|
||||
language="javascript"
|
||||
theme={values.codeEditorThemeName}
|
||||
value={this.props.value}
|
||||
onChange={this.props.onChange}
|
||||
editorWillMount={this.setupEditorThemes}
|
||||
editorDidMount={this.setupEditorCompletions}
|
||||
options={monacoEditorOptions}
|
||||
/>
|
||||
)}
|
||||
</PreferencesContext.Consumer>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,11 +3,13 @@ import createReactContext, { type Context } from 'create-react-context';
|
||||
export type PreferencesValues = {|
|
||||
autoDownloadUpdates: boolean,
|
||||
themeName: string,
|
||||
codeEditorThemeName: string,
|
||||
|};
|
||||
|
||||
export type Preferences = {|
|
||||
values: PreferencesValues,
|
||||
setThemeName: (themeName: string) => void,
|
||||
setCodeEditorThemeName: (codeEditorThemeName: string) => void,
|
||||
setAutoDownloadUpdates: (enabled: boolean) => void,
|
||||
checkUpdates: (forceDownload?: boolean) => void,
|
||||
|};
|
||||
@@ -16,8 +18,10 @@ export const initialPreferences = {
|
||||
values: {
|
||||
autoDownloadUpdates: true,
|
||||
themeName: 'GDevelop default',
|
||||
codeEditorThemeName: 'vs-dark',
|
||||
},
|
||||
setThemeName: () => {},
|
||||
setCodeEditorThemeName: () => {},
|
||||
setAutoDownloadUpdates: () => {},
|
||||
checkUpdates: () => {},
|
||||
};
|
||||
|
||||
@@ -8,6 +8,7 @@ import Toggle from 'material-ui/Toggle';
|
||||
import Dialog from '../../UI/Dialog';
|
||||
import { Column, Line } from '../../UI/Grid';
|
||||
import { themes } from '../../UI/Theme';
|
||||
import { getAllThemes } from '../../CodeEditor/Theme';
|
||||
import Window from '../../Utils/Window';
|
||||
import PreferencesContext from './PreferencesContext';
|
||||
|
||||
@@ -39,7 +40,12 @@ export default class PreferencesDialog extends Component<Props, State> {
|
||||
title="GDevelop preferences"
|
||||
>
|
||||
<PreferencesContext.Consumer>
|
||||
{({ values, setThemeName, setAutoDownloadUpdates }) => (
|
||||
{({
|
||||
values,
|
||||
setThemeName,
|
||||
setCodeEditorThemeName,
|
||||
setAutoDownloadUpdates,
|
||||
}) => (
|
||||
<Column noMargin>
|
||||
<Line noMargin>
|
||||
<SelectField
|
||||
@@ -55,6 +61,19 @@ export default class PreferencesDialog extends Component<Props, State> {
|
||||
/>
|
||||
))}
|
||||
</SelectField>
|
||||
<SelectField
|
||||
floatingLabelText={'Code editor Theme'}
|
||||
value={values.codeEditorThemeName}
|
||||
onChange={(e, i, value) => setCodeEditorThemeName(value)}
|
||||
>
|
||||
{getAllThemes().map(codeEditorTheme => (
|
||||
<MenuItem
|
||||
value={codeEditorTheme.themeName}
|
||||
primaryText={codeEditorTheme.name}
|
||||
key={codeEditorTheme.themeName}
|
||||
/>
|
||||
))}
|
||||
</SelectField>
|
||||
</Line>
|
||||
<Line noMargin>
|
||||
<p>
|
||||
|
||||
@@ -22,6 +22,7 @@ export default class PreferencesProvider extends React.Component<Props, State> {
|
||||
state = {
|
||||
values: this._loadValuesFromLocalStorage() || initialPreferences.values,
|
||||
setThemeName: this._setThemeName.bind(this),
|
||||
setCodeEditorThemeName: this._setCodeEditorThemeName.bind(this),
|
||||
setAutoDownloadUpdates: this._setAutoDownloadUpdates.bind(this),
|
||||
checkUpdates: this._checkUpdates.bind(this),
|
||||
};
|
||||
@@ -42,6 +43,18 @@ export default class PreferencesProvider extends React.Component<Props, State> {
|
||||
);
|
||||
}
|
||||
|
||||
_setCodeEditorThemeName(codeEditorThemeName: string) {
|
||||
this.setState(
|
||||
state => ({
|
||||
values: {
|
||||
...state.values,
|
||||
codeEditorThemeName,
|
||||
},
|
||||
}),
|
||||
() => this._persistValuesToLocalStorage(this.state)
|
||||
);
|
||||
}
|
||||
|
||||
_setAutoDownloadUpdates(autoDownloadUpdates: boolean) {
|
||||
this.setState(
|
||||
state => ({
|
||||
|
||||
Reference in New Issue
Block a user