mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-10-31 09:52:26 -05:00
8953f57d88* [feature] User-selectable preset themes * docs, more theme stuff * lint, tests * fix css name * correct some little issues * add another theme * fix poll background * okay last theme i swear * make retrieval of apimodel themes more conventional * preallocate stylesheet slices
30 lines
1.8 KiB
Markdown
30 lines
1.8 KiB
Markdown
# Themes
|
|
|
|
Users on your instance can select a theme for their profile from any css files present in the `web/assets/themes` directory.
|
|
|
|
GoToSocial comes with some theme files already, but you can add more yourself by doing the following:
|
|
|
|
1. Create a file in `web/assets/themes` called (for example) `new-theme.css`.
|
|
2. (Optional) Include the following comment at the top of your theme file to title and describe your theme:
|
|
```css
|
|
/*
|
|
theme-title: My New Theme
|
|
theme-description: This is an example theme
|
|
*/
|
|
```
|
|
You can use any text you like for these fields, but bear in mind whatever you write here will appear in the settings panel to help users when selecting a theme, so keep it short and sweet.
|
|
3. Fill out your custom CSS in the rest of the file. You can use one of the existing CSS files to guide you. Also see [this page](../user_guide/custom_css.md) for some rough guidelines about how to write accessible CSS.
|
|
4. Restart your instance so that the new CSS file is picked up.
|
|
|
|
!!! info
|
|
If you're using Docker for your deployment, you can mount theme files from the host machine into your GoToSocial `web/assets/themes` directory instead, by including entries for them in the `volumes` section of your Docker configuration.
|
|
|
|
For example, say you've created a theme on your host machine at `~/gotosocial/my-themes/new-theme.css`, you could mount that theme into the GoToSocial Docker container in the following way:
|
|
|
|
```yaml
|
|
volumes:
|
|
[.... some other volume entries ...]
|
|
- "~/gotosocial/my-themes/new-theme.css:/gotosocial/web/assets/themes/new-theme.css"
|
|
```
|
|
|
|
Bear in mind if you mount an entire directory to `/gotosocial/web/assets/themes` instead of mounting individual theme files, you'll override the default themes.
|