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

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

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

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

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

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

IntelliJ IDEA + iTerm

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

参考:

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をリロードするだけ

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

StylishThemes/GitHub-Dark リポジトリホーム

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

コードビューワー
Diff
Profile

良いですね。

感想

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

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

we are hiring

優秀な技術者と一緒に、好きな場所で働きませんか

株式会社もばらぶでは、優秀で意欲に溢れる方を常に求めています。働く場所は自由、働く時間も柔軟に選択可能です。

現在、以下の職種を募集中です。ご興味のある方は、リンク先をご参照下さい。