JellySkin

Vibrant, minimal, and sprinkled with tons of animations CSS theme for Jellyfin

ℹ️ Usage :

• To use the JellySkin theme copy the line below into "Dashboard -> General -> Custom CSS" and click save, it will apply immediately server-wide to all users on top of any theme they may be using. To remove the theme, clear the "Custom CSS" field and then click save. NOTE: Theme may not work when using Nginx Reverse Proxy. Scroll down below to learn how to fix this.

  @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 : https://github.com/danieladov/jellyfin-plugin-skin-manager

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

🧩 Addons :

• Improve Performance:

  If you fix performace issues like stutter while normally browsing jellyfin while use JellySkin, try adding this to custom css to fix the issue:

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

  Warning : This removes the background blur from dialogs, gradient scroll in and out "bars" and animated mesh gradient from login page (replaced by linear gradient animation)

• 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:
  

  Warning : 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:

  Note : 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:
    

  • NightSky

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

    Example:
    

  • Sea

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

    Example:
    

  • Custom:

    If you need to add your own gradient use:

    :root {
      --accent1-light: YOUR ACCENT COLOR 1(LIGHTER SHADE);
      --accent1-dark: YOUR ACCENT COLOR 1(DARKER SHADE);
      --accent1-light-opacity1: YOUR ACCENT COLOR 1(WITH OPACITY 0.4);
      --accent2-light: YOUR ACCENT COLOR 2(LIGHTER SHADE);
      --accent2-dark: YOUR ACCENT COLOR 2(DARKER SHADE);
    }

💻 Screenshots :

• Login Page:

  

• Home Screen:

  

• Library View:

  

• Title Screen:

  

• Episode View:

  

• Settings:

  

• Dashboard:

  

• Dialog:

  

❓ Common Problem Fixes :

• Unable to see blured background in Firefox:

  Deaktiviert From version 70: this feature is behind the layout.css.backdrop-filter.enabled preference (needs to be set to true) and the gfx.webrender.all preference (needs to be set to true). To change preferences in Firefox, visit about:config

• Logos are not visible even with logo.css:

  • Get Fanart Plugin, Dashboard -> Plugin -> Catalog
  • Enable Fanart as a metadata provider for your libraries in the library settings, Dashboard -> Library -> Click on 3 dots on your Library -> Manage Library -> Scroll to find Metadata provider and enable Fanart in all of them.
  • Rescan your drive and also enable Replace Metadata and scan

• Background not visible:

  • Go to Settings -> Display -> and enable Backdrops option

• How to report a Bug or request a Feature?

  • Go to https://github.com/prayag17/JellySkin/issues
  • Click on New Issue button
  • Select the appropriate template

• How to contribute:

  • Fork this repository.
  • Add your patch/feature
  • Create a pull request and thats it