やりたいこと

  • mastodon のデザイン(配色)を変えてみたい

手順

app/javascript/styles/variables.scss
$classic-base-color: #282c37;         // Midnight Express
$classic-primary-color: #9baec8;      // Echo Blue
$classic-secondary-color: #d9e1e8;    // Pattens Blue
$classic-highlight-color: #2b90d9;    // Summer Sky

mastodon ではここで指定した4色をベースにしているようです。
他の色はベースを元に明度を変更して色を作っているようです。(マウスオーバーで明るさ20%あげる等)

変更のサンプル

緑系

$classic-base-color: #223322;
$classic-primary-color: #aaaa77;
$classic-secondary-color: #d9e1e8;
$classic-highlight-color: #aa77aa;

Screen Shot 2017-06-21 at 11.43.46.png

某白いロボット風カラー

$classic-base-color: #ccc;
$classic-primary-color: #d33;
$classic-secondary-color: #d9e1e8;
$classic-highlight-color: #6667dd;

Screen Shot 2017-06-21 at 11.32.42.png

白背景黒字にするときはテキストカラーの変更を忘れずに

$primary-text-color: $black !default;

自分が立ち上げた、おもちゃ系マストドンでは某黒いロボット風のカラーにして見ました。
https://plasticmodels.tokyo/about

個性的なインスタンスが増えますように。