Eigenens Mastodon Theme erstellen

Da ich ja mit meinem eigenen Mastodon Server im Fediverse unterwegs bin und auch wann immer möglich alles anpassen/verändern will, habe ich natürlich auch hier versucht das Design anzupassen.
Eigentlich wollte ich gar nicht so viel anpassen, nur die Farben und die Schrift.

Basics

Als erstes habe ich einen Ordner für mein Theme in ~/live/app/javascript/styles erstellt.
In meinem Fall pmj

mkdir ~/live/app/javascript/styles/pmj

Danach habe ich eine pmj.scss auf Basis der application.scss erstellt

cp ~/live/app/javascript/styles/application.scss ~/live/app/javascript/styles/pmj.scss

In dieser habe ich nun die Zeile @import 'mastodon/variables'; zu @import 'pmj/variables'; geändert.
Zusätzlich habe ich noch die Zeile @import 'pmj/font'; nach der Zeile @import 'fonts/roboto-mono'; für mneine eigene Schriftartendefinition eingefügt.
Das ganze sieht dann wie folgt aus:

@import 'mastodon/mixins';
@import 'pmj/variables';
@import 'fonts/roboto';
@import 'fonts/roboto-mono';
@import 'pmj/font';

@import 'mastodon/reset';
@import 'mastodon/basics';
@import 'mastodon/branding';
@import 'mastodon/containers';
@import 'mastodon/lists';
@import 'mastodon/widgets';
@import 'mastodon/forms';
@import 'mastodon/accounts';
@import 'mastodon/statuses';
@import 'mastodon/boost';
@import 'mastodon/components';
@import 'mastodon/polls';
@import 'mastodon/modal';
@import 'mastodon/emoji_picker';
@import 'mastodon/about';
@import 'mastodon/tables';
@import 'mastodon/admin';
@import 'mastodon/dashboard';
@import 'mastodon/rtl';
@import 'mastodon/accessibility';
@import 'mastodon/rich_text';

Nun erstelle ich die pmj/variables.scss auf Basis der mastodon/variables.scss

cp ~/live/app/javascript/styles/mastodon/variables.scss ~/live/app/javascript/styles/pmj/variables.scss

In dieser kann ich nun die einzelnen scss-Variablen nach meinem Gusto anpassen.

Dies sind einfach die Basics, natürlich kann man auch alle anderen SCSS Dateien anpassen.

Fonts

Um eigene Schriftarten einzubinden musste ich erst ziemlich herum experimentieren.
Nach gefühlt 100 mal RAILS_ENV=production bundle exec rails assets:precompile bin ich dann auf folgende Lösung gekommen.

Die Schriftarten werden in ~/live/app/javascript/styles/pmj/fonts gespeichert und dann wie folgt in der pmj/fonts.scss deklariert (ich benutze die Schriftarten Aclonica und Adamina).

@font-face {
    font-family: 'Aclonica';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src:
        local('Aclonica Regular'),
        url('../styles/pmj/fonts/aclonica/aclonica.woff2') format('woff2'),
        url('../styles/pmj/fonts/aclonica/aclonica.woff') format('woff'),
        url('../styles/pmj/fonts/aclonica/aclonica.ttf') format('truetype'),
        url('../styles/pmj/fonts/aclonica/aclonica.svg#Aclonica') format('svg')
}
@font-face {
    font-family:'Adamina';
    font-style:normal;
    font-weight:400;
    font-display: swap;
    src:
        local('Adamina Regular'),
        url('../styles/pmj/fonts/adamina/adamina.woff2') format('woff2'),
        url('../styles/pmj/fonts/adamina/adamina.woff') format('woff'),
        url('../styles/pmj/fonts/adamina/adamina.ttf') format('truetype'),
        url('../styles/pmj/fonts/adamina/adamina.svg#Adamina') format('svg')
    
}

Deklaration

Nun muss ich mein Theme natürlich noch in Mastodon verfügbar machen.
Dazu muss ich einige Dateien anpassen

Die erste Datei die ich anpassen muss ist ~/live/config/themes.yml

Nach den Core-Definitionen von Mastodon selbst füge ich einfach mein Theme ein.
Das Ganze sieht dann so aus:

default: styles/application.scss
contrast: styles/contrast.scss
mastodon-light: styles/mastodon-light.scss
pmj: styles/pmj.scss

Damit das Ganze dann auch noch im Adminbereich auswählbar ist muss man auch noch die entsprechenden Sprachdateien anpassen.
Diese befinden sich im Ordner ~/live/config/locales/ in der Hauptdatei der entsprechenden Sprache z.b. en.yml, de.yml, etc.

Dann sucht man in der entsprechenden Datei nach themes und fügt das eigene Theme dort ein.
zum Beispiel en.yml

[..]
  themes:
    contrast: Mastodon (High contrast)
    default: Mastodon (Dark)
    mastodon-light: Mastodon (Light)
    pmj: PMJ
[..]

Achtung: die Einrückung beachten! Die ist sehr wichtig bei YAML Dateien.

Kompilieren

Nachdem ich das alles angepasst habe muss ich das ganze Kompilieren

cd ~/live
RAILS_ENV=production bundle exec rails assets:precompile

Das war's!
Anschliessend kann man das Theme im Adminbereich auswählen