【入門編】VS Codeの「ダークモード疲れ」を解消する：時間帯や室内の照度に応じたテーマ自動切り替えの仕組み – 軽量・高機能テキストエディタ生産性向上バイブル

こんにちは！開発現場を渡り歩く先輩エンジニアです。

毎日のようにVS Codeを開いてコードを書き続けていると、ふと「目がしょぼしょぼする」「夕方になると画面がやけに眩しく感じる」といった、いわゆる“ダークモード疲れ”に襲われた経験はありませんか？

世の中の多くのプログラマは「エンジニア＝ダークモード」という固定観念から、一日中真っ黒な背景に高コントラストな色彩のテーマを使い続けています。しかし、人間の目は時間帯や部屋の明るさに応じて、光の受け止め方が劇的に変化します。

朝の爽やかな光の中、真昼の強烈な室内の照度、そして夜間の間接照明。これらすべての環境に対して「同じ真っ黒なエディタ」を突きつけるのは、あなたの網膜や脳にとって、何時間もヘッドライトを直視し続けるようなものなのです。

今回は、単にOSの設定に追従するだけでなく、時間帯やあなたの作業環境の照度に応じてVS Codeのテーマを最適に自動切り替え、眼精疲労を極限まで抑え込むためのアーキテクチャを解説します。

これをマスターすれば、毎日のコーディング終わりの疲労感が劇的に変わり、目の奥の重い痛みに悩まされることがなくなりますよ。さあ、あなたの開発環境を「目に優しい最高峰の空間」へとアップデートしていきましょう！

—

1. VS Codeとテーマ自動切替の全体像

私たちが目指すのは、「時間を味方につけた動的な視覚環境」です。

一般的にVS Codeのテーマ切り替えは、OS（macOSやWindows）のダークモード・ライトモード連動機能（`window.autoDetectColorScheme`）に頼りがちです。しかしこれには大きな弱点があります。

• 「夕方なのにOSがまだダークモードにしてくれず、部屋が暗くなったのに画面だけが眩しい」
• 「朝、カーテンを開けて明るい部屋にいるのに、OSの設定を変えるのを忘れて見づらい」

そこで、本記事では「時間連動型の拡張機能」と「VS Codeの内部設定（JSON）」を組み合わせ、あなたの生体リズムや室内の照度変化に完璧にシンクロする自動切替システムを構築します。

—

2. 最重要の基礎セットアップ：環境の準備

まずは、今回の自動化の土台となるVS Codeの基礎設定と、時間をトリガーにテーマを制御する拡張機能の導入を行います。

拡張機能のインストール

VS Codeの拡張機能マーケットプレイス（`Ctrl + Shift + X` または `Cmd + Shift + X`）を開き、以下の拡張機能をインストールしてください。

• テーマ自動切り替えの決定版： `Time Theme` または `Auto Theme`
• 今回は、時間帯（何時何分）をトリガーにして明示的にテーマを指定できる拡張機能 「Time Theme」 を採用します。

※もしお使いの環境で「昼は明るく、夜は暗く」というOS連動をシンプルに行いたい場合は、標準機能の `window.autoDetectColorScheme` をベースにしつつ、時間帯の微調整を拡張機能で行うのが最もロジカルで破綻のないアプローチです。

—

3. 「暗すぎる・明るすぎる」を防ぐ！最適テーマの選び方

自動切り替えを成功させるためには、切り替え先の「昼用テーマ」と「夜用テーマ」の選定が極めて重要です。ここでコントラストの強すぎるものを選ぶと、切り替わった瞬間に目が驚いてしまいます。

ここでは、私の現場でも実績のある、目に優しい組み合わせを例に挙げます。

• 昼用（日中・明るい部屋）： GitHub Light Default や Solarized Light などの、紙の書籍に近い落ち着いた低コントラスト・ライトテーマ。
• 夜用（夜間・暗い部屋）： One Dark Pro や 深度のあるネイビーを基調とした、青色光（ブルーライト）を抑えたダークテーマ。

—

4. 核心：`settings.json` による時間連動・自動切り替えの設計

ここからが本記事のハイライトです。VS Codeの心臓部である `settings.json`（設定ファイル）を直接書き換え、時間帯に応じたテーマのルーティングを行います。

`Ctrl + Shift + P`（Macは `Cmd + Shift + P`）を押してコマンドパレットを開き、「Preferences: Open User Settings (JSON)」 を選択してください。

以下の設定を追加（または統合）します。

{
// ==========================================
// 1. 基本的な外観とカラーテーマの初期設定
// ==========================================

// デフォルトのダークテーマ（夜間やフォールバック用）
“workbench.colorTheme”: “One Dark Pro”,

// OSのカラーテーマ変更を自動検知する設定を有効化
“window.autoDetectColorScheme”: true,

// OSがライトモードの時に適用するテーマ
“workbench.preferredLightTheme”: “GitHub Light Default”,

// OSがダークモードの時に適用するテーマ
“workbench.preferredDarkTheme”: “One Dark Pro”,

// ==========================================
// 2. 時間帯・環境に応じた拡張機能（Time Theme等）の制御設定
// ==========================================

// 朝8:00から夕方17:59までは、視認性が高く目に優しいライトテーマを強制適用
// 夜18:00から翌朝7:59までは、網膜への刺激を抑えるダークテーマへ自動移行
“time-theme.themes”: {
“08:00”: “GitHub Light Default”,
“18:00”: “One Dark Pro”
},

// ==========================================
// 3. 眼精疲労を根本から断つディスプレイ・エディタ補助設定
// ==========================================

// フォントのレンダリングを最適化し、文字の輪郭を滑らかにして目のピント調整負担を軽減
“editor.fontFamily”: “Fira Code, Menlo, Monaco, ‘Courier New’, monospace”,
“editor.fontLigatures”: true, // リガチャー（合字）を有効化し、コードの視認性を向上
“editor.fontSize”: 14,
“editor.lineHeight”: 24, // 行間に十分な余裕を持たせ、文字が詰まって見えるストレスを排除

// カーソルのアニメーションを滑らかにし、画面内の視線移動を見失いにくくする
“editor.cursorSmoothCaretAnimation”: “on”,

// アクティブな行を微かにハイライトし、自分が今どこを見ているかを脳に迷わせない
“editor.renderLineHighlight”: “all”
}

設定値の深い解説

• `window.autoDetectColorScheme`:

OSレベルでのダークモード・ライトモードの切り替え（例えば、macOSの「サンセットからサンライズまでダーク」機能など）をVS Codeがリアルタイムにフックし、`preferredLightTheme` と `preferredDarkTheme` を動的に切り替えます。

• `time-theme.themes`:

OSの設定とは独立して、室内の照明が切り替わる時間（例：18時）を基準に、強制的にテーマのJSONを書き換えるトリガーです。これにより、OSの設定を変え忘れても、エディタ側が勝手に「夜モード」へシフトしてくれます。

• フォントと行間のチューニング (`editor.fontFamily`, `lineHeight`):

意外に見落としがちですが、文字のガタつきや行の詰まりは、無意識のうちに脳にストレスを与え、眼精疲労の主原因になります。`Fira Code` などの高品質な等幅フォントと適切な行間（`lineHeight: 24`）の組み合わせは、エンジニアの目を守る最強の盾となります。

—

5. 動作確認：正しくテーマが連動しているかのテスト

設定が完了したら、システムが意図通りに動作するか「HelloWorld」ならぬ「Hello Theme」の動作確認を行いましょう。

1. 手動テスト（即時反映の確認）：

• コマンドパレット（`Ctrl + Shift + P` / `Cmd + Shift + P`）を開き、`Preferences: Color Theme` と入力してEnterを押します。
• リストから「GitHub Light Default」や「One Dark Pro」を選択し、一瞬でテーマが切り替わることを確認します。

2. 時間トリガーのシミュレーション：

• `settings.json` の `time-theme.themes` の時間を、「現在時刻の1分後」に一時的に書き換えてみてください（例：現在が 14:30 なら `”14:31″: “GitHub Light Default”` など）。
• 設定を保存（`Ctrl + S` / `Cmd + S`）し、指定した時刻になった瞬間に、エディタの背景色やUIがスッと切り替わる様子を目撃してください。
• 確認が終わったら、時間は元の設定（`08:00` や `18:00`）に戻すのをお忘れなく！

—

6. おわりに：エンジニアの身体は最大の資本である

今回は、VS Codeの「ダークモード疲れ」を解消するための時間連動テーマ自動切り替えの仕組みと、眼精疲労を軽減するエディタの基礎設計について解説しました。

私たちが日々書くコードの質は、集中力の深さに比例します。そして、その集中力は「肉体的な快適さ」、特に「目の健康」という土台なしには絶対に維持できません。

「たかがテーマの切り替え」と侮るなかれ。このわずかな環境構築の投資が、あなたの毎日のコーディング体験を劇的に快適にし、長時間の作業でも疲れ知らずの瞳をもたらしてくれます。

今日からこの設定を取り入れて、あなたの開発環境を最高に優しく、そして知的な空間へと生まれ変わらせてください。それでは、快適なコーディングライフを！