7
7

More than 5 years have passed since last update.

LightTableに自作テーマをプラグインとして導入する方法

Posted at

LightTableはWebKitベースのエディタなので、CSSを使って自作テーマを作ることができます。

プラグインとして導入するのが手っ取り早そうなのでその方法をメモしておきます。
まず、LightTableのpluginsディレクトリ内に、作成するプラグイン用の任意の名前のディレクトリを作って以下のファイルを配置します。
(plugin.ednのみ固定名で他は名前変えられます)

  • plugin.edn
  • behaviors
  • theme.css

plugin.ednでは:behaviorsには存在するファイル名を指定する必要がありますが、他は適当でも大丈夫です。(:source以外は必須)

plugin.edn
{:name "Rabbit house dark theme"
 :version "0.0.1"
 :author ""
 :source ""
 :desc ""
 :behaviors "behaviors"}

※ちなみにednはClojure版のJSONのようなものです。plugin.ednの代わりにplugin.jsonも使えるようです。

behaviorsファイルではテーマ名とCSSファイル名を以下のように指定します。

behaviors
{:+ {:app [(:lt.objs.style/provide-theme "rabbit-house-dark" "theme.css")]}}

theme.cssでテーマとなるCSSを記述します。
LightTableのcore/css/themesにあるものを参考に、テーマ名がCSSのクラス名の一部となるように設定します。

以下はlesser-darkのテーマを参考に背景画像を適用した例です。
(image.jpgも同じディレクトリに入れています)

theme.css
#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;}

lighttable.jpg

結構簡単に自作テーマを作って導入できるのでオススメです。

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7