Creating 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.