Skip to content

Commit

Permalink
docs: basic documentation on creating themes.
Browse files Browse the repository at this point in the history
  • Loading branch information
deluan committed Mar 31, 2020
1 parent 747b5ea commit de43c27
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 1 deletion.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@ music collection from any browser or mobile device. It's like your personal Spot
__Any feedback is welcome!__ If you need/want a new feature, find a bug or think of any way to improve Navidrome,
please fill a [GitHub issue](https://github.com/deluan/navidrome/issues) or join the discussion in our
[Subreddit](https://www.reddit.com/r/navidrome/). If you want to contribute to the project in any other way
(ui/backend dev, translations, themes), please join the chat in our [Discord server](https://discord.gg/xh7j7yF).
(ui/backend dev, translations, [themes](ui/src/themes/README.md)), please join the chat in our
[Discord server](https://discord.gg/xh7j7yF).


## Features
Expand Down
20 changes: 20 additions & 0 deletions ui/src/themes/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
## Creating New Themes

Themes in Navidrome are simple [Material-UI themes](https://material-ui.com/customization/theming/). They are basic JS
objects, that allow you to override almost every aspect of Navidrome's UI.

#### Steps to create a new theme:

1) Create a new JS file in this folder that exports an object containing your theme. Create the theme based on the
ReactAdmin/Material UI documentation below. See the existing themes for examples.
2) Add a `themeName` property to your theme. This will be displayed in the theme selector
3) Add your new theme to the `ui/src/themes/index.js` file
4) Start the application, your new theme should now appear as an option in the theme selector

Before submitting a pull request to include your theme in Navidrome, please test your theme thoroughly and make sure
it is formated with the [Prettier](https://prettier.io/) rules found in the project (`ui/src/.prettierrc.js`)

#### Resources for Material-UI theming

* Start reading [ReactAdmin documentation](https://marmelab.com/react-admin/Theming.html#writing-a-custom-theme)
* Color Tool: https://material-ui.com/customization/color/#official-color-tool

0 comments on commit de43c27

Please sign in to comment.