zelo72
/
documentation
mirror of https://github.com/mastodon/documentation
1
0
Fork 0
Code Issues 6 Releases Wiki Activity

Add instructions for custom themes (#421) 

* Add instructions for custom themes

* Remove notes about custom.scss
This commit is contained in:
Nolan Lawson 2017-10-18 07:32:06 -07:00 committed by wxcafé
parent 277a1e937d
commit 3a3b8b30bc
1 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
Running-Mastodon/Customizing.md
View File

@ -5,7 +5,9 @@ Customizing your instance
You can make the application load a different CSS file than the default, you can optionally choose to use that mechanism to adjust variables and re-import the application CSS from your own CSS. Here is what you need to do:
2. Create `app/javascript/styles/custom.scss`. Here you can write whatever SCSS you want.
1. Create `app/javascript/styles/custom.scss`. Here you can write whatever SCSS you want.
2. Add `@import 'application';` to the end of the SCSS file.
2. _(As of Mastodon 2.0.0)_ Update `config/themes.yml` to contain `default: styles/custom.scss`.
3. Restart your webpack-dev-server (if you're in development mode) for it to be recognized and start live reloading. Naturally, in production you'll need to compile assets and restart for the changes to take effect.
## Changing colors and other variables
@ -36,6 +38,34 @@ $base-shadow-color: $color8;
$base-overlay-background: $color8;
```
## Multiple themes
As of Mastodon 2.0.0, you can provide multiple themes for your users to choose from. Modify `config/themes.yml` like so:
```yml
default: styles/awesome_theme.scss
mastodon: styles/application.scss
another: style/another_theme.scss
```
Note that any custom theme should call `@import "application";`.
One of these themes **must** be called `default`, and it will be the default one for your users. By default, the `default` theme is called "Mastodon" in the UI. To change this, modify `config/locales/en.yml` and change:
```yml
themes:
default: "Mastodon"
```
to e.g.:
```yml
themes:
default: "Awesome Theme"
mastodon: "Mastodon Default Theme"
another: "Another Theme"
```
## Link to source code
Mastodon is distributed under the terms of AGPL. The source code must be offered to its user. To easily achieve this on your instance, an initializer like below can be added, as a file like `config/initializer/source.rb`, to customize the links at the bottom of the `/about` and `/about/more` pages: