Claudeのダークモード設定とフォント変更の手順 — 設定の外観から

Claudeのダークモードとフォントは、左下のアカウントメニューから「設定 > 外観」を開いて変えます。ダークモードは「カラーモード」でダークを、フォントは「チャットフォント」でデフォルト・システムに合わせる・ディスレクシア対応から選びます。

外観を変える入口は、使っている画面ごとに別々です。claude.aiのチャット画面は色モードとチャットフォントの2項目、Consoleは色モードだけ、Claude Codeのターミナルは/themeで選ぶ別系統です。この記事は、チャット画面の手順を日本語の画面名つきで示し、Consoleとの差やClaude Codeとの混同ポイントまでを扱います。新デザインのDesktopで配色が見づらい場合は、Claude Desktopのダークテーマが見づらいときで調整できる範囲を示しています。

どの画面の外観を変えたいかで、触る場所が違う

「Claudeのダークモード」と一口に言っても、設定の置き場所は3か所に分かれます。claude.aiのチャット画面とConsoleの外観設定は、公式ヘルプでも別々の手順として案内されています。Claude Codeのテーマはアカウントではなく、設定ファイルのthemeキーに保存されます。色を揃えたいときは、それぞれの画面で設定します。

画面の見た目に違和感があるときは、まず「いまどの画面を見ているか」を確かめるのが近道です。ブラウザのチャットなら次の節、ターミナルなら後半の節に進んでください。

チャット画面の色モードをライト・システムに合わせる・ダークから選ぶ

チャット画面の色モードは、次の3手順で切り替えます。画面の英語表記と日本語表記を並べておくので、表示言語を日本語にしている場合も迷いません。

「システムに合わせる」(Match System)は、名前のとおりOS側の外観設定に合わせるための選択肢です。LightとDarkは、自分で選んだ配色を使う選択肢にあたります。この3択のうちどれが読みやすいかは、画面の明るさや部屋の照明、本人の好みで変わります。迷ったら、まず一度選んで数分使い、合わなければ選び直す程度の気軽さで足ります。

チャットフォントをデフォルト・システムに合わせる・ディスレクシア対応から選ぶ

フォントも同じ外観画面で変えます。「Chat font」(日本語UIでは「チャットフォント」)の欄が入口で、選択肢は英語UIでDefault・Match System・Dyslexic Friendly、日本語UIでデフォルト・システムに合わせる・ディスレクシア対応です。

名前から分かるとおり、Dyslexic Friendlyは読み書きに困難を抱える人を想定した選択肢です。

書体や効く範囲は、同じ会話を開いたまま切り替えて本文の見え方を比べると分かります。日本語中心で使う場合も同じで、本文だけが変わるのか、周辺の表示も変わるのかがすぐ確かめられます。

「システムに合わせる」はOSの設定に従います。端末ごとに見え方を揃えたい場合は、デフォルトかディスレクシア対応を直接選んでおくと、選択がOSに左右されません。

サイドバーは非表示にできない — 開閉だけ

外観設定の近くでよく話題になるのがサイドバーです。公式ヘルプには「サイドバーを完全に無効にすることは現在できない」とあり、サイドバー右上のボタンで開閉する操作だけが案内されています。

画面共有で過去の会話タイトルを映したくない場合も、閉じた状態で共有を始めるのが現状の選択肢です。

配色が思ったとおりにならないときの切り分け

色が期待と違うときは、選んでいる項目で原因の探し方が変わります。

autoを選ぶと、Claude Codeはターミナルの明暗の背景を検出してテーマを決めます。ターミナル自体の配色はターミナルアプリが決めるもので、Claude Codeは操作しません。

ブラウザの拡張機能が画面の配色を書き換えている場合もあります。拡張機能を一時的に無効にして見え方が変わるかを試せば、原因がClaudeの設定かどうかを分けられます。

Claude Codeのテーマはチャット画面の設定とは別物

ターミナルで動くClaude Codeには、チャット画面の外観設定とは独立したテーマ設定があります。入口は2つで、/themeコマンドと、/configのConfigタブにあるThemeです。保存先は設定ファイルのthemeキーで、次のように書きます。

{
  "theme": "light-daltonized"
}

themeに入れられる値は次のとおりです。省略時の既定値は"dark"です。

色覚の違いに配慮した「daltonized」系は、チャット画面の3択にはない選択肢です。見やすさを調整したい人にとっては、ブラウザよりターミナル側のほうが幅広い選択肢を持っています。

カスタムテーマは、~/.claude/themes/にJSONファイルを置いて作ります。ファイル名から拡張子を除いたものがテーマのスラッグで、選ぶとcustom:<slug>が設定に保存されます。/themeの末尾にある「New custom theme…」から、対話的に作ることもできます。対話では、テーマに名前を付けてから、上書きする色のトークンを1つずつ選んでいきます。一覧でカスタムテーマを選んだ状態でCtrl+Eを押すと編集できます。/themeの内側のエディターには、同じトークンがライブプレビュー付きで並びます。

ファイルに書ける項目は3つで、すべて省略できます。

たとえば、ダークを土台にして、アクセントと成功・エラーの色だけを替える設定は次のとおりです。

{
  "name": "Dracula",
  "base": "dark",
  "overrides": {
    "claude": "#bd93f9",
    "error": "#ff5555",
    "success": "#50fa7b"
  }
}

色の値は#rrggbb、#rgb、rgb(r,g,b)、ansi256(n)、ansi:<色名>のいずれかで書けます。未知のトークンや不正な色の値は無視されるので、書き間違えても表示が壊れることはありません。claudeトークンはスピナーとアシスタントのラベルに使われる主役のアクセント色です。

上書きできるトークンは、役割ごとにまとまっています。主なものを挙げます。

見やすさの調整が目的なら、差分の背景色と状態の色は、画面で占める面積が大きいトークンです。userMessageBackgroundHoverとselectionBgは、フルスクリーン表示のときだけ使われるトークンです。

トークンの全体像と、色覚多様性に配慮したテーマの作り方はthemeコマンドで配色と色覚多様性対応テーマを設定するにまとめています。ここでは、設定ファイルへの書き方までを扱います。

~/.claude/themes/は監視されていて、ファイルを追加・編集すると、動いているセッションにそのまま反映されます。ただし、フォルダ自体が起動時に存在しなかった場合は、最初のテーマファイルを作った後に1回だけ再起動が必要です。2回目以降は再起動を要しません。

テーマは、インストールしたプラグインから提供されることもあります。/themeの一覧には、自分で作ったものとプラグイン由来のものが並びます。

themeは、ユーザー・プロジェクト・ローカルのどの設定ファイルにも書けるキーです。古いバージョンが~/.claude.jsonに保存した値は、どの設定ファイルにもthemeがないときに限って使われます。チームで共有するプロジェクト設定に書くと、全員のテーマが固定されてしまうため、個人の好みは自分用の設定に置くのが無難です。

/themeは、フルスクリーン表示ではClaudeの応答中でも、待たずにすぐ開きます。v2.1.234より前は、応答が終わるまでダイアログが待たされていました。昼夜でテーマを替えたい場合も、autoにしておけば、ターミナル側の明暗の切り替えにそのまま追従します。

ターミナルの読みやすさを整える設定 — 行幅とアニメーション

配色のほかに、読みやすさに効くターミナル側の設定が2つあります。

maxProseWidthは、応答の地の文を折り返す桁数の上限です。広いターミナルでは1行が画面幅いっぱいに伸びて読みにくくなるため、段落・見出し・リスト・引用がこの桁数の内側で折り返されます。表とコードブロックは端末の全幅のままです。値は40以上の整数で、それ以外は無視されます。未設定なら端末の端で折り返し、v2.1.282以降で使えます。詳しい挙動はmaxProseWidthの解説にあります。

{
  "maxProseWidth": 80
}

prefersReducedMotionをtrueにすると、スピナー・シマー・フラッシュ効果のようなアニメーションが減るか止まります。/configでは「Reduce motion」として表示され、既定はfalseです。スクリーンリーダー向けの設定はスクリーンリーダーの設定にあります。表示のちらつきは外観設定ではなく描画方式の問題で、フルスクリーン表示で扱っています。

Consoleの外観設定はカラーモードだけ

開発者向けのConsoleにも「設定 > 外観」があります。Consoleにログインし、設定 > 外観のカラーモードから、ライト・システム・ダークのいずれかを選びます。

選択肢の名前がチャットでは「システムに合わせる」、Consoleでは「システム」と微妙に異なる点に注意してください。両方で色を揃えたいときは、それぞれの画面で個別に設定します。

まとめ

チャット画面はカラーモードとチャットフォント、Consoleはカラーモードのみ、Claude Codeは/themeと、入口が3つに分かれていると覚えておけば、設定の迷子になりません。色が合わないときは、選んでいる項目に応じて、OS・ターミナル・Claude本体のどれを見るかを決めます。

送信ボタン隣のモデル・effort設定を変えたい場合はClaudeのモデル設定を変更する手順、表示言語を変えたい場合はClaude言語設定を日本語優先にする手順を参照してください。組織のセッション有効期限のようなセキュリティ寄りの設定はClaudeセッションセキュリティ設定にまとめています。