编辑器夜间模式

2020-06-15 14:41:41 +08:00 · 2020-06-15 14:41:41 +08:00 · ed40419e42
commit ed40419e42
parent 68fd076b06
8 changed files with 791 additions and 44 deletions
--- a/_server/css/editor_color.css
+++ b/_server/css/editor_color.css
@ -38,17 +38,17 @@ body {

 /** 错误消息（如保存失败） */
 .warnText {
-    color: #D50000;
+    color: #D00;
 }

 /** 提示消息（如告知当前图块信息） */
 .infoText {
-    color: #2196F3;
+    color: #39F;
 }

 /** 成功消息（如保存成功） */
 .successText {
-    color: #00897B;
+    color: #098;
 }

 /** 数据库的表格相关 */
@ -64,22 +64,22 @@ table, td {

 /** 横向标尺背景色 */
 table.col td, div.col .coltd {
-    background-color: #4DB6AC;
+    background-color: #398;
 }

 /** 横向标尺选中时的背景色 */
 #mapColMark td:hover .colBlock, #mapColMark .coltd:hover .colBlock {
-    background-color: rgba(38, 166, 154, .5);
+    background-color: rgba(85, 204, 187, 0.5);
 }

 /** 纵向标尺背景色 */
 table.row td, div.row .rowtd .rowtext {
-    background-color: #4C221B;
+    background-color: #379;
 }

 /** 纵向标尺选中时的背景色 */
 #mapRowMark td:hover .rowBlock, #mapRowMark .rowtd:hover .rowBlock {
-    background-color: rgba(76, 34, 27, .5);
+    background-color: rgba(102, 170, 204, 0.5);
 }

 /** 右键菜单栏 */
@ -95,8 +95,8 @@ table.row td, div.row .rowtd .rowtext {

 /** 右键菜单栏的当前选中项 */
 #midMenu .menuitem:hover{
-    background-color: #d6e9f8;
-    border-color: #d6e9f8;
+    background-color: #cef;
+    border-color: #bde;
 }

 /** 禁用的输入方框（如ID）的背景色 */
@ -106,12 +106,12 @@ textarea[disabled] {

 /** 搜索事件块的输入框 */
 #searchBlock {
-    background-color: #E9EBF2;
+    background-color: #eeeef4;
 }

 /** 打开浮层（变量搜索等）时页面背景 */
 #uieventDiv {
-    background: rgba(127,127,127,0.6);
+    background: rgba(128,128,128,0.6);
 }

 /** 浮层的对话框 */
@ -156,15 +156,15 @@ textarea[disabled] {
 /** 数据区每行效果；2n代表偶数行，以此类推 */
 .etable table tr {
    background-color: #fff;
-    border-top: 1px solid #c6cbd1;
+    border-top: 1px solid #ccccd4;
 }
 .etable table tr:nth-child(2n) {
-    background-color: #f6f8fa;
+    background-color: #fafafa;
 }

 /** 数据区表格每列效果 */
 .etable table th, .etable table td {
-    border: 1px solid #dfe2e5;
+    border: 1px solid #ddd;
 }

 /** 鼠标悬停在数据区表格上的边框效果 */
@ -209,6 +209,31 @@ blockly图块的的黑暗程度，用opacity表示，0到1之间；
 #blocklyDarkScale {
    opacity: 0;
 }
+/*魔改*/
+
+.blocklyTreeLabel {
+    color: #0f0f0f !important;
+}
+
+.blocklyTreeLabel:hover {
+    /*background-color: #888 !important;*/
+    color: #0f0f0f !important;
+}
+
+.blocklyTreeSelected {
+    background-color: #5bf !important;
+    color: #fff !important;
+}
+
+.blocklyTreeRow {
+    color: #0f0f0f !important;
+}
+
+.blocklyTreeRow:hover {
+    background-color: #eee !important;
+    color: #0f0f0f !important;
+}
+/*魔改*/

 /** 如果需要blockly深色模式，请有选择性视情况取消注释下面几条；具体功能自行研究 */
 /*
@ -248,21 +273,22 @@ input.blocklyHtmlInput {
    background: white;
 }
 .awesomplete > ul > li:hover {
-    background: hsl(200, 40%, 80%);
+    background: #cef/*hsl(200, 40%, 80%)*/;
    color: black;
 }
 .awesomplete > ul > li[aria-selected="true"] {
-    background: hsl(205, 40%, 40%);
+    background: #39f/*hsl(205, 40%, 40%)*/;
    color: white;
 }
 .awesomplete mark {
-    background: hsl(65, 100%, 50%);
+    background: #cef;
 }
 .awesomplete li:hover mark {
-    background: hsl(68, 100%, 41%);
+    background: #39f;
+    color: white;
 }
 .awesomplete li[aria-selected="true"] mark {
-    background: hsl(86, 100%, 21%);
+    background: #06c;
    color: inherit;
 }

@ -322,13 +348,13 @@ input.blocklyHtmlInput {
    color: #292;
 }
 .cm-s-default .cm-keyword {
-    color: #708;
+    color: #819;
 }
 .cm-s-default .cm-atom {
    color: #219;
 }
 .cm-s-default .cm-number {
-    color: #164;
+    color: #275;
 }
 .cm-s-default .cm-def {
    color: #00f;
@ -340,7 +366,7 @@ input.blocklyHtmlInput {
    color: #085;
 }
 .cm-s-default .cm-comment {
-    color: #a50;
+    color: #960;
 }
 .cm-s-default .cm-string {
    color: #a11;
--- a/_server/css/editor_color_dark.css
+++ b/_server/css/editor_color_dark.css
@ -0,0 +1,688 @@
+/** 配色文件：此文件包含了整个编辑器的全部配色 **/
+
+/** ======== 编辑器主界面相关 ======== **/
+
+/** 全局属性 **/
+body {
+    background-color: #242424;
+	color: #bbb;
+}
+
+input {
+    background-color: #404048;
+    color: #c0c0c0;
+}
+
+button {
+    background-color: #404048;
+	border-color: #aaa;
+    color: #c0c0c0;
+}
+
+/** 可自行仿照添加更多的全局属性...... */
+
+/** 颜色选择器 */ 
+#colorPanel {
+    background-color: #333;
+}
+
+/** 所有的阴影效果（颜色选择器、数据区、地图区、素材区等） */
+#colorPanel, #left, #mid, #mid2, #right, .leftTab {
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+}
+
+/** 地图编辑的输入框 */
+#pout {
+    border: 1px solid #ddd;
+}
+
+/** 中间的消息提示框 */
+#tip {
+    border: 1px solid #ccc;
+}
+
+/** 选中素材区时的方框 */
+#dataSelection, .appendSelection, #selectPointBox {
+    background-color: rgba(255, 255, 255, 0.0);
+    border: 1px solid #aaa;
+    box-shadow: 0 0 0 2px #ddd, 0 0 0 3px #aaa;
+}
+
+/** 错误消息（如保存失败） */
+.warnText {
+    color: #e44;
+}
+
+/** 提示消息（如告知当前图块信息） */
+.infoText {
+    color: #7bd;
+}
+
+/** 成功消息（如保存成功） */
+.successText {
+    color: #8ca;
+}
+
+/** 数据库的表格相关 */
+table, td {
+    border: 1px solid #777;
+    color: #777;
+}
+
+.coltd, .rowtd {
+    border: 0.230vw solid #777;
+    color: #777;
+}
+
+/** 横向标尺背景色 */
+table.col td, div.col .coltd {
+    background-color: #287;
+	border-color: #ccc;
+	color: #ccc;
+}
+
+/** 横向标尺选中时的背景色 */
+#mapColMark td:hover .colBlock, #mapColMark .coltd:hover .colBlock {
+    background-color: rgba(68, 187, 170, 0.33);
+}
+
+/** 纵向标尺背景色 */
+table.row td, div.row .rowtd .rowtext {
+    background-color: #268;
+	border-color: #ccc;
+	color: #ccc;
+}
+
+/** 纵向标尺选中时的背景色 */
+#mapRowMark td:hover .rowBlock, #mapRowMark .rowtd:hover .rowBlock {
+    background-color: rgba(85, 153, 187, 0.33);
+}
+
+/** 右键菜单栏 */
+#midMenu{
+    color: #bbb;/*文字颜色*/
+    background-color: #33333c;
+    border-color: #888 #666 #666 #888;
+}
+
+#mid .tools {
+    border-top: 1px solid #555;
+}
+
+/** 右键菜单栏的当前选中项 */
+#midMenu .menuitem:hover{
+    background-color: #247;
+    border-color: #469;
+    color: #fff;
+}
+
+/*===============================自己加的东西======================================*/
+select {
+	background-color: #33333c;
+}
+
+option {
+	background-color: #33333c;
+}
+
+a {
+   color: #7bd;
+}
+
+textarea {
+   color: #bbb;
+}
+
+::-webkit-scrollbar-track
+{
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	border-radius: 8px;
+	background-color: #242424;
+}
+
+::-webkit-scrollbar
+{
+	width: 8px;
+	background-color: #242424;
+}
+
+::-webkit-scrollbar-thumb
+{
+	border-radius: 8px;
+    -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);
+    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+	background-color: #bbb;
+}
+
+
+/** 禁用的输入方框（如ID）的背景色 */
+textarea[disabled] {
+    color: #888;
+}
+
+select {
+   color: #ccc;
+   background-color: #33333c;
+}
+
+.gameCanvas, img {
+    filter: brightness(0.75);
+}
+
+/** 搜索事件块的输入框 */
+#searchBlock {
+    background-color: #bbb;
+	color: #444;
+}
+
+/** 打开浮层（变量搜索等）时页面背景 */
+#uieventDiv {
+    background: rgba(85,85,85,0.67);
+}
+
+/** 浮层的对话框 */
+#uieventDialog {
+    background: #101010;
+	color: #ccc;
+}
+
+/** 追加素材时的编号标记 */
+#appendPicSelection span {
+    -webkit-text-stroke: 1px gold;
+    text-shadow: black 1px 0, black 0 1px, black -1px 0, black 0 -1px;
+}
+
+.leftTab {
+    background-color: #242424;
+}
+
+/** 整个事件编辑器 */
+#left6 {
+    background-color: rgb(36, 36, 36);
+}
+
+/** 事件编辑器右边的文本框 */
+#left6 .CodeMirror {
+    /*border: 1px solid #eee;*/
+	border: 1px solid #666;
+	background-color: #242424;
+	/*color: #ccc;*/
+}
+
+/** 脚本编辑器 */
+#left7 {
+    background-color: rgb(36, 36, 36);
+}
+
+#left7 .CodeMirror {
+	border: 1px solid #666;
+	
+}
+
+/** 数据区的表格 */
+.etable table, .etable table td {
+    color: #bbb;
+}
+
+/** 数据区每行效果；2n代表偶数行，以此类推 */
+.etable table tr {
+    background-color: #3c3c3c;
+    border-top: 1px solid #ccccd4;
+}
+.etable table tr:nth-child(2n) {
+    background-color: #343434;
+}
+
+/** 数据区表格每列效果 */
+.etable table th, .etable table td {
+    border: 1px solid #777;
+}
+
+/** 鼠标悬停在数据区表格上的边框效果 */
+.etable tr:not(:first-child) > :nth-child(3):hover {
+    border: 1px solid #468;
+    box-shadow: 0px 0px 3px #468;
+}
+.etable tr:not(:first-child) > :nth-child(2):hover,
+.etable tr:not(:first-child) > :nth-child(1):hover {
+    border: 1px solid #375;
+    box-shadow: 0px 0px 3px #375;
+}
+
+/** 表格编辑的按钮颜色 */
+.editorTableEditBtn {
+    background-color: #389;
+	border-color: #bde;/*8cf和fd8*/
+	color: #cef;
+}
+.editorTableFoldBtn {
+    background-color: #a83;
+	border-color: #edb;	
+	color: #fec;
+	}
+
+/** 保存地图的按钮颜色 */
+#saveFloor {
+    background-color: #234;/*33333c*/
+	border-color: #abc;
+	color: #cdf;
+}
+#saveFloor.highlight {
+    background-color: #871;
+	border-color: #eda;
+	color: #fff4d0;
+}
+
+/** 解析按钮颜色 */
+#blocklyParse {
+    background-color: #404048;
+	/*background-color: #234;
+	border-color: #abc;*/
+	color: #c0c0c0;
+}
+#blocklyParse.highlight {
+    background-color: #871;
+	border-color: #eda;
+	color: #fff4d0;
+}
+
+.popCheckboxItem {
+    color: #bbbbbb;
+}
+
+/** ======== blockly 相关 ======== */
+
+/** 
+blockly图块的的黑暗程度，用opacity表示，0到1之间；
+0表示表示纯亮色，1表示纯黑色 
+*/
+
+
+#blocklyDarkScale {
+    opacity: 0.3;
+}
+
+/** 如果需要blockly深色模式，请有选择性视情况取消注释下面几条；具体功能自行研究 */
+
+/*somethingSOMETHING*/
+/*.blocklyTreeLabel {
+    color: #ccc;
+}*/
+
+.blocklyTreeLabel:hover {
+    /*background-color: #888 !important;*/
+    color: #fff !important;
+}
+
+.blocklyTreeSelected {
+    background-color: #358 !important;
+    color: #fff !important;
+}
+
+/*.blocklyTreeSelected .blocklyTreeLabel {
+    background-color: #358 !important;
+    background: #358 !important;
+    color: #fff !important;
+ }*/
+
+ .blocklyTreeRow {
+    /*background-color: #888 !important;*/
+    color: #ccc !important;
+}
+
+.blocklyTreeRow:hover {
+    background-color: #888 !important;
+    color: #fff !important;
+}
+
+/*
+.blocklyFlyout {
+     background-color: rgba(0,0,0,1);
+}
+*/
+.blocklyFlyoutBackground {
+    fill: #666;
+    fill-opacity: 0.67;
+}
+/*somethingSOMETHING*/
+
+
+.blocklyToolboxDiv {
+    background-color: #2a2a2a !important;
+	border: 1px solid #666;
+    color: black;
+}
+
+.blocklySvg {
+    background-color: #242424;
+}
+
+.blocklyNonEditableText>rect, .blocklyEditableText>rect {
+    fill: #000;
+    fill-opacity: .3;
+}
+
+.blocklyNonEditableText>text, .blocklyEditableText>text {
+    fill: #fff;
+}
+
+input.blocklyHtmlInput {
+    color: white;
+    background-color: black;
+}
+
+
+/** ======== Blockly中自动补全相关 ======== */
+.awesomplete > ul {
+    background: #33333c;
+    /*background: hsla(0,0%,100%,.9);
+    background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.8));*/
+    border: 1px solid rgba(0,0,0,.3);
+	border-color: #666;
+    box-shadow: .05em .2em .6em rgba(0,0,0,.2);
+}
+.awesomplete > ul:before {
+    background: white;
+}
+.awesomplete > ul > li:hover {
+    background: #247/*hsl(200, 40%, 80%)*/;
+    color: #fff;
+}
+.awesomplete > ul > li[aria-selected="true"] {
+    background: hsl(205, 40%, 40%);
+    color: white;
+}
+.awesomplete mark {
+    background: /*hsl(65, 100%, 50%);*/#278;
+	color: #cef;
+}
+.awesomplete li:hover mark {
+    background: /*hsl(68, 100%, 41%)*/#1a9;
+	color: #fff;
+}
+.awesomplete li[aria-selected="true"] mark {
+    background: /*hsl(86, 100%, 21%)*/#468;
+    color: inherit;
+}
+
+/** ======== 脚本编辑相关 ======== **/
+/* 很多我也不知道是干嘛的，自行根据名字猜每一项作用吧 */
+
+.CodeMirror {
+    color: #ddd;/*杨子默：我也不知道他是干啥用的*/
+    background: #242424;
+}
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+    background-color: #242424; 
+}
+.CodeMirror-gutters {
+    border-right: 1px solid #666;
+    background-color: #2a2a2a;
+}
+.CodeMirror-linenumber {
+    color: #999;
+}
+.CodeMirror-guttermarker {
+    color: black;
+}
+.CodeMirror-guttermarker-subtle {
+    color: #999;
+}
+.CodeMirror-cursor {
+    border-left: 1px solid black;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+    border-left: 1px solid silver;
+}
+.cm-fat-cursor .CodeMirror-cursor {
+    background: #7e7;
+}
+.cm-fat-cursor-mark {
+  background-color: rgba(20, 255, 20, 0.5);
+}
+.cm-animate-fat-cursor {
+    background-color: #7e7;
+}
+.CodeMirror-ruler {
+  border-left: 1px solid #ccc;
+}
+/* DEFAULT THEME */
+.cm-s-default .cm-header {
+    color: #a8f;
+}  
+.cm-s-default .cm-quote {
+    color: #695;
+} 
+.cm-negative {
+    color: #f55;
+} 
+.cm-positive {
+    color: #5f5;
+}
+.cm-s-default .cm-keyword {
+    color: #d7a;
+}
+.cm-s-default .cm-atom {
+    color: #db7;
+}
+.cm-s-default .cm-number {
+    color: #9db;
+}
+.cm-s-default .cm-def {
+    color: #db7; 
+}
+.cm-s-default .cm-variable-2 {
+    color: #8cd;
+}
+.cm-s-default .cm-variable-3, .cm-s-default .cm-type {
+    color: #8cd;
+}
+.cm-s-default .cm-comment {
+    color: #7a6;
+}
+.cm-s-default .cm-string {
+    color: #db7;
+}
+.cm-s-default .cm-string-2 {
+    color: #db7/*something?*/;
+}
+.cm-s-default .cm-meta {
+    color: #33333c;
+}
+.cm-s-default .cm-qualifier {
+    color: #33333c;
+}
+.cm-s-default .cm-builtin {
+    color: #66d9ef;
+}
+.cm-s-default .cm-bracket {
+    color: #f8f8f2;
+}
+.cm-s-default .cm-tag {
+    color: #f55;
+}
+.cm-s-default .cm-attribute {
+    color: #ab6;
+}
+.cm-s-default .cm-hr {
+    color: #999;
+}
+.cm-s-default .cm-link {
+    color: #a8f;
+}
+.cm-s-default .cm-error {
+	background: #f55;
+	color: #fff;
+}
+/*somethingsomething*/
+.cm-s-default .cm-matchhighlight {
+    background: #57a;
+    color: #eef8ff;
+}
+/*somethingsomething*/
+.cm-invalidchar {
+    color: #f55;
+}
+
+/* Default styles for common addons */
+
+div.CodeMirror span.CodeMirror-matchingbracket {
+    color: #5f5;
+}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {
+    color: #f55;
+}
+.CodeMirror-matchingtag {
+    background: rgba(255, 150, 0, .3);
+}
+.CodeMirror-activeline-background {
+    background: #247;
+}
+
+.CodeMirror-selected {
+    background: #358;
+}
+.CodeMirror-focused .CodeMirror-selected {
+    background: #358;
+}
+.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
+    background: #247;
+}
+.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
+    background: #247;
+}
+.cm-searching {
+    background-color: #ffa;
+    background-color: rgba(255, 255, 0, .4);
+}
+
+/* 代码补全提示相关 */
+
+.cm-matchhighlight {
+    background-color: #247;
+}
+.CodeMirror-hints {
+    border: 1px solid #888;
+    background: #33333c;
+    -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+    -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+    box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+}
+.CodeMirror-hint {
+    color: #ccc;
+}
+li.CodeMirror-hint-active {
+    background: #247;
+    color: #fff;
+}
+
+/* 代码语法检查相关相关 */
+
+.CodeMirror-lint-tooltip {
+    background-color: #247;
+    border: 1px solid #135;
+    color: #fff;
+}
+
+.CodeMirror-lint-mark-error {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
+}
+
+.CodeMirror-lint-mark-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
+}
+
+.CodeMirror-lint-marker-multiple {
+    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
+}
+
+/* 代码补全的对话框（提供搜索功能）相关 */
+
+.CodeMirror-dialog-top {
+    border-bottom: 1px solid #eee;
+}
+  
+.CodeMirror-dialog-bottom {
+    border-top: 1px solid #eee;
+}
+
+/* 搜索项的背景色 */
+.CodeMirror-focused .cm-matchhighlight {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
+    background-position: bottom;
+    background-repeat: repeat-x;
+}
+.cm-matchhighlight {background-color: lightgreen}
+.CodeMirror-selection-highlight-scrollbar {background-color: yellowgreen}
+
+.CodeMirror-search-hint {
+    color: #888;
+}
+
+
+/* 增强的代码补全系统相关 */
+
+/* 变量类型 */
+.CodeMirror-Tern-completion:before {
+    color: white;
+}
+.CodeMirror-Tern-completion-unknown:before {
+  content: "?";
+  background: #4bb;
+}
+.CodeMirror-Tern-completion-object:before {
+  content: "O";
+  background: #77c;
+}
+.CodeMirror-Tern-completion-fn:before {
+  content: "F";
+  background: #7c7;
+}
+.CodeMirror-Tern-completion-array:before {
+  content: "A";
+  background: #c66;
+}
+.CodeMirror-Tern-completion-number:before {
+  content: "1";
+  background: #999;
+}
+.CodeMirror-Tern-completion-string:before {
+  content: "S";
+  background: #999;
+}
+.CodeMirror-Tern-completion-bool:before {
+  content: "B";
+  background: #999;
+}
+
+.CodeMirror-Tern-completion-guess {
+    color: #999;
+}
+/* 额外提示框（如文档） */
+.CodeMirror-Tern-tooltip {
+    border: 1px solid silver;
+    color: #33333c;
+    background-color: white;
+    -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+    -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+    box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+}
+
+.CodeMirror-Tern-fname { color: black; }
+.CodeMirror-Tern-farg { color: #70a; }
+.CodeMirror-Tern-type { color: #07c; }
+.CodeMirror-foldmarker {
+    color: blue;
+    text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
+}  
+
--- a/_server/editor.js
+++ b/_server/editor.js
@ -54,6 +54,7 @@ function editor() {
        lockMode: document.getElementById('lockMode'),
        gameInject: document.getElementById('gameInject'),
        undoFloor: document.getElementById('undoFloor'),
+        editorTheme: document.getElementById('editorTheme'),
        maps: ['bgmap', 'fgmap', 'map'],
        canvas: ['bg', 'fg'],
    };
@ -185,20 +186,17 @@ editor.prototype.init = function (callback) {
            main.useCompress = false;
        
            main.init('editor', function () {
-                editor.config = new editor_config();
-                editor.config.load(function() {
-                    editor_util_wrapper(editor);
-                    editor_game_wrapper(editor, main, core);
-                    editor_file_wrapper(editor);
-                    editor_table_wrapper(editor);
-                    editor_ui_wrapper(editor);
-                    editor_mappanel_wrapper(editor);
-                    editor_datapanel_wrapper(editor);
-                    editor_materialpanel_wrapper(editor);
-                    editor_listen_wrapper(editor);
-                    editor.printe=printe;
-                    afterMainInit();
-                })
+                editor_util_wrapper(editor);
+                editor_game_wrapper(editor, main, core);
+                editor_file_wrapper(editor);
+                editor_table_wrapper(editor);
+                editor_ui_wrapper(editor);
+                editor_mappanel_wrapper(editor);
+                editor_datapanel_wrapper(editor);
+                editor_materialpanel_wrapper(editor);
+                editor_listen_wrapper(editor);
+                editor.printe=printe;
+                afterMainInit();
            });
        
            var afterMainInit = function () {
@ -279,7 +277,14 @@ editor.prototype.init = function (callback) {
    xhr.onabort = xhr.ontimeout = xhr.onerror = function () {
        alert("无法访问index.html");
    }
-    xhr.send();
+
+    editor.config = new editor_config();
+    editor.config.load(function() {
+        var theme = editor.config.get('theme', 'editor_color');
+        document.getElementById('color_css').href = '_server/css/' + theme + '.css';
+        editor.dom.editorTheme.value = theme;
+        xhr.send();
+    });
 }

 editor.prototype.mapInit = function () {
--- a/_server/editor_blockly.js
+++ b/_server/editor_blockly.js
@ -689,8 +689,14 @@ editor_blockly = function () {

    editor_blockly.completeItems = [];

+    Blockly.BlockSvg.prototype.updateColour_origin = Blockly.BlockSvg.prototype.updateColour;
+    Blockly.BlockSvg.prototype.setShadowColour__origin = Blockly.BlockSvg.prototype.setShadowColour_;
+    Blockly.BlockSvg.prototype.setBorderColour__origin = Blockly.BlockSvg.prototype.setBorderColour_;
+
+    editor_blockly.setDarkScale=function () {
+        var computedStyle = window.getComputedStyle(document.getElementById('blocklyDarkScale')) || {};
+        var globalScale = parseFloat(computedStyle.opacity) || 0;

-    editor_blockly.setDarkScale=function (globalScale) {
        if (globalScale > 0) {
            Blockly.BlockSvg.prototype.updateColour = function() {
                if (this.disabled) {
@ -753,11 +759,14 @@ editor_blockly = function () {
                }
                
            }
+        } else {
+            Blockly.BlockSvg.prototype.updateColour = Blockly.BlockSvg.prototype.updateColour_origin;
+            Blockly.BlockSvg.prototype.setShadowColour_ = Blockly.BlockSvg.prototype.setShadowColour__origin;
+            Blockly.BlockSvg.prototype.setBorderColour_ = Blockly.BlockSvg.prototype.setBorderColour__origin;
        }
    }

-    var computedStyle = window.getComputedStyle(document.getElementById('blocklyDarkScale')) || {};
-    editor_blockly.setDarkScale(parseFloat(computedStyle.opacity) || 0);
+    editor_blockly.setDarkScale();

    return editor_blockly;
 }
--- a/_server/editor_listen.js
+++ b/_server/editor_listen.js
@ -36,6 +36,7 @@ editor_listen_wrapper = function (editor) {
        editor.dom.clearEvent.onmouseup = editor.uifunctions.clearEvent_click
        editor.dom.clearLoc.onmouseup = editor.uifunctions.clearLoc_click
        editor.dom.undoFloor.onclick = editor.uifunctions.undoFloor_click
+        editor.dom.editorTheme.onchange = editor.uifunctions.editorTheme_onchange

        editor.dom.lastUsed.onmouseup = editor.uifunctions.lastUsed_click;
        editor.dom.lastUsed.oncontextmenu = function (e) { e.preventDefault(); }
--- a/_server/editor_mappanel.js
+++ b/_server/editor_mappanel.js
@ -392,6 +392,16 @@ editor_mappanel_wrapper = function (editor) {
        editor.changeFloor(toId);
    }

+    editor.uifunctions.editorTheme_onchange = function () {
+        var theme = editor.dom.editorTheme.value;
+        editor.config.set('theme', theme);
+        document.getElementById('color_css').href = '_server/css/' + theme + '.css';
+        // 等新的css加载完毕再设置blockly亮度
+        setTimeout(function () {
+            editor_blockly.setDarkScale();
+        }, 1500);
+    }
+
    /**
     * 显示右键菜单
     */
--- a/editor-mobile.html
+++ b/editor-mobile.html
@ -6,7 +6,7 @@
    <link href="_server/css/editor_mobile.css" rel="stylesheet">
    <link href="_server/CodeMirror/codemirror.css" rel="stylesheet">
    <link href="_server/thirdparty/awesomplete.css" rel="stylesheet">
-    <link href="_server/css/editor_color.css" rel="stylesheet">
+    <link id="color_css" rel="stylesheet">
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
 </head>
 <body>
@ -355,7 +355,11 @@
                    <option value="commonevent">公共事件</option>
                    <option value="plugins">插件编写</option>
                </select>
-                <span style="font-size: 12px"><input type="checkbox" id="lockMode"/>锁定模式</span>
+                <span style="font-size: 12px"><input type="checkbox" id="lockMode"/>锁定</span>
+                <select id="editorTheme">
+                    <option value="editor_color">默认白</option>
+                    <option value="editor_color_dark">夜间黑</option>
+                </select>
                <select id="brushMod" style="clear:right">
                    <option value="line">画线</option>
                    <option value="rectangle">画矩形</option>
--- a/editor.html
+++ b/editor.html
@ -5,7 +5,7 @@
    <link href="_server/css/editor.css" rel="stylesheet">
    <link href="_server/CodeMirror/codemirror.css" rel="stylesheet">
    <link href="_server/thirdparty/awesomplete.css" rel="stylesheet">
-    <link href="_server/css/editor_color.css" rel="stylesheet">
+    <link id="color_css" rel="stylesheet">
    <link rel="icon" href="data:;base64,iVBORw0KGgo=">
 </head>
 <body>
@ -314,7 +314,11 @@
                <option value="commonevent">公共事件</option>
                <option value="plugins">插件编写</option>
            </select>
-            <span style="font-size: 12px"><input type="checkbox" id="lockMode"/>锁定模式</span>
+            <span style="font-size: 12px"><input type="checkbox" id="lockMode"/>锁定</span>
+            <select id="editorTheme" style="margin-left: 3px;">
+                <option value="editor_color">默认白</option>
+                <option value="editor_color_dark">夜间黑</option>
+            </select>
            <br/>
            <span style="font-size: 12px;">
            <input type="radio" id="brushMod" name="brushMod" value="line" checked="checked" />线