Claude 背景色の変更方法｜ダーク設定と色が変わらない時の対処
Claudeの画面が明るく感じる、暗い背景を元に戻したい、いつの間にか色が変わって戸惑った。そんなときは、使っている画面と外観設定を確認すると原因を絞れます。この記事では、ブラウザーで使うClaudeの背景色変更を中心に、システム連動の仕組み、任意の色を指定したい場合の考え方、Claude Codeとの設定場所の違いを整理します。
ClaudeのWeb版は「設定→外観→カラーモード」でライト・ダーク・システムに合わせるを選択できる。任意の色指定は公式手順に記載されておらず、Claude Codeの端末背景はターミナル側で変更できる。
Contents (7)
Claudeの背景色はどこで変更する？
ブラウザーでClaudeと会話している場合、背景色の切り替え先はアカウントの「外観」設定です。チャットに「背景を黒にして」と入力するのではなく、画面の設定メニューから操作します。会話の内容や回答の書き方を指定する機能と、サービスの見た目を変える機能は設定場所が異なります。
まず、変えたいのがチャット画面全体なのか、生成したWebページなのか、Claude Codeを表示している端末なのかを確認してください。たとえば、Claudeに作ってもらったページの背景が青い場合、その青色はページのデザインです。Claude自身のカラーモードを変更しても、生成物の色まで同じ設定になるとは限りません。
| 変えたい対象 | 確認する場所 |
|---|---|
| ClaudeのWebチャット画面 | 設定の「外観」 |
| Claude Codeの文字や差分の配色 | Claude Codeの/theme |
| Claude Codeを開いた端末の背景 | ターミナルアプリの配色設定 |
| Claudeが生成したページの背景 | 生成物のデザインやコード |
画面の種類を先に見分ければ、関係のない設定を何度も変更する手間を減らせます。
Web版でライト・ダークを切り替える手順
公式ヘルプでは、アカウントメニューから外観設定を開く方法が案内されています。Web版で背景を明るくしたいときはライト、暗くしたいときはダークを選びます。
- Claudeにログインし、画面左下にある名前またはイニシャルをクリックします。
- メニューから「設定」を開き、「外観」に移動します。
- 「カラーモード」で「ライト」「システムに合わせる」「ダーク」のいずれかを選びます。
- チャット画面に戻り、背景と文字の組み合わせが読みやすいか確認します。
「黒っぽい表示から明るい表示に戻したい」なら、まずライトを明示的に選んでください。反対に、明るい画面を落ち着いた配色にしたいならダークを選ぶと、OSの外観と切り離して希望を指定できます。
背景だけを見て決めず、入力欄、回答文、コードブロックも合わせて確認するのが実用的です。長い回答を読むときと、短い質問を入力するときでは、見やすさの感じ方が違うことがあります。
「システムに合わせる」と固定設定の違い
「システムに合わせる」は、利用環境の外観に合わせて表示を選ぶ選択肢です。パソコンの見た目を明るい設定から暗い設定に変えた際、Claude側でも配色が変わることを期待する場合に向いています。Claudeだけ常に明るく使いたい場合はライトを、常に暗く使いたい場合はダークを選びます。
急に背景色が変わったように見えるときは、Claudeの設定に加え、OS側で外観を切り替えていないか確認しましょう。時間帯に応じて外観を変える設定を使っている場合も、連動を選んだ画面が変化する理由の候補になります。まず固定モードにして違いを見ると、連動が関係しているか切り分けやすくなります。
なお、システム連動と「画面の明るさ」は別の設定です。背景が暗くなっても、ディスプレイの輝度そのものが下がるとは限りません。画面がまぶしいと感じる場合は、カラーモードとディスプレイの明るさをそれぞれ調整してください。
好きな色やカラーコードを指定できる？
公式の外観設定手順で案内されているカラーモードは、ライト、システムに合わせる、ダークの3種類です。背景をピンクや青にする設定や、#ffffffのようなカラーコードを入力する手順は、この公式ヘルプには記載されていません。標準設定を探す場合は、まずこの3つの選択肢を基準に考えられます。
ここで、「Claudeに色を指定できない」という意味に広げないことも大切です。生成するWebページの背景なら、依頼文で「背景を淡い青にする」「文字とのコントラストを確保する」と指定できます。しかし、それは作成するコンテンツへの指示であり、Claudeの会話画面自体の設定とは異なります。
画面全体の色を変えるブラウザー拡張機能などを検討する場合は、Claude標準の設定と区別してください。導入前に、対象サイトだけに適用できるか、ページの読み取り権限は何か、すぐ元に戻せるかを確認すると判断しやすくなります。まず標準モードで目的を満たせるか試すと、追加設定を増やさずに済みます。
背景色が変わらないときの確認順
設定を変えても見た目が変わらない場合、すぐにアカウントの不具合と判断せず、設定先と表示対象を順に確認します。次は公式の障害復旧手順ではなく、原因を絞るための確認方法です。
- 変更したのが「チャットフォント」ではなく「カラーモード」か確認します。
- 「システムに合わせる」からライトまたはダークへ切り替え、連動を外した状態で見比べます。
- 開いている画面が通常のClaudeチャットか、生成したページやターミナルか確認します。
- 入力中の文章を控えてからページを再読み込みし、表示を確認します。
- 配色を変更する拡張機能を使っている場合、Claudeへの適用を一時的に止めて比較します。
- 改善しない場合は、ブラウザー名、選択したモード、どの部分が変わらないかを整理して問い合わせます。
一度に複数の設定を変えると、どれが原因だったか分からなくなります。各操作のあとに同じ画面を見ると、背景全体が変わらないのか、コード表示だけが違うのかを判断しやすくなります。
公式ヘルプでは、外観設定内のフォント変更も別項目として案内されています。「文字の見た目は変わったが背景は同じ」という場合は、選んだ設定項目をもう一度確認してください。
Claude Codeの背景色はターミナル側で設定する
Claude Codeでは、文字や差分の配色と、端末そのものの背景色を分けて扱います。公式ドキュメントは、Claude Codeがターミナル自体の配色を制御するのではなく、ターミナルアプリ側で設定すると説明しています。/themeを変えたのに背景が同じでも、必ずしも設定失敗ではありません。
- 使用しているターミナルアプリの設定を開き、背景色や配色を変更します。
- Claude Codeの入力欄で
/themeを実行します。 - 端末の明暗に合うテーマを選び、文字や差分が読み取れるか確認します。
- 自動連動を使う場合は
autoを選び、ターミナル側もOSの外観に追従する設定か確認します。
端末の背景を暗くしたあとに明るい背景向けの文字配色を使うと、一部の表示が読みづらくなることがあります。背景を変えたら、通常の回答だけでなく追加・削除の差分も確認しましょう。
出典：Claude Code公式ドキュメント「Configure your terminal for Claude Code」
カスタムテーマや表示方式まで調整したい場合は、Claude CodeのTUI活用術も参考になります。
背景色を選ぶときは実際の読みやすさで判断する
ライトとダークのどちらが読みやすいかは、部屋の明るさ、画面の輝度、文字の大きさ、読んでいる内容によって変わります。「ダークにすれば必ず疲れにくい」と決めつけず、普段の作業と同じ条件で見比べると選びやすくなります。
たとえば昼間の明るい場所で文章を読む場合と、夜にコードを確認する場合では、合う配色が異なることがあります。背景色だけを何度も切り替えるより、明るさやフォントを一項目ずつ調整し、読みやすい組み合わせを探してください。
まずWeb版なら「設定→外観」、Claude Codeなら「ターミナルの背景設定と/theme」という入口を押さえれば、変更先を迷いにくくなります。任意の色にしたい場合も、会話画面の設定なのか生成物への指示なのかを区別することで、目的に合った操作を選べます。