JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 30
  • Score
    100M100P100Q48033F
  • License GPL-3.0-only

A fork of JellySkin

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jellyskin-j0nan) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    JellySkin-J0nan:

    A modification of JellySkin by @prayag17

    NPM_version

    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-j0nan@latest/dist/main.css");

    • To enable Logos add this to custom css:

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

    • You can also use Jellyfin-Skin-Manager-Plugin : https://github.com/danieladov/jellyfin-plugin-skin-manager

    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-j0nan@latest/dist/addons/improvePerformance.css")

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

    • Compact Poster:

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

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

      Example:
      image

    • Using/Changing default gradient accent:

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

      • Mauve

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

        Example:
        image

      • NightSky

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

        Example:
        image

      • Sea

        @import url("https://cdn.jsdelivr.net/npm/jellyskin-j0nan@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);
}

    Screenshot 🖼️ :

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

    Developers

    Remember to change the version in the package.json file.

    npm install
    npm run build
    npm publish