LightTableはWebKitベースのエディタなので、CSSを使って自作テーマを作ることができます。
プラグインとして導入するのが手っ取り早そうなのでその方法をメモしておきます。
まず、LightTableのpluginsディレクトリ内に、作成するプラグイン用の任意の名前のディレクトリを作って以下のファイルを配置します。
(plugin.ednのみ固定名で他は名前変えられます)
- plugin.edn
- behaviors
- theme.css
plugin.ednでは:behaviorsには存在するファイル名を指定する必要がありますが、他は適当でも大丈夫です。(:source以外は必須)
{:name "Rabbit house dark theme"
:version "0.0.1"
:author ""
:source ""
:desc ""
:behaviors "behaviors"}
※ちなみにednはClojure版のJSONのようなものです。plugin.ednの代わりにplugin.jsonも使えるようです。
behaviorsファイルではテーマ名とCSSファイル名を以下のように指定します。
{:+ {:app [(:lt.objs.style/provide-theme "rabbit-house-dark" "theme.css")]}}
theme.cssでテーマとなるCSSを記述します。
LightTableのcore/css/themesにあるものを参考に、テーマ名がCSSのクラス名の一部となるように設定します。
以下はlesser-darkのテーマを参考に背景画像を適用した例です。
(image.jpgも同じディレクトリに入れています)
#multi.theme-rabbit-house-dark .content { background: #262626; }
#multi.theme-rabbit-house-dark .list .active, #multi.theme-rabbit-house-dark .list li:hover { background:#262626; color:#EBEFE7; }
#multi.theme-rabbit-house-dark .list .dirty { color:#599eff; }
.cm-s-rabbit-house-dark {
line-height: 1.3em;
}
.cm-s-rabbit-house-dark.CodeMirror { background: #262626; color: #EBEFE7; z-index:1; overflow:hidden; opacity: 1.0;}
.cm-s-rabbit-house-dark.CodeMirror:before{
z-index: -1;
position: absolute;
top: 0;
left: 0;
content: url("image.jpg");
-webkit-transform: scale(1.55) translate(180px,90px);
opacity: 0.045;
}
.cm-s-rabbit-house-dark div.CodeMirror-selected {background: #45443B !important; opacity: 0.4; }
.cm-s-rabbit-house-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-rabbit-house-dark.CodeMirror span.CodeMirror-matchingbracket { color: #7EFC7E; }
.cm-s-rabbit-house-dark .CodeMirror-gutters { background: #262626; border-right:1px solid #aaa; opacity: 0.2; }
.cm-s-rabbit-house-dark .CodeMirror-linenumber { color: #777; }
.cm-s-rabbit-house-dark span.cm-keyword { color: #599eff; }
.cm-s-rabbit-house-dark span.cm-atom { color: #C2B470; }
.cm-s-rabbit-house-dark span.cm-number { color: #B35E4D; }
.cm-s-rabbit-house-dark span.cm-def {color: white;}
.cm-s-rabbit-house-dark span.cm-variable { color:#D9BF8C; }
.cm-s-rabbit-house-dark span.cm-variable-2 { color: #669199; }
.cm-s-rabbit-house-dark span.cm-variable-3 { color: white; }
.cm-s-rabbit-house-dark span.cm-property {color: #92A75C;}
.cm-s-rabbit-house-dark span.cm-operator {color: #92A75C;}
.cm-s-rabbit-house-dark span.cm-comment { color: #666; }
.cm-s-rabbit-house-dark span.cm-string { color: #BCD279; }
.cm-s-rabbit-house-dark span.cm-string-2 {color: #f50;}
.cm-s-rabbit-house-dark span.cm-meta { color: #738C73; }
.cm-s-rabbit-house-dark span.cm-error { color: #9d1e15; }
.cm-s-rabbit-house-dark span.cm-qualifier {color: #888;}
.cm-s-rabbit-house-dark span.cm-builtin { color: #ff9e59; }
.cm-s-rabbit-house-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-rabbit-house-dark span.cm-tag { color: #669199; }
.cm-s-rabbit-house-dark span.cm-attribute {color: #00c;}
.cm-s-rabbit-house-dark span.cm-header {color: #a0a;}
.cm-s-rabbit-house-dark span.cm-quote {color: #090;}
.cm-s-rabbit-house-dark span.cm-hr {color: #999;}
.cm-s-rabbit-house-dark span.cm-link {color: #00c;}
.cm-s-rabbit-house-dark .CodeMirror-activeline-background {background: #3C3A3A !important; opacity: 0.4; }
.cm-s-rabbit-house-dark .CodeMirror-matchingbracket {outline:1px solid grey; color:white !important;}
結構簡単に自作テーマを作って導入できるのでオススメです。