Skip to content

Bringing a modern, sleek glassmorphism design to Jellyfin, enhancing your media server's aesthetics.

License

Notifications You must be signed in to change notification settings

JamsRepos/Jamfin

Repository files navigation

Logo

Download Hits

( About - Screenshots )

ℹ️ Welcome

This project brings a modern, sleek glassmorphism design to Jellyfin, enhancing your media server's aesthetics. The theme is designed to be modular and compact, allowing server owners to easily customize their Jellyfin experience.

🧩 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

The following line includes the base theme as well as all our optional modules. This is what our screenshots are based off.

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

If you just want the theme without all our modules integrated, simply copy this line instead. Feel free to add the modules seperately.

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

❓Where do I install it?

Locate the Custom CSS code option under your General settings in the admin panel and simply paste one of the lines above within the box.

If you wish to just install this for yourself only, you can do so by going to your users Display settings and copy the following settings.

  • Disable server-provided custom CSS code

Then enter the theme into the Custom CSS code option and save your settings.

🖌️ 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;
}

❓How do I customise the colours for the module too?

You will find these within the respective modules folder, to cause less confusion they are excluded out of this example.

📷 Screenshots

Home Page Details Page Details Page Admin Page

🙏 Special Thanks

Special thanks to Scyfin for design inspiration.