読者です 読者をやめる 読者になる 読者になる

たいちょーの雑記

ぼくが3日に一度くらい雑記をかくところ

VSCodeのテーマを作ってワクワクしよう

Visual Studio Code

VSCodeのテーマを作ってワクワクしよう

皆さんVSCode使ってますか
ぼくはWindowsで適当になんか書くときはVSCodeのバッファ補完が嬉しすぎてつい使ってしまいます。

テーマも多くあり、気分でサクッと配色を変えれるのもいいところですが、
ぼくのような Customize大好き で、めんどくさい拘る人たちは
「あーん ここはこの色が良いんだよなー」
と永遠にテーマ選びが終わらないなんて言うのはどのエディタでも同じことです。

でも大丈夫

ないなら作ればいいのよ by 隊長

つまり記事タイ通りです。
VSCodeのテーマはあっちゅーまに完成します。
と言ってもめんどくさい拘る人たちは無限に終わらないんですが

まずはイメージを練る

己がつくるので己の思う通りの配色が出来ますが
何も考えずに作ると何を何色にしたらいいかわかんなくなるのでざっくり妄想します( ˘ω˘ )

( ˘ω˘ ). 。o O (Azuh っぽいのがいいな・・・)

Azuh

Azuhはぼくがせっせこ作ったどうしようもないゲームのキャラクターです

よっしゃ

tmThemeEditorで納得のいく配色をきめる

theme Editor
tmTheme Editor

tmThemeという形式があります。
こいつをVSCodeにぽーんと放り投げてやれば、どーんと色が変わります。
最初はMonokaiというテーマの配色が出てると思います。

ここから好きな色で配色していきます。
まずはテーマの名前をいじります。
theme3

次は全体の設定を決めます。Monokaiの場合はこれだけありますね。
theme4

名前 意味
background 背景色
caret カーソルのちかちかしてるやつ
foreground テキスト全体の色
invisible なにこれ
lineHighlight 選択行の色
selection 選択した時の色

好きなようにして

次はテキストの色を決めていきます。
テキストは スコープ というもので分類されてます。
様々なエディタがシンタックスハイライトとかをどうしてるかっていうと、そのテキストがどのスコープに属してるかを見てるんですね(予想)
なのでどのスコープなのかをチェックしないとなんですが

theme5
これを使うとそのテキストがどのスコープなのかわかります。
これをONにしたまま、チェックしたいテキストをクリックすると下に表示されます。
Current Scopeの欄がそうですね。
こいつらをどんどん左の欄に追加していって色を指定するんです。

でも

めんどい

なのでMonokaiがもともと定義していたやつをサクッと変えます。
theme6
Scopesのタブにたくさん色があります。
色と名前から大体どのテキストを指定しているかわかるので、どんどん変えます。

どんどん

どんどんどん

あれ?

Azuhって色結構すくねぇな・・・
theme7

まぁ色が多すぎても見にくいだけなのでいいでしょう。

それでガリガリ色を付けたのがこれ
theme8
オレオレテーマなので誰にも文句を言われない言わせない。

終わったらDownloadしておきます。大切大切。

あと、作業している間はこまめにSaveすることをお勧めします。
Webなので戻るボタンが誤爆した時、天に召されますよ。(経験済)

VSCodeに作ったテーマを放り込む

ドラックアンドドロップしちゃだめです。
まずは、VSCodeのインストールディレクトリ以下resources/app/extentions/から適当なテーマをディレクトリごとUser以下の.vscode/extentions/にコピーします。
テーマの入っているディレクトリはtheme-〇〇みたいな形式になってるかと。
コピーしたら コピーしたディレクトリの名前theme-azuhのように好きなように変更しときましょう。

次に.vscode/extentions/theme-azuhにあるthemeフォルダの中身を デリート して、さっき作ったthThemeを放り込みます。
そして.vscode/extentions/theme-azuhにあるpackage.jsonを編集します。

みんなだいすきJSON

{
    "name": "azuh-theme",
    "version": "0.1.0",
    "publisher": "vscode",
    "engines": { "vscode": "*" },
    "contributes": {
        "themes": [
            {
                "label": "Azuh theme",
                "uiTheme": "vs-dark",
                "path": "./themes/Azuh_theme.tmTheme"
            }
        ]
    }
}

だいたいこんな感じになっていると思います。

タグ 意味
name なんかの名前CSSでクラス名の一部に使われたりする
label このテーマの名前
uiTheme vsなら白vs-darkなら黒
path tmThemeファイルまでのパス。間違えたら死ぬ

あとは分からん。

はいおわり。

あとは適用するだけ

theme9
ええやん!

背景画像を置く


CSSをいじれば背景画像を置くことが出来ます。

色んなディレクトリを行ったり来たりしないとダメだし
位置調整とかCSSのことわかってないと書けないし(わかってないから無理)
壊れるほどbackground-position弄っても1/3も動かないし
[サポート対象外]とかいうラベルもついちゃうし踏んだり蹴ったりになる(なった)

なので半ばないだろうと思いつつ 「backgroud」拡張機能検索したら。

theme10

あった

しかも
theme11
三枚まで置ける!?

VSCodeのエディタは三つまで分割できますが
どうやらこの拡張機能三つそれぞれに別の画像を置けるみたいですね・・・!!!

神かよ

さっさとインストールしてsetting.jsonを編集します。

    "background.useDefault": false,
    "background.customImages": [
        "file:///C:/Users/***/Desktop/azuh-bkgd.png"
    ]

例に倣って設定します。
Defaultの画像も可愛いですが、Azuhちゃんを置きたいので、falseにし、ファイルへのパスを書きます。

書いて保存すると
theme12
Oh!!! so kindness!

ありがとうと思いながら、Restart vscodeを押すと

theme13

!!

theme14

イヤッホーウ!!

でもこのままでは色がきつ過ぎてコードが読めんくなるので、ある程度画像編集して黒くするといいかもしれませんね。

注意点

tmTheme Editorでテーマを作成したからと言ってすべての言語に対して配色が適応されるわけではないです。
例えば
theme15
今回作ったAzuh ThemeをMarkdownに適応してもこんなふうにほとんどハイライトされません。
まぁスコープが違うからとしか言いようがないわけですが。
きちんと適応されているtmThemeファイルの中身をごちゃごちゃやってコピーすれば、なんとかなるのかな?

最後に

theme16
あー・・・いいわぁ・・・

参考

blog.hamamotsu.jp