Bracketsテーマの配色をカスタマイズする方法
BracketsをDreamweaverの代替HTMLエディタとして使い込んでいますが、カスタマイズが自由なわりに日本語の情報があまり存在しないので苦労しています。
まずは見た目重視！という事でテーマファイルのカスタマイズで色を自由に変更する方法を調べました。
1. テーマのインストール
標準のテーマはカスタマイズできないので、適当なテーマをインストールします。今回は「Spacegray-Brackets」をインストールしました。
2. theme.lessファイルを開く
「ヘルプ」→「拡張機能のフォルダーを開く」→「user」→「alexpersian.spacegray-brackets」→「theme.less」を開きます。
※alexpersian.spacegray-brackets が今回のテーマファイルです。
3. CSSの編集
Bracketsのテーマの設定はすべてCSSで記述されているので変更は簡単なのですが、どのクラスセレクターを変更すると、エディタのどこの色が変わるのか分かりません。初めは探り探りでした…が。
Dreamweaver CC 2017 のコードカラーリングについて
https://helpx.adobe.com/jp/dreamweaver/using/customize-code-coloring.html
最近のDreamweaverは、Bracketsベースで作られているようで、こちらのマニュアルが参考になりました。以下が応用した内容です。
@background: #000040;
@foreground: #FFFFFF;
@nazo: #00FFFF;
/* ■HTML: ＆nbsp;などのエンティティ名 ■PHP:True、False、Nullおよびマジック定数（__LINE__、__DIR__ など） */
.cm-atom {color: #FF0000;}
/* ■HTML:属性値 ■PHP:リテラル文字列 */
.cm-string {color: #FF8000;}
.cm-string-2 {color: @nazo;}
.cm-hr {color: @nazo;}
/* ■HTML:--- ■PHP:任意の数（12、2.1、0x11、0b11、0123、5.0E+19 など） */
.cm-number {color: #FFFF00;}
/* ■HTML:属性名 ■PHP:--- */
.cm-attribute {color: #89AEFC;}
.cm-plus {color: @nazo;}
/* ■HTML:--- ■PHP:関数定義の関数名 */
.cm-def {color: @foreground;}
/* ■HTML:--- ■PHP:ユーザー定義関数名、インターフェイス／クラス参照、クラスプロパティ、キャスト */
.cm-variable {color: @foreground !important;}
/* ■HTML:カスタムプロパティ ■PHP:ユーザー定義および定義済みの変数、パラメーターまたは属性 */
.cm-variable-2 {color: #89AEFC ;}
/* ■HTML:<!DOCTYPE> 宣言 ■PHP:<!DOCTYPE> 宣言および PHP 開始タグと終了タグ（<?php、?>） */
.cm-meta {color: #33FF00;}
/* ■HTML:--- ■PHP:演算子（===、&&、!、=>、+、- など） */
.cm-operator {color: @foreground;}
/* ■HTML:タグのカッコ（<、>、/>、</ など） ■PHP:--- */
.cm-bracket {color: @foreground !important;}
/* ■HTML:コメント ■PHP:コメント */
.cm-comment {color: #FF80FF;}
/* ■HTML:開始タグのない終了タグ 引用符のない属性値 ■PHP:--- */
.cm-error {background: rgba(207, 59, 60, 0.2); color: #cf3b3c;}
.cm-minus {background: rgba(207, 59, 60, 0.2); color: @nazo;}
.cm-header {color: @nazo;}
.cm-link {color: @nazo; text-decoration: none;}
.cm-rangeinfo {color: @nazo;}
/* ■HTML:--- ■PHP:組み込み関数（htmlspecialchars、trim、substr など） */
.cm-builtin {color: #FF0000;}
.cm-quote {color: @nazo;}
/* ■CSS:クラスセレクター */
.cm-qualifier {color: #B0C4DE;}
/* ■HTML:--- ■PHP:キーワード（function、if、else、new、echo、isset など） */
.cm-keyword {color: #FF0000;}
/* ■HTML:タグ名 ■PHP:--- */
.cm-tag {color: @foreground;}
/* ■CSS:疑似クラス（:hover、:focus など）および疑似エレメント（::first-letter、::selection など） */
.cm-variable-3 {color: #FF7F50;}
/* ■CSS:プロパティ名 */
.cm-property {color: #90EE90;}※HTML/CSS/PHP 以外ではBracketsを使っていないので他の言語は考慮していません。
※@nazo という部分は今のところ使っていない配色設定です。今後エディタ上に現れたら更新していきます。
