### **A modern CSS theme for Jellyfin, featuring backdrops and customizable accent colors. Enhanced for a more elegant appearance.**
[Go to installation](#installation)
---
### **Scyfin Elegance Theme**
```css
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/scyfin-theme.css'); /* Base theme */
@import url('https://cdn.jsdelivr.net/gh/loof2736/scyfin@latest/CSS/disable-static-drawer.css'); /* Disable static left drawer */
/* Elegance theme */
:root {
--primary-background-color: rgba(0,0,0,0.9);
--secondary-background-color: rgba(2,2,2,0.9);
--primary-background-transparent: rgba(2,2,2,0.2);
}
/* Increase backdrop image brightness and add some blur */
.backgroundContainer.withBackdrop {
background-color: rgba(0,0,0,0.65);
backdrop-filter: blur(6px);
}
```
---
### **Installation:**
---
**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 Scyfin 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 Scyfin 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"