Mastodonを自分で設置している人は、テーマ作ってみたいですよね。テーマ。やってみましょう！
手順
だいたいこんな感じです。順番に説明します。
- テーマの名前を考える
- ベースにするスタイルを決める
- ベースから変更する差分のscssを書く
- テーマの一覧に追加する
- テーマ名の翻訳を追加する
テーマの名前を考える
今回は、みんなのアイコンが強制的に初期状態の象さんになるテーマを作ってみます（なぜ）。
ということで、テーマの名前は『missing』にします。決めた！
※ ファイル名や識別子として使うので、アルファベットと数字と-あたりで命名してください。
ベースにするスタイルを決める
スタイルは、Mastodonの基本テーマを派生させてつくります。ダーク、ライト、コントラストの3つですね。 なお、ライトやコントラストは、ダークをもとに、ダークと違う部分だけを定義してつくられています。
Mastodonは、開発の過程でどんどんスタイルが書き換えられていきます。新しい定義も増えるし、既存の定義も書き換えられていきます。もし、一から全部自分で定義した場合、この変更にすべて対応しなければなりません。ちょっと現実的じゃないですよね。
既存のベースとなるスタイルは本家にお任せして、変更したい部分だけを定義することを強くオススメします。
ダーク、ライト、コントラストの全てに対応するカスタムテーマを作成することもできます。
ここでは、ダークをベースにします。
ベースから変更する差分のscssを書く
先に、フォルダ構成を確認して、必要なファイルを作成してしまいます。
Mastodonのテーマは、app/javascript/stylesの中にあります。
ここに、missing.scssと、missingフォルダを作成してmissing/diff.scssとmissing/variables.scssを追加します。
app/javascript/styles/missing.scss app/javascript/styles/missing/diff.scss app/javascript/styles/missing/variables.scss
missing.scssはテーマの起点となるファイルで、ベースとなるテーマと、missingフォルダに作成したファイルをインポートして、合成します。
@import 'missing/variables'; @import 'application'; @import 'missing/diff';
missing/variables.scssは、色や書体などの変数を定義するファイルです。mastodon/variables.scssから、変更したいものをコピーしてきて設定してください。scss中で色などを指定する際は、まずこのvariables.scssに含まれる定義を利用します。
なお、missingでは色を変更しないので、このファイルは不要です。（@importから消しちゃっていいです）
missing/diff.scssは、スタイルを変更する差分を定義するファイルです。
missingでは、3つのアバターの定義を書き換えます。
div.account__avatar,
.account__avatar-overlay-base,
.account__avatar-overlay-overlay {
background-image:url(//fedibird.com/avatars/original/missing.png) !important;
}
※ 本来は相対指定したいところですが、ちょっと対応が面倒なのでドメイン直接書いちゃってあります。自分のドメインに修正してください
これでscssの定義は完成です！
テーマの一覧に追加する
Mastodonにテーマとして認識されるように、テーマの定義されているファイルを書き換えます。
config/themes.ymlです。
default: styles/application.scss contrast: styles/contrast.scss mastodon-light: styles/mastodon-light.scss missing: styles/missing.scss
すでに3つのテーマが記載されているので、4つ目に、自分の作ったテーマを追加しましょう！
テーマ名の翻訳を追加する
テーマ名は、わかりやすい表記で一覧に載せたいですよね。
日本のサーバなら、英語と日本語は定義しておきたいところです。
config/locales/en.ymlの中のthemesのところに4つ目を追加。
themes:
contrast: Mastodon (High contrast)
default: Mastodon (Dark)
mastodon-light: Mastodon (Light)
missing: Missing (Dark)
config/locales/ja.ymlの中のthemesのところに4つ目を追加。
themes:
contrast: Mastodon (ハイコントラスト)
default: Mastodon (ダーク)
mastodon-light: Mastodon (ライト)
missing: Missing (ダーク)
以上でOKです。
ちなみにこの翻訳ファイルでは、たまたま4つ目になっているのでわかりづらいですが、アルファベット順に項目を記載します。
ライトテーマベースのものも追加する
一通り手順を説明しているので、ざっくりいきます。
missing-light.scssを定義して、こんな感じに。
@import 'mastodon-light/variables'; @import 'application'; @import 'mastodon-light/diff'; @import 'missing/diff';
config/themes.ymlは
default: styles/application.scss contrast: styles/contrast.scss mastodon-light: styles/mastodon-light.scss missing: styles/missing.scss missing-light: styles/missing-light.scss
config/locales/en.ymlの中のthemesのところに5つ目を追加。
themes:
contrast: Mastodon (High contrast)
default: Mastodon (Dark)
mastodon-light: Mastodon (Light)
missing: Missing (Dark)
missing-light: Missing (Light)
config/locales/ja.ymlの中のthemesのところに5つ目を追加。
themes:
contrast: Mastodon (ハイコントラスト)
default: Mastodon (ダーク)
mastodon-light: Mastodon (ライト)
missing: Missing (ダーク)
missing-light: Missing (ライト)
完成品
GithubにMastodon v3.3.0に対応したコミットを置いておきます。 github.com
