Catppuccin for Jellyfin

Previews

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

Usage

1. Copy the theme import rule:

   @import url('https://jellyfin.catppuccin.com/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://jellyfin.catppuccin.com/catppuccin-latte.css');
   /* 🪴 Frappé */
   @import url('https://jellyfin.catppuccin.com/catppuccin-frappe.css');
   /* 🌺 Macchiato */
   @import url('https://jellyfin.catppuccin.com/catppuccin-macchiato.css');
   /* 🌿 Mocha */
   @import url('https://jellyfin.catppuccin.com/catppuccin-mocha.css');

4. Press save and you're done!

Customization

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

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

Creating your own theme

All colors can be easily changed by overriding these CSS variables.

Hall of Fame

These amazing themes all base off of Catppuccin:

evergarden

💝 Thanks to

• Adam
• Isabel
• mxgic1337

 

Copyright © 2021-present Catppuccin Org