リモート開発メインのソフトウェア開発企業のエンジニアブログです

(小ネタ)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も公式で対応してくれると良いなぁ。

← 前の投稿

AWS Lambda でWebスクレイピングできなかったサイトについて

次の投稿 →

Dropbox 代替の Nextcloud を ConoHa VPS で使用する

コメントを残す