Your first theme

A theme changes how Nari looks. It can:

• recolor the whole app, and decide whether colors still follow the album art
• replace Nari’s icons
• show its own image, GIF or video as the background, and a different one on Now Playing
• swap the font and how round the panels are
• bring plugins along, for anything a theme alone can’t do

All of it lives in one manifest.json, next to the images and fonts it uses.

Try the theme editorPick colors, a background, a font and icons, see them on Nari's own screens, and export a .naritheme without writing any JSON.

Make one

1. Create a folder named after your theme’s id, like midnight, with a manifest.json in it:

   midnight/manifest.json

   {
     "id": "midnight",
     "name": "Midnight",
     "api": 1,
     "mode": "dark",
     "colors": {
       "background": "#0d0d14",
       "foreground": "#ecebff",
       "panel_bg": "#20203a",
       "accent_bg": "#ff4f8b"
     }
   }

   The id must match the folder name. api is the theme format version, 1 for now.

2. Zip the folder and rename the .zip to .naritheme. The files can sit at the root of the zip or inside one folder, like the zips GitHub makes.

3. In Nari, open Settings → Themes → Install theme, pick the file, then tap the theme and Apply it.

4. Change something, zip it again and install it again. Installing a newer version of the applied theme updates it in place.

Folder layout

Only manifest.json is required. The manifest points at everything else, so most folders can have any name. Only assets/ and plugins/ have fixed names.

• Directorymidnight/

  • manifest.json
  • Directorypreview/ icon and screenshots shown in Settings

    • icon.png
    • 1.jpg
  • Directoryassets/

    • Directoryicons/ replaces Nari’s icons

      • play.svg
  • Directorybackgrounds/ images or videos for the background

    • aurora.gif
  • Directoryfonts/ ttf, otf, woff or woff2

    • …
  • Directoryplugins/ regular plugin folders

    • Directoryradio_browser/

      • …

Installed themes live in user://themes/<id>/.

Every theme in the theme store can be downloaded and opened as a zip to see how it’s made, or opened in the theme editor with Import theme.

Next

Read about the manifest for every field, then colors for the color names. When it’s ready, publish it so everyone can find it in the store.