Skip to main content

Jellyfin Themes

Jellyskin​

Description: Vibrante/minimal Jellyfin CSS using custom Icons and more!!, created for Jellyfin web 🎞️, can be used by just one line.

Examples

Login Page

image


Home/Index Page

image


Library Page

image


Title Page

image


Episodes List

image

Installation​

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/main.css");

To enable Logos add this to custom css:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/logo.css");

You can also use Jellyfin-Skin-Manager-Plugin

depreciated

Jellyfin Skin Manager has not been updated for some time and doesn't have the latest JellySkin css available.

Addons

Improve Performance

Remove BackdropFilter

This remove the frosted glass like effect from every place.

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/improvePerformance/removeBackdropFilter.css");

Remove scroll fade

This remove the faded scroll view

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/improvePerformance/removeFadingScroll.css");

Compact Poster

Want to use compact posters instead of normal cards, add this to your custom css:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/compactPosters.css");

Example:

image

Screen scaling

Compact posters might not look as expected for some screen sizes

Horizontal My Media

Brings back the horizontal section for My Media

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/horizontalMyMedia.css");

Using/Changing default gradient accent

If you want want to change the default jellyfin gradient accent to some other preset gradient use:

Location of css files

Remember to put gradient css files below the main.css file import. Also this won't affect the login mesh background's colors.

Mauve:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/gradients/mauve.css");

Example:

image

NightSky:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/gradients/nightSky.css");

Example:

image

Sea:

@import url("https://cdn.jsdelivr.net/npm/jellyskin@latest/dist/addons/gradients/sea.css");

Example:

image

JellySkin Github

Jellyflix​

Description: Jellyfin but Looks, Feels and Smells like Netflix

Examples

Login

image


Homepage

image


Library

image


Movie Title Page

image


TV-Show Title Page

image

Installation​

Auto Update: 
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/default.css");
Custom Version:
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@<version-number>/default.css");

With Logos(recommended):

Auto Update:
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/default.css");
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@latest/addons/Logo.css");
Custom Version:
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@<version-number>/default.css");
@import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@<version-number>/addons/Logo.css");
You can also use Jellyfin colors instead of Netflix red

Jellyfin-Blue:

@import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@9.0.4/addons/jf-blue.css");

Jellyfin-Purple:

@import url("https://cdn.jsdelivr.net/gh/prayag17/JellyFlix@9.0.4/addons/jf-purple.css");

Jellyflix Github

Ultrachromic​

Description: The final form, the true evolution of the chromic theme saga!

Example

image


Login Page

image


Home/Index Page

image


Library Page

image


Title Page

image

Installation​

Multiple iterations and combinations to use with Ultrachromic. Check the github for more combination

Ultrachromic Github

Monochromic​

Description: This theme aims to be minimalistic and somewhat muted in color. Add-ons and custom accent colors are possible, but not entirely supported by this plug-in. Visit the github of the theme for more information

Examples

Login Page

image


Home/Index Page

image


Library Page

image


Title Page

image

Installation​

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/monochromic_preset.css');

Monochromic Github

Kaleidochromic​

Description: A more colorful custom theme for Jellyfin mediaserver created using CSS overrides

Examples

Login Page

image


Home/Index Page

image


Library Page

image


Title Page

image

Installation​

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/kaleidochromic_preset.css');

Kaleidochromic Github

Novachromic​

Description: My third theme for Jellyfin media server, part of the "chromic" family.

Examples

Home/Index Page

image


Library Page

image


Title Page

image


Dashboard Page

image

Installation​

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/presets/novachromic_preset.css');

Novachromic Github

DarkFlix​

Description: DarkFlix For Jellyfin is one of The Best Netflix Dark Theme for Jellyfin Around! Plus a big thanks to @prayag17 for the base and inspiration!

Examples

HomePage

image


Admin Dashboard

image


BoxStyle Actors

image


Video Player UI

image

Installation​

@import url("https://cdn.jsdelivr.net/gh/DevilsDesigns/Jellyfin-DarkFlix-Theme/Darkflix-v5.1.css");

Darkflix Github

Finimalism​

image

image

image

image

image

image

image

image

image

Installation​

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finimalism@main/finimalism7.css");

Finimalism Github

Glassmorphism​

image

image

image

image

Installation​

@import 'https://cdn.jsdelivr.net/gh/alexyle/jellyfin-theme@main/glassmorphism/theme.css';

Glassmorphism Github

Scyfin​

image

image

image

image

image

image

image

Installation​

Scyfin theme

@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css');

Scyfin Backdrops

@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@v1.0.14/CSS/css-scyfin/scyfin-theme-backdrop.css');

Scyfin Github

Jamifin​

Home

image


Details

image


Library

image


Admin

image

🧩 Modules​

You can find our plug-and-play modules in the modules folder. Each module's folder contains an explanation of its purpose and detailed instructions on how to use it.

Installation​

Base

@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/base.css");

Complete

@import url("https://cdn.jsdelivr.net/gh/JamsRepos/Jamfin@latest/theme/complete.css");

🖌️ Customisation​

Not sure if you like our colour scheme? No worries, we allow easy access to our themes colours. Paste these below your import and customise away!

:root {
    /* Colours */
    --theme-background-colour: #101010;
    --theme-sidebar-background-colour: #222222;
    --theme-menu-background-colour: #3a3a3a80;
    --theme-menu-shadow-colour: #fff3;
    --theme-base-colour: #696969;
    --theme--hover-colour: #dbdbdb;
    --theme-restart-colour: #da87287e;
    --theme-shutdown-colour: #c21c1c9d;
    --theme-progress-bar-colour: #cfcfcf;
    --theme-progress-bar-background-colour: #2c2c2c;
    --theme-progress-bar-transcoding-colour: #eb7e25;

    /* General Appearance */
    --theme-roundness: .75rem;
    --theme-blur: 16px;
}

Jamifin Github

Zombie​

Desktop​

Login

image


Homepage

image


Desktop Details

image


Sidebar

image


TV-Services

image


Seasons Page

image

Mobile​

Login

image


Homepage

image


Item Page

image


Details

image


Landscape

image

Tablet​

Portrait

image


Landscape

image

Installation​

@import url('https://cdn.jsdelivr.net/gh/MakD/zombie-release@latest/zombie-min-git.css');

Addon (Alternate View for Mobile-Portrait) (Add below your main import)​

@import URL('https://cdn.jsdelivr.net/gh/MakD/zombie-release@latest/mobile-alt-layout.css');

or

@import url('https://cdn.jsdelivr.net/gh/MakD/zombie-release@latest/mobile-alt-layout-v2.css');

Zombie Github

💻️Buy me a PC Part
💬Join Discord
💻️Buy me a PC Part