noellabo's tech blog

@noellaboの技術ブログ

Mastodonにテーマを追加する

Mastodonを自分で設置している人は、テーマ作ってみたいですよね。テーマ。やってみましょう!

手順

だいたいこんな感じです。順番に説明します。

  • テーマの名前を考える
  • ベースにするスタイルを決める
  • ベースから変更する差分のscssを書く
  • テーマの一覧に追加する
  • テーマ名の翻訳を追加する

テーマの名前を考える

今回は、みんなのアイコンが強制的に初期状態の象さんになるテーマを作ってみます(なぜ)。

ということで、テーマの名前は『missing』にします。決めた!

※ ファイル名や識別子として使うので、アルファベットと数字と-あたりで命名してください。

ベースにするスタイルを決める

スタイルは、Mastodonの基本テーマを派生させてつくります。ダーク、ライト、コントラストの3つですね。 なお、ライトやコントラストは、ダークをもとに、ダークと違う部分だけを定義してつくられています。

Mastodonは、開発の過程でどんどんスタイルが書き換えられていきます。新しい定義も増えるし、既存の定義も書き換えられていきます。もし、一から全部自分で定義した場合、この変更にすべて対応しなければなりません。ちょっと現実的じゃないですよね。

既存のベースとなるスタイルは本家にお任せして、変更したい部分だけを定義することを強くオススメします。

ダーク、ライト、コントラストの全てに対応するカスタムテーマを作成することもできます。

ここでは、ダークをベースにします。

ベースから変更する差分のscssを書く

先に、フォルダ構成を確認して、必要なファイルを作成してしまいます。

Mastodonのテーマは、app/javascript/stylesの中にあります。 ここに、missing.scssと、missingフォルダを作成してmissing/diff.scssmissing/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