[小ネタ]Chrome拡張機能StylusでGitHubリポジトリ名の横のアイコンに色をつける

どうも。 eetann（えーたん） です。

GitHubのリポジトリ名の左のアイコンは、Publicは本アイコン、Privateは鍵アイコンになっています。

本記事では、Publicの本アイコンを赤、Privateの鍵アイコンを黄色に変えることで、区別しやすくします。 さらに、リポジトリ名の右のPublic(Private)ラベルの色もそれぞれ変えます。
区別しやすいかどうかは主観です。

↓Before

↓After

今回はChrome拡張機能Stylusを使い、 CSSを適用することで実現します。ただし、Stylusの使い方は説明しません。

2022/05/17時点での情報で、記事中に登場するGitHubのテーマ設定はDark defaultです。

CSSの調査

アイコンの色を変えるためのCSS

まずは該当箇所のクラスをDevToolsを使って調べます。

本アイコンの要素で使えそうなクラスはocticon-repo、 鍵アイコンの要素ではocticon-lockでした。

また、色はcolor-fg-mutedクラスを使って!importantで優先指定されているため、 後から読み込まれる自前CSSでも!importantにしてやります。

.octicon-repo {
  color: red !important;
}
.octicon-lock {
  color: yellow !important;
}

画面上部のリポジトリ検索ではPrivateでも本アイコンであるため、適用させないことにします。

リポジトリ検索での本アイコンに使われているjs-jump-to-octicon-repoクラスがあれば、 適用させないようにします。

.octicon-lock {
  color: yellow !important;
}
.octicon-repo:not(.js-jump-to-octicon-repo) {
  color: red !important;
}

ラベルの色を変えるためのCSS

リポジトリ名の右側に表示されているPublic(Private)ラベルも同様にして、ボーダーの色を変えます。

PublicとPrivateの識別は、
ラベルの色指定のクラスLabel--secondaryがさきほどのocticon-repo,octicon-lockと兄弟の要素であることを利用します。

.octicon-repo ~ .Label--secondary {
  border-color: red !important;
}
.octicon-lock ~ .Label--secondary {
  border-color: yellow !important;
}

ユーザーのRepositoriesタブではPublicとPrivateを区別するために使える属性が見当たらなかったため、今回は手つかずです。 ただし、新しいリポジトリを作成するボタンでは適用されます。

Chrome拡張機能Stylusに書く

今回のCSSをStylusに書きます。

完成

完成です。

ユーザーのOverviewタブでも反映されています。

参考：一般兄弟結合子 - CSS: カスケーディングスタイルシート | MDN