Jellyfin themes and custom CSS

Updated October 6, 2026 · 5 min read

Jellyfin's web interface looks the same on every server until you change it. Jellyfin themes and custom CSS let you restyle it, usually with one line pasted into a box. Here is where that box is, what the line does, what it can break, and how to take it back out.

Two places to change the look

For everyone on the server. An administrator can add CSS that every browser loads. In Jellyfin 10.11 and later it is under Dashboard > Branding, in the box called Custom CSS code. Older versions kept the same box under Dashboard > General.

For one person, on one device. Each user has Settings > Display. There, Theme picks one of Jellyfin's built-in color schemes, and a second Custom CSS code box applies only to that browser or app. The same page has Disable server-provided custom CSS code, which switches the server-wide theme off for that person only.

The built-in themes are safe: they ship with Jellyfin and are updated with it. Everything else on this page is about custom CSS, which is where community themes live.

How a one-line theme works

CSS is the language that sets colors, spacing and layout on a web page. Community themes are large CSS files hosted on GitHub. Instead of pasting thousands of lines, you paste one @import line that tells the browser to fetch the theme from its address. For example, the ElegantFin project asks you to paste:

@import url("https://cdn.jsdelivr.net/gh/lscambo13/ElegantFin@main/Theme/ElegantFin-jellyfin-theme-build-latest-minified.css");

Three things follow from that, and Jellyfin's own docs point out the first one:

• Each viewer's device fetches the file, not the server. If a phone or TV can't reach the theme's host, it gets the plain look. On a network with no internet, imported themes don't load at all.
• The theme can change under you. An address ending in @main follows the author's latest version. That's how fixes arrive, and also how surprises arrive.
• A third party serves part of your page. The CDN sees requests from your viewers' devices. Use themes from well-known projects only.

Well-known community themes include ElegantFin and Ultrachromic, which offers several presets and optional add-ons, each its own @import line. Both are made by volunteers, not by Jellyfin. Check a theme's page for the Jellyfin version it supports before you use it.

Add a theme by hand

1. Pick a theme and read its page. Check that it supports your Jellyfin version, and copy the @import line it gives.
2. Save what's there now. Open Dashboard > Branding. If the Custom CSS code box isn't empty, copy its contents into a text file first.
3. Paste the line. Put the @import line at the very top of the box. Imports placed after other CSS are ignored by browsers.
4. Save and reload. Click Save, then reload the page with Ctrl+F5 (Cmd+Shift+R on a Mac) so the browser doesn't keep the old style.
5. Check other devices. Open Jellyfin on a phone and on whatever else people use. Look at the home screen, a film's page, the player and the Dashboard.

Which apps it reaches

Jellyfin's documentation is clear that custom CSS only applies to clients that use Jellyfin Web. That means:

• It changes: Jellyfin in any browser, and apps that show Jellyfin's web interface inside them.
• It doesn't change: apps that draw their own screens, such as Swiftfin on iPhone and Apple TV, Infuse, and other native TV apps.

So a theme is mostly for people who watch in a browser or a web-based app. Not sure which app each device uses? See the best Jellyfin app for each device.

Risks, and how to undo

• Updates break themes. Themes target page parts by their names, and Jellyfin renames and rearranges them between versions. After an update, buttons can disappear or text can turn unreadable until the theme's author catches up.
• Weak TVs and old phones slow down. Blur and shadow effects look good on a laptop and can make a cheap streaming stick sluggish.
• The Dashboard can become hard to use. A broken theme styles the admin pages too.

To undo, open Dashboard > Branding, clear the Custom CSS code box (or paste back what you saved), click Save and reload. If the theme has made the Dashboard unusable, go to your own Settings > Display, tick Disable server-provided custom CSS code, and the Dashboard comes back in plain style so you can clear the box. Untick it afterwards.

Themes are one part of making Jellyfin pleasant to use; a home screen like Plex and Skip intro and credits are others.

Questions