You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A minimal and elegant theme for Jellyfin based on/inspired by [Ultrachromic](https://github.com/CTalvio/Ultrachromic), [Glassmorphism](https://github.com/alexyle/jellyfin-theme), [Scyfin](https://github.com/loof2736/scyfin), [JellyTheme](https://github.com/alexyle/jellyfin-theme) & [Zombie](https://github.com/MakD/zombie-release/tree/main).
4
4
5
+
**Now with two options for login wallpapers: minimal and stylish!**
5
6
Compatible with 10.9.10+ & Tablets!
6
7
7
8
---
@@ -29,19 +30,27 @@ To add the theme to Jellyfin, copy the following line to Dashboard > General > C
29
30
```
30
31
Then, if you haven't already, enable Backdrops for _every_ device using this theme (Settings > Display > Backdrops).¹
31
32
32
-
## Colorschemes
33
+
## Color schemes
33
34
34
-
Plus **one** of the following import lines if you'd like to change the default colors to one of the presets below (optional):
35
+
Plus **one** of the following @import lines if you'd like to change the default colors to one of the presets below (optional):
For more info on custom colors [click here](./colorschemes/COLORS.md). For more colorschemes check out MakD's [Zombie Repo](https://github.com/MakD/zombie-release/tree/main#color-palettes).
165
+
For more info on custom colors [click here](./colorschemes/COLORS.md). For more color schemes check out MakD's [Zombie Repo](https://github.com/MakD/zombie-release/tree/main#color-palettes).
166
+
167
+
### Alt login wallpaper
168
+
Finally _if_ you would like to use the alternative(stylish) login wallpaper, add the line below to your Custom CSS as well:
@@ -49,10 +49,10 @@ _If_ you didn't like any of the presets and would like to have custom colors, re
49
49
50
50
### Custom login wallpaper
51
51
52
-
If you'd like to make your own custom login wallpaper to match it, in line with the ones I made, follow the instructions in `images/colorschemes/base.svg` (use Inkscape)and add this following line to Custom CSS as well:
52
+
If you'd like to make your own custom login wallpaper to match it, in line with the ones I made, follow the instructions in `images/colorschemes/base.svg`_or_ edit the colors to your liking in `images/login-wallpapers/stylish.svg`(use Inkscape). Export and add this following line to Custom CSS:
@@ -62,15 +62,15 @@ To make custom gradients open `images/gradients/coarse-gradients/gradient.ai` in
62
62
Add the following line to Dashboard > General > Custom CSS as well:
63
63
64
64
```
65
-
.layout-desktop .backgroundContainer {background: url("link-to-your-custom-gradient.png") no-repeat center center;}
65
+
.layout-desktop .backgroundContainer {background: url("url-to-your-custom-gradient.png") no-repeat center center;}
66
66
```
67
67
68
68
---
69
69
### Color Breakdown
70
70
71
-
--accent: R, G, B;
72
-
--accent-off: R, G, B;
73
-
--dark: R, G, B; Used for some details where a color too dark or too light wouldn't be ideal
71
+
--accent: R, G, B; Light pastel colors will work best.³
72
+
--accent-off: R, G, B; Darker and less colorful than accent.
73
+
--dark: R, G, B; Used for some details where a color too dark or too light wouldn't be ideal.
74
74
--darkest: R, G, B; Used for field's bg, text color when accent/accent-off becomes the bg color, etc.
75
75
--dark-highlight: R, G, B; Lighter than dark, used for dark highlights. BG in login page, etc.
76
76
--dark-apparent: R, G, B; Only used in mobile layout. It is the color of the gradient over the backdrop image.
@@ -86,15 +86,15 @@ Add the following line to Dashboard > General > Custom CSS as well:
86
86
87
87
### Notes:
88
88
89
-
Lighter `--accent` colors work better, as colorful colors will make the background color look very saturated - since the accent color is overlayed on top of the background.
90
-
91
89
¹ If you don't do this, the backdrop gradient will not blend perfectly into the background on *mobile*. The background color is affected by the `--accent` color, so `--dark apparent` needs to be calculated for every color combination, hence why I made the presets...
92
90
93
91
² Overlaying the noise onto the gradient exported from Illustrator is necessary to decrease the color banding from the output gradient file. This is an issue with gradients from both Illustrator and Inkscape, and banding looks better if managed with noise.
94
92
95
-
If you are using Zesty colorschemes on [Zombie](https://github.com/MakD/zombie-release/tree/main#color-palettes), be aware they will also change your login wallpaper to one of the ones that come with Zesty. If you just want the Zesty colors but not the matching login wallpaper, add the link to your preferred wallpaper and add this to the end of your custom CSS:
93
+
³ Lighter `--accent` colors work better, as colorful colors will make the background color look very saturated - since the accent color is overlayed on top of the background.
94
+
95
+
If you are using Zesty color schemes on [Zombie](https://github.com/MakD/zombie-release/tree/main#color-palettes), be aware they will also change your login wallpaper to one of the ones that come with Zesty. If you just want the Zesty colors but not the matching login wallpaper, find a wallpaper you like and add this to the end of your custom CSS:
0 commit comments