Mastodonを自分色(not 比喩表現)にする。

はじめに

先日、自分専用のMastodonインスタンスをセットアップしました。
ただ、自分の他のサイトは緑を基調とした色合いになってまして…せっかくだからMastodonも緑にしようと思ったわけでございます。

方法

GitHubで差分を見てもらえれば一目瞭然かと思いますが、一応解説をば。

SCSSをいじる

app/javascript/styles というディレクトリに色々と入っていますが、色を規定しているのは次の3つのファイルのみです(筆者調
べ):

• app/javascript/styles/contrast/variables.scss
• app/javascript/styles/mastodon-light/variables.scss
• app/javascript/styles/mastodon/variables.scss

しかも、色は最大9色ぐらいしか定義されていないので(あとは関数で明るさをいじったりしているよう)、そこだけ自分の好きな色に変えれば大丈夫。たとえば緑っぽくしたければ、次のようにすればOK。

$classic-base-color: #222f22;
$classic-primary-color: #a7d6a7;
$classic-secondary-color: #dae8d9;
$classic-highlight-color: #50d354;
$ui-base-lighter-color: #b4cfb0;
$ui-primary-color: #9fed9b;
$dark-text-color: #455d44;
$action-button-color: #658460;
$light-text-color: #465d44;

画像をいじる

画像(PNG, SVG, ICO)も変える必要があります。単純に色合いだけを変えたいのであれば、画像編集ソフトで色回転をすればいいでしょう。色を変えた方がいいだろう画像は次のとおりです:

• いろいろなアイコン: app/javascript/icons ディレクトリにある画像
• いわゆるファビコン: public/favicon.ico
• アバター(未設定のユーザー用): public/avatars/original/missing.png

おわりに

色を変えるだけなら意外と簡単でしたね。
引き続きHappy Mastodon改造ライフをお楽しみください。