# Abyss: a dark Jellyfin theme that re-skins the whole web client

> Abyss is a CSS theme for Jellyfin that covers almost every surface of the web client, with a one-click installer that applies the stylesheet, locks the client and dashboard to Dark, reorders the home sections and adds a Spotlight banner. It is a skin over a moving target, so the installer and the CSS variables are the parts worth understanding before you trust it.

**AumGupta/abyss-jellyfin** — Minimal Dark Theme for Jellyfin [Customisable]

- Repository: https://github.com/AumGupta/abyss-jellyfin
- Website: https://aumgupta.github.io/abyss-jellyfin/
- Stars: 801 · Forks: 100
- Language: CSS
- License: MIT
- Published: 2026-10-20 · Updated: 2026-10-20 · Language: en
- Canonical page: https://hysenlabs.com/projects/aumgupta-abyss-jellyfin

## A skin over the web client, not a Jellyfin plugin

Abyss is described as a clean and minimal theme for Jellyfin with frosted glass surfaces, refined typography, smooth animations and a minimal design language that re-skins Jellyfin almost exhaustively. The mechanics matter here. It is a stylesheet, abyss.css, plus an installer script, and it reaches into the Jellyfin instance to apply the CSS, set the client and dashboard themes to Dark, configure the home section order, and install the Spotlight add-on. It supports Jellyfin 12 by styling both the Modern React and MUI interface and the Desktop legacy interface, using stable component classes and Jellyfin theme variables. The repository topics are jellyfin-client, jellyfin-theme and jellyfin-web, and the primary language is CSS, which tells you the whole product is a layer of stylesheet over an existing application rather than a plugin with its own server-side logic.

## The one-line import is a preview, not the theme

There is a quick way to see the theme and a real way to install it, and the README is careful to distinguish them. The quick preview is a single import you paste into the branding section of your Jellyfin dashboard:

```css
@import url('https://cdn.jsdelivr.net/gh/AumGupta/abyss-jellyfin@main/abyss.css');
```

The note underneath says this import is useful only to have a look at how the theme looks, and that to actually get the full feel of Abyss you should follow all the steps in the setup guide. The difference is the rest of the work: the theme selectors, the home section order, and the Spotlight add-on are not something a stylesheet can do on its own, so the preview shows you the visual layer while the installer applies the behaviour. The other install routes are a Docker path and a fully manual path, both documented in the same SETUP.md file, and there is a plugin support section for people running additional plugins such as Jellyfin Enhanced or Media Bar Enhanced.

## The installer asks for admin credentials, and explains why

The Windows installer asks for your Jellyfin server URL, admin username and admin password. The README addresses this directly: the credentials are sent directly to your own local Jellyfin server using the standard Jellyfin API, the same API your browser uses when you log in, nothing is sent to any external server, and the credentials are used only to authenticate and apply theme settings and are never stored anywhere. The transparency argument is that the installer is automatically compiled from setup.ps1 via GitHub Actions on every release, so you can read every line of setup.ps1 before running it, since it is plain PowerShell with no obfuscation, and you can click through to the Actions log to see exactly which commit produced the exe you downloaded. The Linux and macOS installer is the same idea in shell form, and it requires curl and python3, which the README says are available by default on most Linux distributions.

## Customisation is four CSS variables and a colon root block

The customisation model is deliberately narrow. You override any of the listed variables at the top of your Custom CSS field, after the import line:

```css
:root {
    /* Accent colour: R, G, B only, no rgb() wrapper */
    --abyss-accent: 245, 245, 247;   /* default: near-white */
    /* Same colour, space-separated for Jellyfin 12 / MUI */
    --abyss-accent-channel: 245 245 247;

    /* Corner rounding applied globally */
    --abyss-radius: 24px;            /* default: 24px */

    /* Episode count / indicator pill background */
    --abyss-indicator: 55, 55, 55;   /* default: dark grey */
}
```

The detail in the comments is the useful part. The accent colour has to be given in two shapes, once as R, G, B with no rgb() wrapper and once space-separated for Jellyfin 12 and MUI, so a customisation that only sets one of them will not take effect everywhere. The other two are the global corner radius, which is 24px by default, and the indicator pill background, which is a dark grey by default. Four variables cover a surprising amount, which is what you would expect from a theme that re-themes the interface with CSS custom properties rather than by rewriting markup.

## Frosted glass, Google Sans and a lot of cubic-bezier easing

The visual language is specific enough to describe. The header, drawer, dialogs, toasts and footer all use backdrop-filter blur for a layered, depth-rich interface, and typography is Google Sans throughout with consistent weight and spacing. Every interaction uses carefully tuned cubic-bezier easing, with home sections animating in on load with a staggered fade-up entrance and the favourite heart button getting a spring pop animation. The sidebar is a floating, pill-shaped drawer with rounded corners and a snappy slide animation, and the tab bar is a pill bar with the active tab marked by a filled pill indicator. The coverage claim is the part that tells you how much maintenance this needs. Styling covers cards, indicators, sliders, checkboxes, form inputs, the media player OSD, the now playing bar, chapter thumbnails, the search page, cast thumbnails at nine responsive breakpoints, the login page, detail pages, the metadata manager and the admin dashboard. Every one of those is a surface Jellyfin can change without warning.

## Spotlight turns the home screen into a continue-watching banner

The Spotlight add-on is the one piece of the package that goes beyond styling. It is a cinematic banner on the home screen showing your current Continue Watching item, complete with a backdrop image, metadata pills for rating, runtime and score, and a resume play button. The installer installs it as part of the one-click setup, and the Docker install path includes a script named abyss-spotlight.sh, which the package.json check target syntax-checks alongside the other shell scripts. It is a separate add-on rather than part of the stylesheet, which is consistent with the rest of the design: the theme handles what CSS can handle and the add-on handles what needs Jellyfin's own API.

## Tests exist, and the release cadence is every few weeks

The repository is a small, well-organised project. The root holds abyss.css, setup.ps1 for Windows, setup.sh for Linux and macOS, a styles/ directory, a scripts/ directory with a docker subfolder, a tests/ directory and a docs/ directory. The package.json is not a package to publish, it is marked private and exists to run the checks, with a browser fixture server, a test script using the Node test runner against tests/*.test.mjs, and a check target that runs the tests, syntax-checks docs/script.js, and runs bash -n over setup.sh and scripts/docker/abyss-spotlight.sh. The last push was on 2026-10-05, and the releases are frequent: v1.2.1 on 2026-04-06, v1.2.2 on 2026-08-10 and v1.2.3 on 2026-09-11. The licence is MIT, and the project page is hosted at aumgupta.github.io/abyss-jellyfin with a demo video linked from the README.

## Conclusion

Adopt Abyss if you run Jellyfin 12 and want a dark, dense, heavily themed web interface, and you are willing to reapply it when Jellyfin ships a client update. Do not adopt it if you want a minimal change to the stock interface, because the theme deliberately re-skins almost every element including the admin dashboard, and the theme selectors are locked to Dark after installation. Before you commit, read setup.ps1 on Windows since the README asks you to, check the customisation variables so you can undo the accent colour, and remember that the one-line CSS import is a preview rather than the full theme.

## FAQ

### What is the Abyss Jellyfin theme?

It is a CSS theme for Jellyfin with frosted glass surfaces, Google Sans typography, smooth animations and a minimal design language that re-skins almost every element of the web client. It supports Jellyfin 12 by styling both the Modern React and MUI interface and the Desktop legacy interface.

### How do I install the Abyss Jellyfin theme?

On Linux and macOS you download abyss-setup-vX.X.X.sh from the releases page, run chmod +x on it and then sudo ./abyss-setup-vX.X.X.sh. On Windows you run the equivalent .exe, which applies the CSS, sets the client and dashboard themes to Dark, configures the home section order, installs the Spotlight add-on and restarts Jellyfin.

### Does the Abyss installer send my Jellyfin admin password anywhere?

The README says the credentials are sent directly to your own local Jellyfin server using the standard Jellyfin API, nothing is sent to any external server, and they are used only to authenticate and apply theme settings and are never stored. On Windows the installer is compiled from setup.ps1, which you can read before running.

### Can I customise the colours of the Abyss Jellyfin theme?

Yes, by overriding CSS variables at the top of the Custom CSS field after the import line. The documented variables are --abyss-accent, --abyss-accent-channel, --abyss-radius and --abyss-indicator, and the accent colour has to be given both as R, G, B without an rgb() wrapper and space-separated for Jellyfin 12 and MUI.

## Sources

- [AumGupta/abyss-jellyfin on GitHub](https://github.com/AumGupta/abyss-jellyfin)
- [License: MIT](https://github.com/AumGupta/abyss-jellyfin/blob/main/LICENSE)
- [Project website](https://aumgupta.github.io/abyss-jellyfin/)
- [README](https://github.com/AumGupta/abyss-jellyfin/blob/main/README.md)
- [Releases](https://github.com/AumGupta/abyss-jellyfin/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/aumgupta-abyss-jellyfin