Creating New Themes
How to create and contribute with new themes
Themes in Navidrome are simple Material-UI themes. They are basic JS objects, that allow you to override almost every visual aspect of Navidrome’s UI.
Steps to create a new theme:
- Create a new JS file in the
ui/src/themesfolder that exports an object containing your theme. Create the theme based on the ReactAdmin/Material UI documentation below. See the existing themes for examples.
- Add a
themeNameproperty to your theme. This will be displayed in the theme selector
- Add your new theme to the
- 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 formatted with the Prettier rules found in the project (
Also, don’t forget to add lots of screenshots!
Resources for Material-UI theming
- Start reading ReactAdmin documentation
- Color Tool: https://material-ui.com/customization/color/#official-color-tool
Was this page helpful?
Glad to hear it! Please tell us how we can make it even better.
Sorry to hear that. Please tell us how we can improve.
Last modified January 16, 2023: Update creating-themes.md (452d785)