Skip to content

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

License

Notifications You must be signed in to change notification settings

CLOT-LIU/JellySkin

 
 

Repository files navigation

JellySkin

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

npm (tag) jsDelivr hits (npm) GitHub
GitHub Repo stars

ℹ️ 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:
    image

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

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

    loginPage

  • Home Screen:

    Home Screen

  • Library View:

    LibView

  • Title Screen:

    TitleView

  • Episode View:

    EpisodeView

  • Settings:

    SettingsView

  • Dashboard:

    DashboardView

  • Dialog:

    DialogView

❓ 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?

  • How to contribute:

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • SCSS 100.0%