テーマ
アプリ全体の配色と、プレビューの見た目は別々に決められます。夜は暗い画面で書き、読み返すときだけ紙のような明るい紙面にする、といった組み合わせもできます。配色は明るい側と暗い側の 2 組を持っていて、どちらを表示するかもあとから選べます。
Styles の構成
アプリ全体の配色は Settings → Styles（アプリ全体の色を決める画面）で変えます。設定は Mod+, で開きます。
いちばん上の Editing は、これから編集するのが明るい側の Light と暗い側の Dark のどちらかを選ぶものです。1 つの配色は明暗 2 組の色を持っているので、どちらに書き込むかをここで決めます。画面を開いた時点で、いま表示されている側が選ばれます。
Editing はひとりでに動きません。OS の見た目が切り替わっても、編集中の側はそのままです。あとで出てくる Color mode を Light か Dark に固定したときだけ、Editing もそちらへ移ります。
その下は Colors、Editor、Preview の 3 つのタブに分かれています。どのタブで変えた内容も、その場で画面に反映されます。ただし保存されるのは画面下の Save & Reload を押したときだけです。押さずに設定を閉じると、変更は破棄され、見た目も元に戻ります。
Colors タブ
画面全体の色を決めるタブです。上から順に次の項目が並びます。
Color scheme — 配色一式を選びます。いま用意されているのは Default の 1 つだけです。
Color mode — 明暗どちらの色を表示するかです。System は OS の設定に従い、Light と Dark は OS の設定に関係なく固定します。最初は System です。
Palette ramps — 配色のもとになる色を並べたものです。
Color mapping — 画面の各部分に、もとの色のどれを割り当てるかです。
WCAG checks — 決めた色の組み合わせが読みやすいかを確かめる表です。
色のもとを決める場合
Palette ramps には 3 つのグループがあります。Base は背景から文字までの 5 段（0 から 4）、Accent は強調に使う 3 段（0 から 2）、State は Danger、Success、Warning、Info の 4 色です。
グループ名を押すと開き、色見本をクリックするとその 1 色を編集できます。Base と Accent にはグラフが付いていて、L（明るさ）、C（鮮やかさ）、H（色あい）の表示を切り替えながら、点をドラッグすると 1 段だけ、線をドラッグすると全体をまとめて動かせます。Exact OKLCH の欄に数値を直接入れることもできます。
ここで決めた色は、明るい側と暗い側で共通です。片方を編集していても、もう片方の色も一緒に変わります。
割り当てを変える場合
Color mapping の上半分には bg（背景）、fg（文字）、cursor（カーソル）、selectionBg（選択範囲の背景）が並びます。下半分の Semantic tokens には、リンク、枠線、検索で見つかった箇所、通知の色など、用途ごとの割り当てが並びます。
どの項目も、Base / Accent / State のどれかを選ぶか、Literal... を選んで色を直接書き込みます。この割り当ては明るい側と暗い側で別々に持つので、Editing で選んでいる側だけが変わります。
WCAG checks の表には、文字色と背景色の組み合わせごとに Aa の見本と数値、そして AAA / AA / Fail の判定が出ます。Fail が出ている組み合わせは読みにくいので、Palette ramps に戻って明るさの差を広げます。
Editor タブ
書いている面での、強調の字体と色を決めるタブです。
Inline Font Styles では、italic（<i>）、emphasis（<em>）、strong（<strong>）の 3 つについて Font Style と Font Weight を選びます。Font Style は normal と italic の 2 つ、Font Weight は 100 から 900 までの 9 段階です。最初は italic と emphasis が italic の 400、strong が normal の 700 です。この設定はプレビュー側の表示にも効きます。
Editor Markdown Colors では、書いている最中の見出し、strong、emphasis、リンク、引用、インラインコードの色を決めます。選びかたは Color mapping と同じです。
Preview タブ
Preview — inline emphasis では、プレビューに表示される italic、emphasis、strong の文字色と背景色を決めます。こちらも Color mapping と同じ選びかたです。
プレビューテーマ
プレビューの見た目は、これまでの配色とはまったく別の仕組みで選びます。明るいもの 10 種、暗いもの 10 種の、あわせて 20 種類が最初から用意されていて、既定は Foundry です。
| テーマ | 明暗 | 特徴 |
|---|---|---|
| Foundry | 明るい | 素直で読みやすい、標準的な見た目 |
| Ledger | 明るい | クリーム色の紙に明朝。落ち着いた学術書風 |
| Broadsheet | 明るい | 新聞の紙面風。大きな飾り文字と太い罫線 |
| Swissgrid | 明るい | 格子を効かせた欧文書体に、赤の差し色 |
| Manuscript | 明るい | 文芸書のような静かな紙面 |
| Hearth | 明るい | 暖かみのあるレトロな配色 |
| Solar | 明るい | 目の疲れにくい、技術向けの淡い配色 |
| Avenue | 明るい | 白い展示室のような幾何学書体。珊瑚色の差し色 |
| Linen | 明るい | 罫線入りのノート風。テラコッタ色のリンク |
| Atelier | 明るい | 薄い方眼のアトリエ風。赤土色の差し色 |
| Drift | 暗い | 青みがかった、穏やかで彩度の低い暗色 |
| Hollow | 暗い | 紫とピンクを効かせた、対比の強い暗色 |
| Obsidian | 暗い | 中庸な黒鉛色。青の差し色ひとつだけ |
| Umber | 暗い | 暖かい炭色に明朝。琥珀色の差し色 |
| Abyss | 暗い | 深い紺色の技術向け。シアンの差し色 |
| Moss | 暗い | 森の地面のような緑がかった灰色 |
| Ink | 暗い | 真夜中の紙。藍色のリンクと明朝 |
| Velvet | 暗い | 梅色がかった、上品で控えめな配色 |
| Carbon | 暗い | 白黒のコンソール風。等幅の見出し |
| Nocturne | 暗い | 文芸風の紺色に、控えめな金の差し色 |
明暗はテーマごとに固定です。OS の設定や Color mode につられて変わることはないので、暗いプレビューにしたいときは暗いテーマを選びます。
選びかたは 3 通りあります。Settings → Preview の Preview Theme、プレビューの右上に浮かぶ Preview theme ボタン、そして Command Palette（Mod+K で開く、コマンドの検索窓）の Preview: Next theme、Preview: Previous theme、Preview: Choose theme… です。ボタンから開く一覧では、組み込みのテーマが先に並び、自分で作ったものは My themes としてその下にまとまります。
Mod+Shift+F10 を押すと Preview: Next theme が実行され、一覧の順に次のテーマへ移ります。このキーは最初から効きますが、Settings → Shortcuts に項目がないため、別のキーに変えることはできません。Preview: Previous theme と Preview: Choose theme… にはキーが割り当てられておらず、Command Palette から実行します。
プレビューを切り替える手順そのものはプレビューにまとめています。
Theme Creator
Theme Creator（プレビューテーマを自分で作る画面）では、CSS を書いて独自のテーマを保存できます。Command Palette の Open Theme Creator で開きます。この機能にはキーが割り当てられておらず、Settings → Shortcuts にも項目がないため、キーで開くことはできません。
画面は左右に分かれます。左は見本の文書のプレビュー、右は CSS を書くエディタです。右で書き換えると、その場で左の表示が変わります。左側の右上にある Edit sample に切り替えると見本の文章を書き換えられ、Preview で表示に戻ります。見本の書き換えは画面を閉じると消えます。
上の帯には、テーマを扱う操作がまとまっています。
下敷きにするテーマは、いちばん左の Theme から選びます。組み込みのテーマ、保存済みの My themes、いちばん下の Create new theme… が並んでいて、選ぶとそのテーマの CSS が右のエディタに読み込まれます。
自分のテーマを作るときは Create new theme… を選びます。組み込みのテーマは書き換えられないので、必ずこの手順を通ります。
名前は Theme name の入力欄に入れます。組み込みのテーマを選んでいるあいだは書き換えられません。
Save を押すと確認の画面が出て、もう一度 Save を押すと保存されます。
保存したテーマは、ごみ箱のボタンから消せます。使っていたテーマを消した場合は Foundry に戻ります。
ヘルプのボタンを押すと、CSS の書きかたと、使える変数の一覧が出ます。
Note
Theme で選んでも、Save で保存しても、プレビューの表示は切り替わりません。作ったテーマを実際に使うには、保存したあとで Settings → Preview の Preview Theme か、プレビュー右上のボタンから選び直します。
保存していない編集は、画面を閉じると失われます。
保存したテーマは、いま使っているアプリごとに、その端末の中へ置かれます。workspace の中ではないので、別の端末には配られません。同じ端末の同じアプリであれば、どの workspace を開いても使えます。
Kanban Board と Mind Map の配色
Kanban Board と Mind Map には、それぞれ専用の配色を作る画面があります。Command Palette の Open Kanban Theme Creator と Open Mindmap Theme Creator で開きます。どちらも CSS を書くのではなく、色や角の丸みを項目ごとに選ぶ形です。ここで作った配色はその画面専用で、アプリ全体の配色ともプレビューテーマとも別に扱われます。詳しくはかんばんボードとマインドマップにまとめています。
端末ごとに配色を変える場合
Styles の中身と Color scheme、Color mode は、端末ごとに違う値にできます。大きな画面では暗い配色、明るい部屋のノート PC では明るい配色、といった使い分けができます。手順はデバイスごとの設定で扱います。
プレビューテーマは端末ごとに分けられません。同じ workspace を開いたすべての端末で同じテーマになります。