A modern UI enhancement theme for Jellyfin focused on cleaner layout, smoother animations, and ios like design.
Go to:
Dashboard → General → Branding → Custom CSS
Paste:
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/theme.css");Click Save and refresh the page.
All add-ons require the main theme to be installed first.
You can combine multiple add-ons together.
Custom cover images
Floating Header
Makes the top navigation header float with improved spacing and cleaner visual separation.
Add below the main theme import:
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/Floating-header.css");High Contrast Interface
Improves readability by increasing contrast across interface elements.
high.mp4
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/High-contrast-interface.css");Scale Up Background Animation on Card Hover
Adds a subtle scale animation effect to card backgrounds on hover.
scale-in.mp4
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/Scale-up-animation-on-hover-card.css");Remove Liquid Glass Borders
Removes glass-style border effects for a flatter visual appearance.
liquid.mp4
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/no-liquid-glass-borders.css");Alternative navigation bar
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/alternative-navigation-bar.css");Remove jellyfin logo from header
| before | after |
|---|---|
 |
 |
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/Remove-jellyfin-logo-from-header.css");Manual options
Customize the variables below to suit your preferences. Once edited, paste the code after all existing imports in Dashboard → General → Branding → Custom CSS.
:root{
/*active card indicators*/
--card-indicate-bg:rgba(255, 169, 184, 0.534);
--card-indicate-liquid-glass:rgba(253, 185, 255, 0.39) ;
--card-indicate-shadow:rgba(255, 154, 238, 0.329);
--card-indicate-icon-fill:#ffb0d9;
/*Backgound*/
--background-glow-color:#240000;
/*Backdrop image styling*/
--backdrop-bg-color:rgba(0, 0, 0, 0.87);
--backdrop-filter:blur(20px) saturate(120%) contrast(120%) brightness(110%);
}@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/theme.css");
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/Floating-header.css");
@import url("https://cdn.jsdelivr.net/gh/tromoSM/better-jellyfin-ui@main/options/Scale-up-animation-on-hover-card.css");• Designed for Jellyfin Web, desktop and mobile client • Some animations might not work as expected on desktop(not web) client. • TV client does not support custom css • Add-ons can be combined freely
