Catppuccin for Jellyfin

Previews

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

Usage

1. Copy the theme import rule:

   @import url('https://adamperkowski.github.io/jellyfin/theme.css');
   

2. Open settings, navigate to Display and paste the CSS into the section called "Custom CSS code"
3. Copy your preferred flavor's import rule and paste it after the theme import:

   /* 🌻 Latte */
   @import url('https://adamperkowski.github.io/jellyfin/latte.css');
   /* 🪴 Frappé */
   @import url('https://adamperkowski.github.io/jellyfin/frappe.css');
   /* 🌺 Macchiato */
   @import url('https://adamperkowski.github.io/jellyfin/macchiato.css');
   /* 🌿 Mocha */
   @import url('https://adamperkowski.github.io/jellyfin/mocha.css');
   

4. Press save and you're done!

Customization

The accent color can be overrided by adding the following after the imports:

:root {
    --main-color: var(--mauve);
}

Preview

There is also an everything-rounded extension available:

@import url('https://adamperkowski.github.io/jellyfin/rounding.css');

Preview

💝 Thanks to

• Adam
• Isabel
• mxgic1337

 

Copyright © 2021-present Catppuccin Org