Plex-inspired theme for Jellyfin WebUI

Built on Scyfin, Ultrachromic

Go to installation

Also avaliable as a Userstyle

---

Outline Cards on hover

Backdrop Support

Base Theme

@import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-main.css');

Extras (smaller cast/crew, etc)

@import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-Extras.css');

• B/W Logo (credits: RoyalxZealot)
• Smaller Cast/Crew section
• Hide "Upcoming on TV" and "Next Up" section in Season View

Options (Add these after/under the base theme)

• Enable Collapsable Drawer/Menu

  • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-Drawer-Toggle.css');

• Bigger logo (for High DPI/Jellyfn Media Player)

  • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-HighDPIExtras.css');

• Episode Grid (from Ultrachromic)

  • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-EpisodeGrid.css');

• Round Cast/Crew/Guests

  • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFLow-RoundCastCrew.css');

• Themes:

  • Orange

    • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/Themes/ScyFlow-Orange.css');
    • 

  • Pink

    • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/Themes/ScyFlow-Pink.css');
    • 

  • Rainbow

    • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/Themes/ScyFlow-Rainbow.css');
    • 

  • Red

    • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/Themes/ScyFlow-Red.css');
    • 

  • White

    • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/Themes/ScyFlow-White.css');
    • 

  • Blue

    • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/Themes/ScyFlow-Blue.css');
    • 

  • Darker icons/accents (Add this after everything else):

    • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/Themes/ScyFlow-Dark.css');

  Compatible with Scyfin/Ultrachromic themes:

  • Seafoam
    • @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-seafoam.css');
  • Coral
    • @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-coral.css');
  • Snow
    • @import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/theme-snow.css');

  Experimental (Works in progress)

  • Episode Grid Outline/Dim on hover

    • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-EpisodeGrid-outline.css');
    • 

  • Horizontal-Scroll Episodes

    • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-Scrollable-Episodes-WIP.css');
    • 

  • Horizontal-Scroll Episodes (alt, contorls overlayed)

    • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-Scrollable-Episodes-ALT.css');
    • 

  • Animated Overlay (on Backdrops and Live TV section)

    • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-AnimatedOverlay.css');
    • 

  • Nyan Progress Bar

    • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/Themes/NyanProgress.css');
    • 

  • Left-Aligned Font/ Poster Spacing / Corner Indicators

    • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-FontTweaks.css');
    • 

  • 10.11.x Compatibility (WIP, append after main theme/oneliner)

    • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-Compatibility.css');
    • 
    • 
    • 

    (dashboard theming for 10.11.x only works using UserCSS/external CSS manager)

    • 

---

Installation:

Easy install (one-liner)

@import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-oneliner.css');

10.11.x Compatibility (WIP, append after main theme/oneliner):

@import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-Compatibility.css');

(Mobile/Android one-liner): @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-oneliner-mobile.css');

• Mobile/App fixes: if the logo is too big or doesn't apply (iOS, Android), append this line as well (per client)
  • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-mobilefixes.css');
• Smaller Screen/Android fixes: if the indicators are too big
  • @import url('https://cdn.jsdelivr.net/gh/LitCastVlog/Flow@main/CSS/ScyFlow-smallscreen-fixes.css');

Server-wide install:

• Click the hamburger icon (Top left)
• Navigate to "Dashboard" (If you don't see this, make sure you are signed in to your admin account)
• Navigate to "General"
• Near the bottom, under "Custom CSS code", paste the @import url for the base theme
  • Example:
  • 
• Optional - Paste the @import url for any options / themes you may want
  • Example:
  • 
• Click "Save"

---

Single client install:

• Click the hamburger icon (Top left)
• Navigate to "Settings"
• Navigate to "Display"
• Near the middle, under "Custom CSS code", paste the @import url for the base theme
  • Note -
    • If there is any server-wide custom CSS, you may want to enable "Disable server-provided custom CSS code", as the two themes WILL interfere with each other
  • Example:
  • 
• Optional - Paste the @import url for any options / themes you may want
  • Example:
  • 
• Click "Save"