Sublime 3 颜色主题

原理

用 ace tool 中的 tmtheme.js 生成 相应的 css 文件，然后弄上一小段 ace DOM 以后生成的代码做例子，动态改变 class（.ace-AAAAA 之流）。

ace tmtheme.js 玩法

打开终端，进入某工作目录，然后下载 ace

git clone https://github.com/ajaxorg/ace.git

注意：这个源文件里面 build 目录是空的！并不能直接用。如果你只是用 ace 的在线代码编辑器。请去 git ace-builds。

回到刚才的话题，继续。进入 ace/tool 目录，执行

npm install

会自动安装所需要的一些node模块（css-parse,css-stringify,plist等）

然后把 sublime 的 .tmTheme 文件（比如我的 /Users/david/Library/Application\ Support/Sublime\ Text\ 2/Packages/Color\ Scheme\ -\ Default ），拷贝到 tmthemes 目录中

小提示：.tmTheme 就是 textMate 的颜色文件。plist 就是 Mac 的程序配置文件。.tmTheme.cache 是 sublime 的临时文件。

修改 ace/tool/themes.js （大约第 230 行）

注释掉已有的那些，然后添加诸如

"flatland":"Flatland",
"all_hallows_eve":"All Hallow's Eve",
"amy":"Amy",
"blackboard":"Blackboard",
"cobalt":"Cobalt",
"dawn":"Dawn",
"eiffel":"Eiffel",
"espresso_libre":"Espresso Libre",
"idle":"IDLE",
"lazy":"LAZY",
"mac_classic":"Mac Classic",
"magicwb_amiga":"MagicWB (Amiga)",
"monokai_bright":"Monokai Bright",
"monokai":"Monokai",
"pastelson_dark":"Pastels on Dark",
"slush_poppies":"Slush & Poppies",
"solarized_dark":"Solarized (Dark)",
"solarized_light":"Solarized (Light)",
"spacecadet":"SpaceCadet",
"sunburst":"Sunburst",
"twilight":"Twilight",
"zenburnesque":"Zenburnesque",
"iplastic":"iPlastic"

后面是实际的文件名，前面是转换后的 css 文件名。注意：前面不要用大写、空格、中划线等。打开转换好的 css 你就明白了，css 中的伪类名称类似 .ace-aaa-bbb 这样的方式。如果用中划线会被 double 为 .ace—aaa—bbb 等。

生成的文件在 ace/lib/ace/theme 里面！注意：同时还会生成 同名的 .js 文件。这是给 ace 自己用的，用 requirejs 来动态加载 css 文件。

其它

中间从控制台拷贝的代码没有换行，用 online code beautifier 格式化为 换行缩进 的漂亮代码。