Stylus を使ってサイトデザインを自分好みに変えよう、って話です。今回は GitHub README のスタイルをいじります。

Stylus

Stylus は閲覧するサイトの CSS を変更できるブラウザ拡張機能です。

CSS

ブラウザの開発者ツールを使って変更したい CSS クラスを探し、Stylus に以下を登録します。

.markdown-body h2 {
    margin-top: 2rem;
    border-bottom: solid 1px #FF7F50 !important;
}

.markdown-body h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-left: 0.5em;
    border-left: solid 4px #FF7F50 !important;
}

.markdown-body em {
    text-decoration: underline;
}

.markdown-body strong {
    text-decoration: underline;
}

.Label--outline {
    background-color: #FFA500;
}

こんな感じになります

Before	After

個人的に <h2> と <h3> が判別しにくかったので、色をつけてマージンを追加しています。

あと Private repository のバッジが見にくいので色を付けました。

リポジトリ一覧ページ	個別リポジトリページ

オススメの公開テーマ

Qiita Dark

Qiita Dark Theme - もう眩しくないよ - Qiita

GitHub Dark

StylishThemes/GitHub-Dark: Dark GitHub style

サイトデザインに不満があるからといって、サービス運営側に要望を出しても解決されることはまずないでしょうから、オリジナルのスタイルを適用しちゃいましょう。