A clean, minimal dark theme. Frosted glass surfaces,
refined typography, and smooth
transitions.
Every element - from toasts and dialogs to the media player OSD - has been considered and styled. Here is what Abyss brings to your Jellyfin.
Download abyss-setup.exe and run it. It applies the CSS, sets the dark theme,
configures home sections, installs Spotlight, and restarts Jellyfin - fully automatic.
A cinematic banner shows your current Continue Watching item - backdrop image, metadata pills for rating, runtime, and score, and a direct resume button.
Header, drawer, dialogs, toasts, and footer all use backdrop-filter blur. Every
surface layers naturally for depth without feeling heavy.
Home sections fade up with staggered entrance animations on load. The favourite button has a
spring pop. Every interaction uses tuned cubic-bezier easing - nothing snaps.
Cards, sliders, checkboxes, form inputs, the OSD, now playing bar, chapter thumbnails, search page, cast thumbnails at 9 breakpoints, login page, detail pages, and the metadata manager.
Google Sans throughout, with consistent weight and spacing. Section titles, card text, and metadata sit in a clear visual hierarchy at every screen size.
Home
Sidebar
Player
Cards
Card Hover
UI Detail
Movies
Shows
Music
Music Albums
Now Playing
Queue
Override variables after your import. Use the controls on the right to preview changes live in the code.
@import url('https://cdn.jsdelivr.net/gh/AumGupta/abyss-jellyfin@main/abyss.css');
/* Accent colour
Format: R, G, B (no rgb() wrapper)
Used for highlights, active states, progress bars. */
:root {
--abyss-accent: 245, 245, 247;
--abyss-radius: 12px;
--abyss-indicator: 55, 55, 55;
}
/* Custom font: Import any Google Font and override body. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
body {
font-family: "Inter", sans-serif;
}Download the installer and run it. It handles everything.
Windows only · Requires Jellyfin admin credentials
Click on the Three dots icon (…) > Keep > (Keep anyway).
Browsers may warn that the file is unsafe, this happens with new releases that have not yet built a download reputation as safe, but it doesn't imply it is not safe : )
The installer is automatically compiled from setup.ps1 via GitHub Actions on every release. You can read every line
before running — View source.
The installer asks for your Jellyfin server URL, admin username, and password. These are sent directly to your own local Jellyfin server using the standard Jellyfin API, the same one your browser uses when you log in. Nothing is sent to any external server and credentials are never stored anywhere.
Paste into Dashboard → Branding → Custom CSS and save. Then go to Settings → Home and arrange sections: Continue Watching, Next Up, My Media, Recently Added.
@import url('https://cdn.jsdelivr.net/gh/AumGupta/abyss-jellyfin@main/abyss.css');Note: Manual install only applies the theme, the spotlight feature on homescreen doesn't gets added, so if you want the spotlight too, use the setup.