"Why make your Jellyfin look like Netflix when you can make it look like something they wish they had?"

This theme has been built for and tested only on Jellyfin version 10.10.7.

It is not guaranteed to work on newer or older versions and may break your UI. Use at your own risk.

• Modern Dark UI: A clean, dark theme with subtle blur effects.
• Custom Logo Support: Replaces the default Jellyfin logos with Legitflix (see tutorial below).
• Animated "My Media" Banners: An optional animation for your home screen library cards (see tutorial below).
• Media Bar Enhancements: (Optional) Cleans up the media player bar.
• Crunchyroll Subtitle Styling: (Optional) Makes your subtitles look just like Crunchyroll.
• (JS) Hide Home/Favorites: Hides the "Home" and "Favorites" tabs for a cleaner look.
• (JS) Jellyseer Integration: Injects a "Jellyseer" card directly into your "My Media" section.

This theme is installed by pasting the @import URLs directly into your Jellyfin dashboard.

1. Log in to your Jellyfin server as an Administrator.

2. Navigate to the Dashboard (from the hamburger menu).

3. Go to the General section.

4. Scroll down to the Custom CSS box.

5. First, paste the Base Theme code into the box:

   /* --- Base Theme: not-netflix-css --- */
   @import url('https://cdn.jsdelivr.net/gh/gorillasuti/not-netflix-css@9a1509f153f3beddba24be735da382d9c2ba23a1/legitflix-theme.css');

6. (Optional) You can add the following modules below the base theme line for more options.

   To disable the static sidepanel:

   /* --- Disable sidepanel: not-netflix-css --- */
   @import url('https://cdn.jsdelivr.net/gh/gorillasuti/not-netflix-css@9a1509f153f3beddba24be735da382d9c2ba23a1/disable-static-sidepanel.css');

   To add the dark UI elements:

   /* --- Adds a dark theme to the UI elements: not-netflix-css --- */
   @import url('https://cdn.jsdelivr.net/gh/gorillasuti/not-netflix-css@9a1509f153f3beddba24be735da382d9c2ba23a1/theme-bw.css');

   For Crunchyroll-style subtitles:

   /* --- Adds Crunchyroll-style subtitles: not-netflix-css --- */
   @import url('https://cdn.jsdelivr.net/gh/gorillasuti/not-netflix-css@3d11aa0fc8185442eaed73adb689cf0d28af7746/Crunchyroll%20subtitle%20style.css');

   For new media bar styling:

   /* --- Adds new media bar styling: not-netflix-css --- */
   @import url('https://cdn.jsdelivr.net/gh/gorillasuti/not-netflix-css@3d11aa0fc8185442eaed73adb689cf0d28af7746/Media%20bar%20plugin%20styling.css');

7. Click Save at the bottom of the page.

8. Do a Hard Refresh on your browser (Ctrl + F5 or Cmd + Shift + R) to see the changes.

1. Copy the Custom logo.css content from this file.

2. Paste the CSS into your Dashboard > General > Custom CSS box.

3. Change the logo links and files according to the comments in the code.

4. Restart your server and Hard Refresh your browser (Ctrl + F5).

   Warning: MAY NOT WORK AS INTENDED ON ALL DEVICES AND MAY NOT CHANGE ALL LOGOS. BEST USED WITH HARD REPLACED LOGOS.

1. Copy the CSS from Animated Media Library Banner.css.
2. Paste the CSS into your Dashboard > General > Custom CSS box.
3. Go back to the home page of Jellyfin, right-click on the "My Media" collection you want to change, and select Inspect.
4. Copy the data-id value (e.g., data-id="7f83327065040f31cb16f45191bff4a7").
5. Change the data-id in the Custom CSS to match the one you just copied.
6. Go to Dashboard > Libraries, click the three dots on your library, and select Edit Images.
7. Upload a transparent (PNG/GIF) for the label as the Primary Image.
8. Upload your Animated image (GIF, WEBP, AVIF) as the Logo Image.

These features require the JS Injector Plugin to be installed first.

This script hides the "Home" and "Favorites" tabs from the main dashboard for a cleaner look.

Setup:

1. Install the JS Injector plugin from the Jellyfin plugin catalog.
2. Copy the JS from this file.
3. Go to Dashboard > Plugins > JS Injector, paste the code, and click Save.
4. Restart your Jellyfin server.

This script injects a Jellyseer link in two places: as a new card in your 'My Media' section on the homepage, and as a new button in your Sidebar navigation.

Setup:

1. Install the JS Injector plugin and have a running Jellyseer server.
2. Copy the JS from this file.
3. Paste the code into the JS Injector plugin settings.
4. Modify line 7: Change const jellyseerrUrl = \http://${jellyfinHost}:5055\; to your own Jellyseer URL.
5. (Optional) If you wish to use your own banner, modify the image URL at line 8.
6. Save the JS Injector settings, restart your Jellyfin server, and Hard Refresh your browser.

This JS injector script is a functional workaround, but it currently has a known bug. If you are a JavaScript or Jellyfin-dev expert and know how to fix it, please open an issue or submit a pull request!

• 1. The "Home Button" Navigation Bug:
  • Symptom: The Jellyseer card disappears if you navigate away (e.g., into a library) and then click the main "Home" button in the header to return.
  • Workaround: The card does reappear if you use the browser's or the native "Back" button (which restores the page from history) or if you do a full page refresh (Ctrl+R).
  • Probable Cause: Jellyfin is a Single Page Application (SPA). Clicking the "Home" button seems to destroy the page's HTML (and our script) and rebuild it. The script's "watcher" (MutationObserver or setInterval) is not surviving this specific navigation event.

This theme would not be possible without the original creator. This is mostly a personal fork with my own tweaks and branding.

99% of the credit goes to loof2736 for the amazing work on the Scyfin theme.

• Original Repository: https://github.com/loof2736/scyfin

Please support the original creator aswell!