これはイイ!GitHubのUIデザインを見やすいダーク系に簡単に変えられる -GitHub Dark

導入は簡単、Win, Mac, Linux対応、Chrome, Safari, Opera, Firefoxなどのブラウザだと更に簡単に導入できる、GitHubのUIデザインをダーク系に変更する「GitHub Dark」を紹介します。

サイトのキャプチャ

GitHub Dark -GitHub

GitHub DarkでUIをダーク系にしてみた

まずは、いつもの見慣れたGitHubのUIデザイン。

サイトのキャプチャ

GitHub Dark -GitHub: いつものUIデザイン

GitHub Darkを適用すると、あっという間にダーク系に変わります。

サイトのキャプチャ

GitHub Dark -GitHub: UIデザインをダーク系に変更

もちろんコードもダーク系で、シンタックスハイライトもテーマにあったカラーが適用されています。

サイトのキャプチャ

GitHub Dark:: index.html -GitHub

GitHub Darkのインストール

インストール方法は、2種類。

  • ブラウザの機能拡張「Stylish」を使用
  • ユーザースタイルシート「github-dark.css」を使用

「Stylish」は任意のスタイルシートを簡単に適用できる機能拡張で、Chrome, Safari, Opera, Firefox, Firefox Mobile用があります。それ以外の環境では、ユーザースタイルシートを使用します。

ここでは、Chromeでのインストール方法を紹介します。

  1. Stylish -Chromeウェブストアで、「Stylish」をインストールします。
  2. 下記ページにアクセスし、「GitHub Dark」のテーマを適用します。
サイトのキャプチャ

userstyles.org - GitHub Dark

あとは、GitHubにアクセスすれば、UIデザインがダーク系に変わります。
「GitHub Dark」のチェックをはずせば、元のカラーで表示されます。

サイトのキャプチャ

※GitHub Darkのパネルは実寸です。

top of page

©2017 coliss