New Theme

[Crazzzy DucK]

How do you create a new theme in the drop down menu?

[Efficient_Good_5784]

Can you explain what you mean?

You want a drop down menu restyled? Which one?

Or are you saying that there's a drop down menu to select a style?

[Crazzzy DucK]

I would like to create a new entry in the theme's list in the Display settings

https://imgur.com/a/U4S3czb
   

[TheDreadPirate]

You would add a block in config.json located in the jellyfin-web folder. In the jellyfin-web folder there is a "themes" folder that config.json would refer to. In that folder are the images and css for your theme.

Here are the themes from a default config.json.

Code:

"themes": [
    {
      "name": "Apple TV",
      "id": "appletv",
      "color": "#bcbcbc"
    }, {
      "name": "Blue Radiance",
      "id": "blueradiance",
      "color": "#011432"
    }, {
      "name": "Dark",
      "id": "dark",
      "color": "#202020",
      "default": true
    }, {
      "name": "Light",
      "id": "light",
      "color": "#303030"
    }, {
      "name": "Purple Haze",
      "id": "purplehaze",
      "color": "#000420"
    }, {
      "name": "WMC",
      "id": "wmc",
      "color": "#0c2450"
    }
  ],

You'd add another block for your theme. Create a folder in the themes folder with the same name and place your css and images in that new folder.

[Crazzzy DucK]

You would add a block in config.json located in the jellyfin-web folder.  In the jellyfin-web folder there is a "themes" folder that config.json would refer to.  In that folder are the images and css for your theme.

Here are the themes from a default config.json.

Code:

  "themes": [
    {
      "name": "Apple TV",
      "id": "appletv",
      "color": "#bcbcbc"
    }, {
      "name": "Blue Radiance",
      "id": "blueradiance",
      "color": "#011432"
    }, {
      "name": "Dark",
      "id": "dark",
      "color": "#202020",
      "default": true
    }, {
      "name": "Light",
      "id": "light",
      "color": "#303030"
    }, {
      "name": "Purple Haze",
      "id": "purplehaze",
      "color": "#000420"
    }, {
      "name": "WMC",
      "id": "wmc",
      "color": "#0c2450"
    }
  ],

You'd add another block for your theme.  Create a folder in the themes folder with the same name and place your css and images in that new folder.

Annoyingly I had tried that before posting and it didn't work. I retried and it now does. I think the config.json must be super fussy. Thanks for the reply.

However the edits in that folder don't apply to the android app. Not even simple edits to the original dark theme.

[TheDreadPirate]

You may have missed a comma, or left in a comma for the last entry. Something like that.

Try clearing the app cache for the android app? Changes may not get pulled down right away until the cache ages off or you clear the app cache.

[Crazzzy DucK]

Another case of why didn't I think of that, of course that was what was wrong. That has resolved it, thanks again.

   
Don't suppose you know if it's possible to display pages with numbers not just arrows, getting to the last page means a lot of arrow clicking. Disabling paging means the browser hates loading the page at all

[TheDreadPirate]

I haven't looked into anything like that. AFAIK, that is not possible without directly modifying jellyfin-web.