（小ネタ）GitHubDarkを使ってGitHubをダークモードなUIにする

こんにちは。暑い日が続いていますが皆さんいかがお過ごしでしょうか？僕が住んでいるさいたまーでは連日の猛暑で外に出る気力も起きません。
（因みに弊社はフルリモートなので外に出る事はあまりありません。採用も行っているので、興味のある方は記事の最後かサイドバーへ！）

さて、今回はタイトルの通り、GitHubでダークモードを楽しむと言うちょっとした小ネタをご紹介します。

皆さんダークモード、使っていますか？

「黒い画面」、もといダークモードと言えば普段プログラムを書いたり、CLIで何かをメンテしている我々からすれば昔から馴染みの深い物だったと思います。かくいう僕も、特に何も考えず昔から普段使っているエディタやコンソールは全て黒い画面にして使っています。

ところが昨今ではOLED搭載のスマートフォンの普及もあって、一般の方でもスマホでこのダークモードを使っている人は結構いるんじゃないかな？と予想しています。
また、もうすぐリリースされるiOS 13でも、OSレベルでのダークモードが遂に搭載されるという事で、ますます利用者は増えそうです。

参考:

• 有機EL時代には「ダークモード」を積極採用すべき──Googleが開発者に呼びかけ
• 何故エンジニアは黒背景の画面でプログラムを書くの？

GitHubでもダークモードを使いたい！

さっき書いたとおり、僕はmacOSもダークモードで使っています。なのでエディタだけでなく、様々なアプリが「黒い画面」になっているんですが、ふとある日GitHubの画面の白さが気になってしまいました。

よくよく考えればほぼ毎日使っているのに今更になって気づいたのが遅すぎるくらいですね。

実現方法

普通ググったら良さそうなのを見つけました。その名も「GitHubDark」。そのままですね。

StylishThemes/GitHub-Dark – GitHub

仕組みとしては、 Stylusと言うWebサイトに独自のCSSを適用するブラウザ拡張を使って、ダークモードのCSSを適用しているようです。

ChromeだけでなくFirefox等でも使えるみたいですが、今回はChromeでのインストール例を紹介します。

1. Chrome拡張Stylusをインストール
2. 最新版のgithub-dark.user.cssを開く（開くだけでインストール画面が出る）
3. インストール画面の「Install style」を押す。“Check for updates” はお好みで
4. 完了。あとはGitHubをリロードするだけ

と言う訳でインストールできました。画面はこんな感じになります。かっこいい。

他にも色々と見てみましょう。

良いですね。

感想

控えめに言ってかなり良いです。日々のコードレビュー等が捗ります。しかも自動で更新してくれるので、ちょくちょく変わるGitHubのUIにもうまく追随してくれるので楽です。

余談なんですが、最近だとOSのダークモードの有効状態を識別（メディアクエリ @media (prefers-color-scheme: dark) を使う）してくれるサイトもありますね。
symfony.comとかもその一例です。GitHubも公式で対応してくれると良いなぁ。