こんにちは！データベースの海に毎日潜っている君なら、夜遅くまでモニタに向かう日も多いよね。ふと気づくと、目がしょぼしょぼしたり、頭がズキズキしたり……それ、もしかして「pgAdmin 4のまぶしすぎる画面」のせいじゃないかい？
多くの開発者が愛用するデータベース管理ツール「pgAdmin 4」。標準でもダークモードは備わっているけれど、実は「微妙に背景がグレーすぎてコントラストがキツい」「SQLエディタのフォントが小さくて目がチカチカする」といった不満を抱えている人は少なくない。
今回は、そんな日々の眼精疲労から君を救い出すために、pgAdmin 4のCSSを直接ハックして、極上のダーク＆トーンダウン環境を作り上げる極意を伝授しよう。
これをマスターすれば、毎日のデータベース作業が劇的に楽になるだけでなく、自分だけの「要塞」のような洗練された開発環境を手に入れられるよ。さあ、一緒に深掘りしていこう！
—
1. なぜ標準のダークモードでは不十分なのか？
pgAdmin 4はWebテクノロジー（ElectronやFlaskなど）をベースに構築されているデスクトップアプリだ。つまり、中身は巨大な「ブラウザ」みたいなもの。
標準のダークモードは確かに白背景よりはマシだけど、以下のような「惜しい点」がある。
- 純粋な黒（OLEDに優しい真の黒）ではなく、中途半端なチャコールグレーで発光感が残る。
- サイドバーのオブジェクトツリーや、グリッド（データ表示部分）の選択ハイライトがまぶしすぎる。
- SQLエディタ（CodeMirror）の色味が、普段VS CodeやJetBrainsで使っているお気に入りの配色と違いすぎて脳内スイッチの切り替えに疲れる。
「無いなら、自分好みに書き換えちまえ！」というのが、私たちエンジニアの正しいあり方だ。pgAdminは、実はCSSを上書きする仕組み（User CSS）をこっそり持っている。これを解放してやろう。
—
2. 変更するファイルパスの特定と、カスタムCSSの適用
まずは、pgAdminに「俺流のCSS」を読み込ませるための準備をする。
OSによってカスタムCSSを配置すべき場所が決まっているので、自分の環境に合わせてファイルを特定しよう。
📌 カスタムCSSファイルの配置場所
- Windowsの場合:
`%APPDATA%\pgAdmin\pgadmin.css`
(通常は `C:\Users\<ユーザー名>\AppData\Roaming\pgAdmin\pgadmin.css`)
- macOS / Linuxの場合:
`~/.pgadmin/pgadmin.css`
もしこのファイルやディレクトリが存在しない場合は、自分で新しく作成してほしい。pgAdminは起動時にこの `pgadmin.css` が存在するかをチェックし、あれば自動的にグローバルスタイルとして読み込んでくれる。
—
3. 目を労わる！極上のダークモードCSSレシピ
ここからが本番だ。以下のコードを、先ほど作成した `pgadmin.css` にコピペしてほしい。
ただのコピペで終わらせないよう、一行ずつ「どこに効くのか」の丁寧なコメントを入れておいたよ。
/ =================================================================ato
- pgAdmin 4 Ultimate Eye-Care Dark Mode Custom CSS
- 目の限界を超えるエンジニアのための極上ダークテーマ
- ================================================================= /
/ 1. 全体のベースカラーを漆黒（True Blackに近い色）に落とし込む /
body, .pg-panel, .card, .ajs-modal {
background-color: #121212 !important;
color: #e0e0e0 !important;
}
/ 2. サイドバー（オブジェクトツリー）の視認性を高めつつ、まぶしさを消す /
.aciTree {
background-color: #181818 !important;
color: #d4d4d4 !important;
}
/ ツリーのホバー時や選択時の色をマイルドに /
.aciTree .aciTree抚item:hover,
.aciTree .aciTree-item.selected {
background-color: #2a2d2e !important;
color: #ffffff !important;
}
/ 3. SQLエディタ（CodeMirror）の没入感を極限まで高める /
.CodeMirror {
background-color: #1e1e1e !important;
color: #d4d4d4 !important;
font-family: ‘Fira Code’, ‘Cascadia Code’, ‘Consolas’, monospace !important;
font-size: 14px !important; / 少し大きくして目の焦点を合わせやすくする /
line-height: 1.6 !important;
}
/ エディタの行番号エリアを落ち着いた色に /
.CodeMirror-gutters {
background-color: #181818 !important;
border-right: 1px solid #333333 !important;
color: #6e7681 !important;
}
/ アクティブな行のハイライト（優しく光る程度に） /
.CodeMirror-activeline-background {
background-color: #22262a !important;
}
/ 4. データグリッド（テーブルデータ表示部）のコントラスト調整 /
.pg-panel-content .slick-header-columns {
background-color: #252526 !important;
color: #cccccc !important;
border-bottom: 1px solid #3c3c3c !important;
}
.slick-row:even {
background-color: #181818 !important;
}
.slick-row:odd {
background-color: #1e1e1e !important;
}
.slick-row.active {
background-color: #094771 !important; / 選択行は上品な青に /
color: #ffffff !important;
}
/ 5. フォームやボタンの野暮ったい枠線を洗練されたものに /
input, select, textarea {
background-color: #2d2d2d !important;
color: #ffffff !important;
border: 1px solid #3f3f46 !important;
}
この設定のポイント
- フォントの変更: `Fira Code` や `Cascadia Code` などのリガチャ（合字）対応フォントを指定しておくと、`!=` や `>=` などの演算子が美しく表示され、SQLを書くストレスが激減する。
- 行間の調整 (`line-height: 1.6`): ギュッと詰まった文字は目を疲れさせる。適度な余白を持たせることで、コードの視認性が跳ね上がるんだ。
- グリッドの交互背景色: 大量のレコードを目で追うとき、行の色が交互に変わっている（ゼブラ模様）だけで、ミスリーディングを劇的に防げる。
—
4. アップデートの罠を回避する安全な管理手法
「よし、これで快適だ！」と思って数週間後、pgAdminを最新バージョンにアップデートした瞬間……。
「あれ？ カスタムCSSが消えて元のまぶしい画面に戻った！？」
これ、よくある悲劇なんだよね。インストーラーの仕様や環境によっては、アップデート時に設定ファイルが上書きされたり、参照パスがリセットされたりすることがある。
このトラブルを防ぐために、以下の「防衛策」を講じておこう。
1. CSSファイルをクラウドやdotfilesでバージョン管理する
今回作成した `pgadmin.css` 自体を、GitHubやGitLab、あるいはDropboxなどのプライベートリポジトリで管理しておこう。万が一消えても、数秒で復元できる。
2. アップデート手順のルーティン化
pgAdminをアプデする時は、「アプデ実行 ➔ `pgadmin.css` が無事か確認 ➔ 再起動」をワンセットの儀式として覚えておこう。
—
まとめ
データベースエンジニアにとって、開発ツールの使いやすさは「命」と言っても過言ではない。ほんの少しの手間で、毎日の目の疲れやストレスから解放されるなら、やらない手はないよね。
ぜひ今日の仕事終わりにでも、このカスタムCSSを試してみてほしい。「おっ、見やすい……！」と感動するはずだ。
君のデータベースライフが、より快適で知的で満ち足りたものになりますように。
それじゃあ、また次の技術の深淵でお会いしよう！