<p align="center"> <img src="https://img.shields.io/github/last-commit/n00bcodr/Jellyfish/main?logo=semantic-release&logoColor=white&label=Last%20Updated&labelColor=black&color=AA5CC3&cacheSeconds=3600" alt="Last Updated"> <img src="https://img.shields.io/github/commit-activity/w/n00bcodr/Jellyfish?logo=git&label=Commit%20Activity&labelColor=black&color=00A4DC&cacheSeconds=600" alt="Commit Activity"> <img src="https://img.shields.io/badge/Jellyfin%20Version-10.10.7-AA5CC3?logo=jellyfin&logoColor=00A4DC&labelColor=black" alt="Jellyfin Version"> </p> <br>

Jellyfish Theme | <img src="./logos/jellyfish.png" alt="jellyfish" width="15%" align="center"/>

This theme is heavily inspired by Flow, Zesty and Ultrachromic I've made a few tweaks and modifications of my own.

Login page backgrounds from @ksushlapush

[!IMPORTANT] This theme is designed for Jellyfin Version 10.10.7, there have been a few changes in version 10.11 which cause alignment issues which I am actively trying to fix.

If you are on Jellyfin Version 10.11, please add the below import statement along with others.

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/jellyfish@main/10.11_fixes.css");

📑 Table of Contents

• Installation
  • Globally for all users
  • User/Device-Specific Theme (Display Settings)
• Theme
  • 📝 Companion Scripts
  • 🎨 Colors:
• Recommended Plugins
• 🧪 Compatibility
• Enjoying Jellyfish?

Installation

Globally for all users

To apply a theme globally to all users via the Dashboard:

1. Navigate to Dashboard Settings
   • Log in as an administrator
   • Go to Dashboard → General → Custom CSS Code
2. Add Import Statement
   • In the Custom CSS field, add all the desired @import statements:

   @import url("https://cdn.jsdelivr.net/gh/n00bcodr/jellyfish@main/theme.css");
   @import url("https://cdn.jsdelivr.net/gh/n00bcodr/jellyfish@main/indicators.css");
   @import url("https://cdn.jsdelivr.net/gh/n00bcodr/jellyfish@main/progress_bar.css");
   /* Any other imports or custom CSS will go here */

3. Save Changes
   • Click Save at the bottom of the page
   • Refresh your browser to see the changes

User/Device-Specific Theme (Display Settings)

Individual users can apply the theme to their own account without affecting others:

1. Navigate to User Settings
   • Click on your profile icon
   • Go to Settings → Display → Custom CSS Code
2. Add Import Statement
   • In the Custom CSS field, add your @import statement:

   @import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/colors/peach.css");

3. Save and Refresh
   • Click Save
   • Refresh the page to apply the theme

[!Note] If you only want to change the color you can simply add import statement for the color you want. <br> If you want to replace the entire CSS for that device, you can choose 'Disable server-provided custom CSS code' and add the CSS statements in user display settings page as you prefer.

---

Theme

Main Theme with JellyBlue as default

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/theme.css");

<table align="center"> <tr> <th style="text-align:center; text-decoration: none;">Home^{<a href="https://github.com/IAmParadox27/jellyfin-plugin-media-bar/" target="_blank" style="text-decoration: none;">**</a>}</th> <th style="text-align:center">Item Details</th> </tr> <tr> <td><img src="screenshots/home.png" width="1000"/></td> <td><img src="screenshots/item-details.png" width="1000"/></td> </tr> <tr> <th style="text-align:center">Login I</th> <th style="text-align:center">Login II</th> </tr> <tr> <td><img src="screenshots/login1.png" width="1000"/></td> <td><img src="screenshots/login2.png" width="1000"/></td> </tr> </table> <p align="center"> ---- </p>

Floating Progress Bar

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/progress_bar.css");

<table align="center"> <tr> <th style="text-align:center">Without</th> <th style="text-align:center">With</th> </tr> <tr> <td><img src="screenshots\progressbar_without.png" width="300"/></td> <td><img src="screenshots\progressbar_with.png" width="300"/></td> </tr> </table> <p align="center"> ---- </p>

Indicators attached in the corner

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/indicators.css");

<table align="center"> <tr> <th style="text-align:center">Without</th> <th style="text-align:center">With</th> </tr> <tr> <td><img src="screenshots\checkbox_without.png" width="250"/></td> <td><img src="screenshots\checkbox_with.png" width="250"/></td> </tr> </table> <p align="center"> ---- </p>

Text Instead of Icons

In item details page, show text for Play, Trailer, Mark as watched etc.

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/icontext.css");

<table align="center"> <tr> <th style="text-align:center">Without</th> <th style="text-align:center">With</th> </tr> <tr> <td><img src="screenshots\icontext_without.png" width="250"/></td> <td><img src="screenshots\icontext_with.png" width="400"/></td> </tr> </table> <p align="center"> ---- </p>

Coloured Parental Ratings

<img src="screenshots\ratings.png" width="500"/>

[!NOTE] Only works with a custom javascript

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/ratings.css");

<p align="center"> ---- </p> <h3><img src="./logos/streamberry.png" alt="streamberry" width="12%" align="center"/> Logo</h3>

Streamberry Logo (inspired by Black Mirror) instead of Jellyfish Logo. Included by default with jellyflix.css

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/streamberry_logo.css");

<p align="center"> ---- </p>

📝 Companion Scripts

Readme.md

---

🎨 Colors

<img src="./colors/swatches/banana.png" alt="banana" width="40%"/>

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/colors/banana.css");

<p align="center"> ---- </p> <img src="./colors/swatches/coal.png" alt="coal" width="40%"/>

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/colors/coal.css");

<p align="center"> ---- </p> <img src="./colors/swatches/coral.png" alt="coral" width="40%"/>

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/colors/coral.css");

<p align="center"> ---- </p> <img src="./colors/swatches/grass.png" alt="grass" width="40%"/>

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/colors/grass.css");

<p align="center"> ---- </p> <img src="./colors/swatches/jellyblue.png" alt="jellyblue" width="40%"/>

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/colors/jellyblue.css");

<p align="center"> ---- </p> <img src="./colors/swatches/jellyflix.png" alt="jellyflix" width="40%"/>

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/colors/jellyflix.css");

<p align="center"> ---- </p> <img src="./colors/swatches/lavender.png" alt="lavender" width="40%"/>

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/colors/lavender.css");

<p align="center"> ---- </p> <img src="./colors/swatches/mint.png" alt="mint" width="40%"/>

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/colors/mint.css");

<p align="center"> ---- </p> <img src="./colors/swatches/ocean.png" alt="ocean" width="40%"/>

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/colors/ocean.css");

<p align="center"> ---- </p> <img src="./colors/swatches/peach.png" alt="peach" width="40%"/>

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/colors/peach.css");

<p align="center"> ---- </p> <img src="./colors/swatches/watermelon.png" alt="watermelon" width="40%"/>

@import url("https://cdn.jsdelivr.net/gh/n00bcodr/Jellyfish/colors/watermelon.css");

Recommended Plugins

To completely replicate the look in the screenshots you'd need the below plugins installed and configured

• jellyfin-plugin-media-bar
• jellyfin-plugin-custom-tabs
• Jellyfin-Enhanced

🧪 Compatibility

• Works for Movies and TV Shows, should work fine mostly for Music and Books, although I don't use Jellyfin for either of them
• Works on both mobile app and web browser, known to have issues / not work on Jellyfin Media Player

[!NOTE] Jellyfin for good reason removed the ability to add custom CSS in the dashboard in version 10.11.

So direct theming for the admin dashboard does not work, and that is expected.

Look at 10.11 Dashboard Theming for a work around. Try at your own risk!

[!NOTE] This theme like many others themes works best only when you have Backdrops and Details Banner enabled in display settings

Get the Plugin JellyfinTweaks for a way to force enable the above two and more on all your devices.

---

<div align="center">

Made with 💜 for Jellyfin and the community

Enjoying Jellyfish?

Checkout my other repos!

[Jellyfin-Enhanc