All Articles

InkdropのNordテーマを作った

タイトルの通り。メモやブログの下書きなどでInkdropを利用している。 別のエディタではNordテーマを使っているのでInkdropでも同じテーマにしたいなと思って作成した。

InkdropのテーマはUI、Syntax、Previewの3つに分かれているので個別に作成する必要がある。 テーマの作り方についてはドキュメントで丁寧に書かれているので作ってみたい場合はドキュメントを参照。

VSCodeのテーマに似せて作ったのでそれっぽくはなっているはず。テーマを適用した場合は次の画像のような感じ。

screenshot

UI

エディタ部分以外が対象。確認のモーダルや設定のウィンドウもUIテーマに含まれる。 あらかじめ定義されている変数の値を変えたり、.overridesファイルで設定を上書きしたりすることで既存のスタイルが変更できる。

各コンポーネント(ボタンなど)の変数を.overridesファイルに書いてみたが適用されなかったので.variablesファイルの値を直接書き換えた。 site.overridesでは変数の上書きも可能なのでこの点は謎のまま…。

Syntax

CodeMirrorが利用されているので、cm-*クラスを編集すればコードに関するスタイルが変更できる。

マッチするたびに背景色が変わるのがあまり好きではないのでoutlineプロパティを使ったブラケットマッチにした。

screenshot-bracket-matching

またBulleted Listで3段目になるとテキストにまでカラーが適用されていたので力技だが適用されないようにした。 左がDefault Dark Syntaxで右が今回作ったNord Syntax

screenshot-syntax

Preview

UIテーマ名に合わせてプレビューのスタイルが適用される。今回だとUIのテーマ名をnord-uiにしたのでプレビュー側では次のように定義する必要がある。 Syntaxと同様CodeMirrorを利用しているので、cm-*クラスを編集

body[class*='nord-ui'] {
  ...
}

あとがき

無事出来上がってよかったの一言。ipmにも公開済みなのでよかったら使ってみてください。

Inkdrop使ったことないよって方は60日の無料トライアルがあるので一度使ってみて継続利用するか決めたら良いと思います!