Cursorのテーマはどこから変更する？基本手順を解説
Cursorのテーマ変更の基本手順
- 01コマンドパレットを開くCtrl + Shift + P (Mac/Windows共通)
- 02「Preferences: Color Theme」と入力テーマ一覧が表示される
- 03矢印キーでプレビューして選ぶエディタの色がその場で切り替わるので、自分のコードで確認しながら決められる
コマンドパレットで「Preferences: Color Theme」を選ぶ
テキトー教師DotAI 認定講師最初に戸惑うのが、設定画面を探してしまうことなんですよね。CursorはVS Code系なので、テーマ変更はコマンドパレットから行うのが基本です。
室谷代表取締役そうそう。MacでもWindowsでも
これでテーマ一覧が出てくるから、あとは矢印キーでプレビューしながら選ぶ。
Ctrl + Shift + Pでコマンドパレットを開いて、「Preferences: Color Theme」って入力するだけ。これでテーマ一覧が出てくるから、あとは矢印キーでプレビューしながら選ぶ。
テキトー教師DotAI 認定講師プレビューできるのがいいんですよ。選んでから「あ、思ってたのと違う」ってなるのを防げます。
実際にカーソルを動かすとエディタの色がその場で切り替わるので、自分のコードで確認しながら決められます。
実際にカーソルを動かすとエディタの色がその場で切り替わるので、自分のコードで確認しながら決められます。
室谷代表取締役結構これ、みんな知らないで設定画面を探しちゃうんですよね。コマンドパレット一発で完結するのに。
ライト/ダークモードの切り替えとOS連動
テキトー教師DotAI 認定講師ライトかダークかだけ切り替えたい場合は、同じコマンドパレットからテーマ名を選べばいいですね。ライトなら「Light」、ダークなら「Dark」と付いたテーマを選ぶのが早いです。
室谷代表取締役あと、OSの外観に追従させることもできます。設定で「Auto Detect Color Scheme」を探してオンにすると、OSがライトならCursorもライト、ダークならダーク、って自動で切り替わる。
テキトー教師DotAI 認定講師これ、結構大事なポイントですね。ナイトモードでOSごと切り替えてる人なら、Cursorだけ設定を変える手間がなくなります。
会社のMacと自宅のWindowsで同じ操作感になるのも、VS Code系ならではの利点です。
会社のMacと自宅のWindowsで同じ操作感になるのも、VS Code系ならではの利点です。
室谷代表取締役環境差異を意識しなくて済むのはありがたい。エンジニアの生産性って、そういう細かいストレスの積み重ねで変わるので。
もっとテーマを増やしたいときは
テキトー教師DotAI 認定講師初期テーマに飽きたら、エクステンションから増やすこともできます。
Ctrl + Shift + Xで拡張機能ビューを開いて、テーマ名で検索してインストールするだけ。室谷代表取締役この辺りの拡張性の高さがVS Code系の強みですよね。企業で導入するときも、既存のVS Codeテーマ資産がそのまま使えるのはコスト的にも大きい。
テキトー教師DotAI 認定講師たしかに。チームで「このテーマ使おう」って決めてる場合も、同じ手順で揃えられるので管理が楽です。
室谷代表取締役ちなみに、反映されない場合の話はまた別で触れましょう。まずはコマンドパレットからの基本手順を押さえておけば、大方のテーマ変更はこれで対応できますから。
Cursorで使えるテーマの種類と一覧は？
まとめ
Cursorで使えるテーマの要点
- デフォルトではダーク系「Dark Modern」「Cursor Dark」、ライト系「Light Modern」が用意されている
- テーマ切り替えはコマンドパレットから「Preferences: Color Theme」を開き、矢印キーでプレビューしながら選べる
- VS Code向けのテーマ拡張機能がそのまま使えるため、エクステンションビューで「theme」と検索してワンクリックで追加可能
- 長く作業する場合は目が疲れにくいテーマを選び、明るい部屋ではライト系も選択肢になる
- 設定の「Auto Detect Color Scheme」を有効にするとOSの外観に合わせてライト/ダークを自動で切り替えられる
デフォルトで用意されているテーマ
室谷代表取締役テーマ選び、開発体験に直効きするわりに軽視してる人多いですよね。Cursor は VS Code ベースなので、最初からある程度テーマが揃ってるんですよ。
テキトー教師DotAI 認定講師そうです。ダーク系なら「Dark Modern」「Cursor Dark」、ライト系なら「Light Modern」あたりがデフォルトで入ってます。
初めて触る人でも、まずこの中から選べば困らないですね。
初めて触る人でも、まずこの中から選べば困らないですね。
室谷代表取締役切り替えはコマンドパレットから「Preferences: Color Theme」で一覧が出ます。矢印キーで上下するとプレビューもできるんで、プロジェクトの雰囲気に合わせて選ぶときも迷わないですよ。
テキトー教師DotAI 認定講師それ、よく使う操作なんで覚えておくと得しますね。
拡張機能からテーマを追加する方法
テキトー教師DotAI 認定講師デフォルトで足りない場合は、拡張機能からテーマを追加できます。エクステンションビューを開いて「theme」って検索すれば、カラーテーマの拡張機能がずらっと出てきますよ。
室谷代表取締役VS Code 向けのテーマがそのまま使えるのが Cursor の強いところです。エンジニアの好みに合うテーマがほぼ全部揃ってるイメージで、プロジェクトごとにエディタの見た目を変えたいときも選択肢が広いですね。
テキトー教師DotAI 認定講師インストールはワンクリックで完了します。実際に追加したあと、さっきの色テーマ選択画面に戻ると、増えてるのが確認できるはずです。
室谷代表取締役拡張機能を入れすぎると起動が重くなることもあるので、テーマ専用はいくつかに絞るのが運用としてはきれいですね。
エディターテーマの選び方のコツ
テキトー教師DotAI 認定講師選び方のコツでいうと、まずは長く作業することを考えて目が疲れにくいテーマを選ぶのが大事です。ダーク系は集中しやすい一方で、明るい部屋だとライト系のほうが見やすい、みたいな環境要因もあります。
室谷代表取締役OSの外観に追従させる設定もあるんで、そこも意識すると快適さが変わりますよ。
テキトー教師DotAI 認定講師そう、設定画面で「Auto Detect Color Scheme」を有効にしておけば、ライト・ダークを自動で切り替えてくれます。
室谷代表取締役最後に、テーマは好みの問題なんで、正解はないです。気分転換に変えるのもありですし、しっくり来なかったら別のテーマを入れて、気軽に試してみるのがいちばんいいと思います。
背景色や配色を細かく変更したいときは？
テーマ切り替えと色のカスタマイズの違い
テーマ切り替え
- 全体の配色を一括で切り替える
- テーマ一覧から選択
- 背景も含めて全体が変わる
- 部分調整には不向き
色のカスタマイズ
- 個別の要素を上書きする
- settings.jsonのworkbench.colorCustomizationsに指定
- エディタ背景・サイドバー・ステータスバー・タブなどを指定可能
- 反映されないときはCtrl+Shift+P → Reload Window
テーマの一覧や基本的な切り替え方はわかった。今度はもっと細かい色調整の話をしよう。標準のテーマ切り替えだけだと、背景色やアクセントカラーを自由に変えられなくて困ることがあるんだよな。
settings.jsonでUIの色をカスタマイズする
室谷代表取締役CursorってVS Codeベースだから、背景色や文字色を細かく指定したいときはsettings.jsonに
workbench.colorCustomizationsを書くのが定番なんですよね。エディタの背景色、サイドバー、ステータスバー、アクティブなタブの色とか、要素ごとに色コードで指定できる。テキトー教師DotAI 認定講師たしかに。最初に戸惑うのは「テーマ変更」と「色のカスタマイズ」の違いですね。
テーマは全体の配色を一括で切り替えるもの、こっちは個別の要素を上書きするイメージです。たとえば背景だけ暗くしたい、とか。
テーマは全体の配色を一括で切り替えるもの、こっちは個別の要素を上書きするイメージです。たとえば背景だけ暗くしたい、とか。
室谷代表取締役そう、部分調整がしたいだけなのにテーマを変えると他の要素まで変わっちゃうので、こっちのほうが狙い撃ちできるんですよね。プロジェクトごとにファイルを分ける話は別のところで出てたけど、個人の好みで色を詰めたいならまずここを触るのが早い。
テキトー教師DotAI 認定講師ただ、設定したのに反映されないケースもあって、その場合は
Ctrl + Shift + Pで「Reload Window」を実行すると反映されます。「開き直したら消えた」みたいなときはsettings.jsonの書き方を確認するのが早いですね。エディタとAIパネルで別々のテーマにしたい場合
テキトー教師DotAI 認定講師ここも現場でよく聞かれる話で「コードはダーク、AIパネルはライトで表示したい」みたいな要望があるんですよ。エディタはダークのまま、チャット欄だけ明るくしたい、と。
室谷代表取締役これ、現状だと標準設定では分けられないんですよね。フォーラムでも同じ質問が上がってて、公式の回答としては拡張機能でスタイルを上書きする方法が提示されてる。
「Custom UI Style」みたいなやつですね。
「Custom UI Style」みたいなやつですね。
テキトー教師DotAI 認定講師そうそう。ユーザーからも「エディタとAIパネルで別テーマにしたい」ってリクエストが出てるんですが、いまは機能自体がまだ実装されてないので、拡張機能でCSSを当てるのが現実的な回避策です。
室谷代表取締役個人的には、エディタとAIパネルで色がバラバラになると作業が切り替わるたびに目が泳ぐので、最初は全体を同じテーマに揃えて、慣れてから細かく調整するのがいいと思うんですよね。ROIで考えると色調整に時間をかけるより、コードを書く時間に使ったほうが生産的ですから。
カーソルの色やファイル名の色が変えられないとき
テキトー教師DotAI 認定講師特定の部分だけ色が変わらない、という相談も多いですね。カーソルの色、ファイル名の色、あとはAIパネル内のリンク色とか。
室谷代表取締役リンク色はちょっとクセがあって、AIパネル内のファイル参照がテーマの設定を無視して固定色で表示されてしまうバグが確認されてるんですよね。フォーラムでも原因が特定されてて、テーマ側で設定しても効かないケースがある。
テキトー教師DotAI 認定講師そうなんですよ。「設定したはずなのに反映されない」ときは、まず対象がエディタなのかAIパネルなのかを切り分けるのが大事です。
エディタの色はテーマやsettings.jsonで直るけど、AIパネルの一部は現状では直せないものもある、と。
エディタの色はテーマやsettings.jsonで直るけど、AIパネルの一部は現状では直せないものもある、と。
室谷代表取締役つまり「変えられない部分もある」と割り切って、そこは今後のアップデート待ちですね。エディタの色を整えるだけでかなり見やすくなるので、まずは標準のカスタマイズ範囲で快適にできるか試すのがおすすめです。
Cursorのおすすめテーマは？選び方のコツと時短ワザ
ダークテーマ vs ライトテーマ
ダークテーマ
- 目が疲れにくい
- 定番は Default Dark Modern / Cursor Dark
- コントラストが程よく、コードに集中しやすい
ライトテーマ
- 画面共有・プレゼン向き
- 定番は Default Light Modern / Light系
- プロジェクターでも文字が潰れにくい
暗い背景で目が疲れにくい定番テーマ
室谷代表取締役開発環境って結局、長時間見続けるものなので、暗い背景の定番テーマを押さえておくのが一番コスパいいんですよね。切り替えはコマンドパレットから
カーソルキーでプレビューしながら決められます。
Preferences: Color Theme を選ぶだけ。カーソルキーでプレビューしながら決められます。
テキトー教師DotAI 認定講師たしかに、最初に戸惑うのが「どこから変えるの？」ってところですけど、公式だと Default Dark Modern か Cursor Dark を選べばOK。慣れないうちは明るすぎるテーマより、コントラストが程よい定番に落ち着く人が多いですね。
室谷代表取締役チームで画面を見せる機会が多いと、暗めテーマのほうが目線がコードに集中する感じもありますよね。結局テーマ選びって“疲れにくさ”を最優先にするのが正解だと思ってます。
ライトテーマで画面共有しやすい選択肢
テキトー教師DotAI 認定講師一方で、プレゼンや共有時にライトテーマを使う人もいますね。Default Light Modern や「Light」と付くテーマを選べば、プロジェクターでも文字が潰れにくい。
室谷代表取締役USのチームとオンラインミーティングするとき、向こうがライトテーマ率高めなんですよ。画面共有だと暗い背景より読みやすいって言われて、それ以来、人に見せるときだけ切り替えるようにしてます。
テキトー教師DotAI 認定講師OSの外観に合わせて自動で切り替える「Auto Detect Color Scheme」もあるので、使い分けが面倒な人は設定でオンにするのが楽です。
好みの配色をAIに提案してもらう時短ワザ
室谷代表取締役配色で迷う時間って、時給換算すると馬鹿にならないんですよね。そういうときはAIに「長時間コーディング向けの落ち着いた配色」みたいに聞くと、具体的なテーマ名をいくつか出してくれるので、そこから選ぶのが早いです。
テキトー教師DotAI 認定講師実際、テーマを探すよりAIに候補を絞らせるほうが圧倒的に速い。ストアで延々と探すより、好みの雰囲気を言葉で伝えるだけで、だいたい当たりのテーマに辿り着けますよ。
室谷代表取締役結局、テーマは好みの問題なので、最初から完璧を目指さず、候補を絞ってから微調整するのが一番早い。暗め・明るめの軸だけ決めておくと、選ぶときに迷わなくなります。
テーマの色が反映されないときはどうする？
テーマの色が反映されないときの原因と対処
コマンドパレットでテーマが選べない
- 「>」を付け忘れるとコマンドとして認識されない
- Agentsウィンドウにいるとショートカット無効
- 対処: 「>」を付けて選ぶ / 「Open IDE」を実行
AIパネルやリンクの色が追従しない
- 標準機能ではエディタとAIパネルを別テーマにできない
- Custom UI Style拡張でCSS上書きは可能だが高難度
- エージェントチャットのリンク色は既知のバグで固定
- 現実的にはテーマ全体統一で割り切る
コマンドパレットでテーマが選べないとき
室谷代表取締役基本は Ctrl+Shift+P（Mac は Cmd+Shift+P）で「Color Theme」を選べばいいんですけど、ここで迷子になる人が多いみたいですね。
テキトー教師DotAI 認定講師私のところでもよく聞くのが、コマンドパレットに「color theme」って打ったのに候補に出てこない、という話。原因はだいたい「>」を付け忘れていて、テキスト検索扱いになっているパターンです。
室谷代表取締役フォーラムでも「'>' なしだとコマンドとして認識されなかった」という投稿があって、まず「>」を入れてみるのが最短ルートですね。あと、Agents ウィンドウにいるとショートカットが効かないことがあるので、その場合は「Open IDE」を実行してから操作し直します。
AIパネルやリンクの色がテーマに追従しない
テキトー教師DotAI 認定講師テーマ自体は変わったのに、チャットや AI パネルの色だけ前のまま、という相談もありがちです。実は標準機能では、エディタと AI パネルをそれぞれ別のテーマにする設定は用意されていません。
室谷代表取締役海外のフォーラムでも同じ質問が上がっていて、回答として挙がっていたのが「Custom UI Style」という拡張機能。CSS で見た目を上書きするアプローチです。
テキトー教師DotAI 認定講師ただ、これはスタイルシートをいじることになるので、初めての人にはちょっとハードルが高い。まずは「テーマは全体で統一する」と割り切るのが現実的かもしれません。
室谷代表取締役ちなみに、エージェントチャット内のファイル参照リンクがテーマに追従しない既知のバグも報告されています。独自の CSS 変数で色が固定されていて、テーマ設定を変えても青のままになるケース。
開発側もバグとして認識済みなので、修正待ちという位置づけです。
開発側もバグとして認識済みなので、修正待ちという位置づけです。
拡張機能のテーマが反映されないときの確認ポイント
テキトー教師DotAI 認定講師拡張機能のテーマをインストールしたのに反映されない場合は、まず Extensions ビューが正しく開いているかですね。Agents ウィンドウにいると開かないことがあるので、「Open IDE」で切り替えてからもう一度試します。
室谷代表取締役インストールしたら、コマンドパレットから「Color Theme」を選び直す必要があります。インストールしただけで自動で切り替わるわけではないので、そこは手順として覚えておくとスムーズです。
テキトー教師DotAI 認定講師それでも切り替えられないなら、拡張機能と Cursor 側の互換性を疑います。VS Code 向けのテーマはだいたい動きますが、古いテーマだと一部の配色が反映されないこともあります。
室谷代表取締役最終的には公式ヘルプの「Themes and appearance」に手順がまとまっているので、最初に戻って一つずつ確認するのが確実ですね。
チームやプロジェクトでテーマを使い分けるには？
テーマを使い分ける方法の比較
ウィンドウの色分け
- 複数ウィンドウを開いたときの混乱を防止
- 色でタスクやサーバー/フロントを見分ける
- 制限あり、拡張機能や配色自作で対応
ワークスペース単位で切替
- プロジェクトごとにテーマを持たせたい
- 現状はグローバル設定のみで個別保存不可
- チームのルール化で手動切替により統一
複数ウィンドウを開くときは色で見分けると便利
室谷代表取締役サーバーとフロント、同時に開いて開発してると、どっちのウィンドウで作業してたか迷うことありますよね。タブが増えれば増えるほど、タイトルバーだけだと見分けづらい。
テキトー教師DotAI 認定講師たしかにあります。実はCursorのフォーラムでも「ウィンドウごとにテーマを変えられたらいいのに」という要望が以前から出てるんですよ。
軽く色を変えるだけでも混乱が減るはずです。
軽く色を変えるだけでも混乱が減るはずです。
室谷代表取締役ですよね。チームで複数プロジェクトを抱えてると、ウィンドウの色分けは生産性に直結する。
“どのウィンドウがどのタスクか”を探す時間を時給換算すると、塵も積もればで結構なコストになります。
“どのウィンドウがどのタスクか”を探す時間を時給換算すると、塵も積もればで結構なコストになります。
テキトー教師DotAI 認定講師今はウィンドウ単位での切り替えに制限があって、テーマ色を細かく変えるには拡張機能の力を借りたり、配色を自作したりして対応する感じです。ただ「見分けたい」というユーザーが多いのも事実で、色で区別したい需要は根強いんですよ。
ワークスペース単位でテーマを切り替える考え方
室谷代表取締役プロジェクトごとに色を分けたい、という話も聞きます。UIのテーマをプロジェクト単位で持たせたいパターンですね。
テキトー教師DotAI 認定講師現場でよく聞くのが、この“ワークスペース単位でテーマを切り替えたい”という声。今のCursorは設定の多くがグローバルで、プロジェクト個別に保存することは難しいんです。
室谷代表取締役プロジェクトごとにテーマを持たせられると、クライアント仕事で「あの案件のコードはいつも暗めで、この案件は明るめ」みたいに切り替えられるのに、と思いますよね。
テキトー教師DotAI 認定講師とはいえ、既にある方法で工夫もできます。たとえばチーム内で「このプロジェクトはこの配色」と決めておけば、各自が手動でテーマを切り替えるだけで統一感は出せます。
室谷代表取締役プロジェクト管理としてはアナログでも、ルール化すれば機能不足を補える。実際、小さなチームなら十分回るんですよ。
企業のブランドカラーをテーマに取り入れるアイデア
室谷代表取締役チームのアイデンティティをテーマに込めると、結構モチベーション変わりますよ。企業ブランドの色をエディタに取り入れてる現場があります。
テキトー教師DotAI 認定講師カスタムテーマを作れるのはVS Codeベースならではの強みですね。フォーラムでも、配色を独自に調整する方法が紹介されていました。
室谷代表取締役ブランドカラーのエディタ、採用面接のデモでも映えますし、社内の帰属意識にも効きます。コストゼロでブランドを浸透させられるのは地味に大きい。
テキトー教師DotAI 認定講師ただ、AIのチャット画面やコード内のリンク色は、テーマ設定が反映されない場面があるみたいで、その辺は今後の改善待ちですね。
よくある質問
Q1. テーマとフォントやアイコンの見た目は別々に設定できますか？
テキトー教師DotAI 認定講師これ、意外と混同されがちなんですけど、テーマは色味の話で、フォントやアイコンは別の設定なんですよね。現場で「テーマ変えたのに字が変わらない」って相談されることもあります。
室谷代表取締役たしかに、エディタの見た目って色・フォント・アイコン・レイアウトが重なって成り立ってますからね。MYUUUの開発メンバーも、テーマは統一しつつフォントだけ各自好みにしてます。
分離されてるからこそ、チームで合わせる部分と個人に委ねる部分を切り分けやすいんですよね。
分離されてるからこそ、チームで合わせる部分と個人に委ねる部分を切り分けやすいんですよね。
Q2. デフォルトのテーマに戻したい場合はどうすればいいですか？
テキトー教師DotAI 認定講師戻し方はシンプルで、テーマ設定の画面から標準のテーマを選び直せばOKです。ただ、一度あちこちいじって「どの状態がデフォルトだったか分からない」っていう人は、設定をリセットする方法もあるので、焦らずに済みますよ。
室谷代表取締役初期状態に戻すのって、意外と大事な操作ですよね。設定を何度も変えてると、自分が何を変えたか分からなくなることがありますから。
そういうときは、思い切ってリセットするのが早道だったりします。
そういうときは、思い切ってリセットするのが早道だったりします。
Q3. VS Codeで使っていたテーマはそのまま使えますか？
室谷代表取締役CursorってVS Codeベースのエディタなんで、VS Code用のテーマがそのまま使えるケースが多いんですよね。とはいえ、バージョンや環境の違いで挙動が変わることもあるので、完全な互換性を保証するわけではないと思っておいたほうがいいです。
テキトー教師DotAI 認定講師たしかに、エクステンションとしてインストールする形なら、ほぼ同じ感覚で使えることが多いですね。ただ、テーマによっては細かい配色が微妙にズレて見えることもあるので、気になる人は導入後に一度確認するのがおすすめです。
Q4. テーマを変更すると動作が重くなったりしますか？
テキトー教師DotAI 認定講師基本的には、テーマは色の指定を切り替えているだけなんで、動作への影響はほぼ気にしなくていいですよ。むしろ、拡張機能を大量に入れてるほうが重くなるケースはよくあります。
室谷代表取締役パフォーマンスって、テーマより原因になりやすいものが他にあるんですよね。エディタの動作が重いと感じたら、テーマのせいにする前に拡張機能の見直しから始めるのが効率的です。
ROIで考えると、そっちのほうが解決までの時間が短い。
ROIで考えると、そっちのほうが解決までの時間が短い。
Q5. テーマの切り替えをキーボードショートカットで素早く行えますか？
室谷代表取締役テーマ切り替えは、メニューからでも設定画面からでもできるんですが、頻繁に切り替える人はショートカットを覚えると作業が速くなりますよ。ただ、ショートカットは環境やバージョンによって違うこともあるので、お使いの環境の公式情報で確認するのが確実です。
テキトー教師DotAI 認定講師ダークとライトをその日の気分や照明に合わせて切り替える人には、ショートカットはかなり効きますね。最初は設定画面からでいいので、慣れてきたら覚えると時短になります。
まとめ
室谷代表取締役Cursorのテーマっていうと見た目の話に聞こえますけど、実は作業効率に直結するんですよね。色の好みって、コードを読むスピードや疲れ具合にけっこう影響しますから。
テキトー教師DotAI 認定講師そうですね。最初はプリセットのテーマから選ぶだけで十分で、慣れてきたら自分好みに配色を調整していくのがおすすめです。
いきなり完璧を目指さなくて大丈夫ですよ。
いきなり完璧を目指さなくて大丈夫ですよ。
室谷代表取締役あとは、チームで使うならテーマの位置づけを決めておくと混乱しませんよね。どこまでを標準にするか、どこを個人の自由にするか。
この線引きがあるだけで、開発環境のストレスがだいぶ減ります。
この線引きがあるだけで、開発環境のストレスがだいぶ減ります。
テキトー教師DotAI 認定講師最後に、テーマを変えても「あれ、反映されてないな」ってときは、設定の保存や再読み込みを試してみてください。それでもダメなら、公式のドキュメントやサポート情報を確認するのが近道です。
室谷代表取締役まずは気になるテーマをひとつ試してみるのが一番ですよ。合わなければまた変えればいい。
テーマ変更は気軽にできるので、自分が一番コードに集中できる色を見つけてみてください。
テーマ変更は気軽にできるので、自分が一番コードに集中できる色を見つけてみてください。
