+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: DarkFlix (/t-darkflix)
DarkFlix - DemonWarrior - 2023-06-19
Whats Included?
Use 67% or 70% zoom in web browser for better experience
Netflix UI Hovering Effects
Red and Black Themed to match
based of the Jellyskin Base v11
Popout Player
Solid Background
Custom Login Page
Custom Highlights
Card Hover Style
New login background and style
Better Support for JF 10.7
Shows Title text if Logo is missing
Change backdrop-overlay to uniform box-shadow
Uses Minimal Looking fonts with the same font-weight as default Jellyfin WEB
Can be used by just one line.
Vibrant and modern.
Has lots of hover animation
Can easily be customized
Everything has a depth
Changed Video Player UI to Netflix Themed
Floating Music Player
& much more
This is Jellyfin Netflix Dark theme with Netflix Sans are used as the default fonts but if it is not applied in every area then please make a new issue.
Use 67% or 70% zoom in web browser for better experience
Netflix UI Hovering Effects
Red and Black Themed to match
based of the Jellyskin Base v11
Popout Player
Solid Background
Custom Login Page
Custom Highlights
Card Hover Style
New login background and style
Better Support for JF 10.7
Shows Title text if Logo is missing
Change backdrop-overlay to uniform box-shadow
Uses Minimal Looking fonts with the same font-weight as default Jellyfin WEB
Can be used by just one line.
Vibrant and modern.
Has lots of hover animation
Can easily be customized
Everything has a depth
Changed Video Player UI to Netflix Themed
Floating Music Player
& much more
This is Jellyfin Netflix Dark theme with Netflix Sans are used as the default fonts but if it is not applied in every area then please make a new issue.
Installation
To use just copy this CSS file contents at the below link into Jellyfin ======> Dashboard ======>General ======> Custom CSS Box
or input this in your css on jellyfin
Code:
@import url("https://cdn.jsdelivr.net/gh/DevilsDesigns/Jellyfin-DarkFlix-Theme/Darkflix-v5.1.css");Previews on github
Enjoy!
RE: DarkFlix - Kevin Nord - 2023-08-31
Came across this while randomly browsing the forums, looks really good! I'm using it for my regular user account and might apply it for all my users.
RE: DarkFlix - DemonWarrior - 2023-08-31
(2023-08-31, 03:08 PM)Kevin Nord Wrote: Came across this while randomly browsing the forums, looks really good! I'm using it for my regular user account and might apply it for all my users.
Thanks I wont switch from it ever. I love the dark themes light themes literally hurt my eyes. So i came up with this dark theme. Glad you like it and enjoy!
RE: DarkFlix - DirecTV - 2023-09-02
OMF I Love this ... damn this looks slick!
Thank You!
RE: DarkFlix - DirecTV - 2023-09-02
This theme inspired me to take it a few steps further, no need to use 67% or 70% zoom in web browser for better experience now. Also has the login page tweaked as well as the home screen. Install this into your css then refresh your page!
@import url("https://cdn.jsdelivr.net/gh/DevilsDesigns/Jellyfin-DarkFlix-Theme/Darkflix-v5.1.css");
#loginPage {
background: url('https://bramptonist.com/wp-content/uploads/2018/06/netflix-image.jpg');
background-size: cover;
}
.sections.homeSectionsContainer::before {
content: '';
display: block;
background-image: url(https://1000logos.net/wp-content/uploads/2017/05/Netflix-Logo.png);
width: 80%;
margin: 1em auto 0 auto;
height: 16em;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
/* Custom Logo */
.pageTitleWithDefaultLogo {background-image: url('https://consequenceofsound.net/wp-content/uploads/2017/07/netflix-logo.png?resize=807')};
RE: DarkFlix - DemonWarrior - 2023-09-07
(2023-09-02, 10:06 PM)DirecTV Wrote: This theme inspired me to take it a few steps further, no need to use 67% or 70% zoom in web browser for better experience now. Also has the login page tweaked as well as the home screen. Install this into your css then refresh your page!
@import url("https://cdn.jsdelivr.net/gh/DevilsDesigns/Jellyfin-DarkFlix-Theme/Darkflix-v5.1.css");
#loginPage {
background: url('https://bramptonist.com/wp-content/uploads/2018/06/netflix-image.jpg');
background-size: cover;
}
.sections.homeSectionsContainer::before {
content: '';
display: block;
background-image: url(https://1000logos.net/wp-content/uploads/2017/05/Netflix-Logo.png);
width: 80%;
margin: 1em auto 0 auto;
height: 16em;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
/* Custom Logo */
.pageTitleWithDefaultLogo {background-image: url('https://consequenceofsound.net/wp-content/uploads/2017/07/netflix-logo.png?resize=807')};
I am glad you like my theme. That edit looks pretty sweet. Im so happy im inspiring others to make edits and customizations to themes. Thanks for the work.
RE: DarkFlix - Niskeletor de Oscuridad - 2023-09-18
Impressive work! Very well achieved in most resolutions. In fact I was modifying an old version of JellyFlix and I find this marvel. I would love to take this CSS for reference and make a fork. This time I would like to add profiles , avatars and some effect with javascript. And thanks to this base ... I can move forward in a very solid way . Thank you very much for sharing it, congratulations!
RE: DarkFlix - Niskeletor de Oscuridad - 2023-09-18
I would love to contribute a resource that will surely be useful ... surely many people have thought that their own name would have more hook than the current NETFLIX company, well, here is the great opportunity: https://fontmeme.com/netflix-font/
PS : NISFLIX in my case
RE: DarkFlix - JohnDorian - 2024-06-02
I loved the v4-Theme. But with the new Jellyfin, Searching is not possible with it. Can you fix v4 for the newest Jellyfin Server?