Jump to content
Ben Z

Emby Dark Themes in different accent colors

Recommended Posts

Ben Z

NO LONGER SUPPORTED

Tested primarily with Google Chrome

Available for Emby stable and beta releases

Complete dark themes for Emby web client in 9 different accent colors
RED, ORANGE, ORANGE PLEX, YELLOW, GREEN, BLUE, PURPLEGRAY & PINK

Dark%20Themes%20V2.png

I find it more consistent to have a same color everywhere instead of the blue/green default. Even the logos and icons are changed to fit with the proper accent color. You also have the option to have a light version of the theme.

 

Just read and follow instructions HERE for both, stable and beta releases.

 

Note that I'm not using Live TV and this section might not be perfect and/or completed.

 

I hope you like it!

 

 

CREDITS :

Special thanks @@Happy2Play

 

Shaefurr's Disparity Icons

Edited by Ben Z
  • Like 16

Share this post


Link to post
Share on other sites
David Martin

Looks Great.

Share this post


Link to post
Share on other sites
Blueeyiz702

Thats nice looking,good work.

Share this post


Link to post
Share on other sites
GugZi
:focus {
    outline: #E81123 auto 5px;

}

 

fix to "problem1"

  • Like 1

Share this post


Link to post
Share on other sites
Ben Z

Thank you!

Share this post


Link to post
Share on other sites
Ben Z

I modified my orignal post. Is it possible to change the title of this thread for "Dark Theme and colored highlights" for me please?

 

Also, I have to fix something on this theme. I don't know how to do it. Maybe someone can help?

 

Since Emby Version 3.0.5882.0, there is a kind of white footer on the active device blocks in the server dashboard page (see attached picture). How can I change the color of it please? I tried several things but it didn't work sadly.

post-72732-0-51087500-1457417115_thumb.png

Edited by benjidave

Share this post


Link to post
Share on other sites
swhitmore

I modified my orignal post. Is it possible to change the title of this thread for "Dark Theme and colored highlights" for me please?

 

Done

  • Like 1

Share this post


Link to post
Share on other sites
Ben Z

That was fast, thanks!

Share this post


Link to post
Share on other sites
Happy2Play

Had to added to "2.1 : Home page & Library" to add accent color for Channel items.

div[data-itemtype="Channel"] .cardContent,

Share this post


Link to post
Share on other sites
Ben Z

You mean section "1.2 : Details" --> "Home Page & Library"? Thanks.

Share this post


Link to post
Share on other sites
Happy2Play

You mean section "1.2 : Details" --> "Home Page & Library"? Thanks.

The table of contents says "2.1 : Home page & Library"

 

/* Home Page & Library */

div[data-itemtype=Channel] .cardContent,

div[data-itemtype=CollectionFolder] .cardContent,

div[data-itemtype=UserView] .cardContent,

div[data-itemtype=PlaylistsFolder] .cardContent{

  border: 1px solid rgba(66,133,244,.5);

  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(66,133,244,.6);

  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(66,133,244,.6);

}

Share this post


Link to post
Share on other sites
Ben Z

The table of contents says "2.1 : Home page & Library"

 

/* Home Page & Library */

div[data-itemtype=Channel] .cardContent,

div[data-itemtype=CollectionFolder] .cardContent,

div[data-itemtype=UserView] .cardContent,

div[data-itemtype=PlaylistsFolder] .cardContent{

  border: 1px solid rgba(66,133,244,.5);

  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(66,133,244,.6);

  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(66,133,244,.6);

}

There are two "Home Page & Library" sections. The one under section 2.1 is for removed elements. The good one is under section 1.2. Anyway, not a big deal I guess.

  • Like 1

Share this post


Link to post
Share on other sites
shorty1483

Is it possible for you to create a real black theme @ if you have time? Loving the green version currently using! Well done!

Share this post


Link to post
Share on other sites
Ben Z

Is it possible for you to create a real black theme @ if you have time? Loving the green version currently using! Well done!

What do you mean? Having black as accent color?

Share this post


Link to post
Share on other sites
shorty1483

What do you mean? Having black as accent color?

 

Something like this? 

 

56e1a6a43b29c_post7273208063210014574168

 

 

Perhaps with transparent background cards for the titles in the different library views. 

56e1ad6fd65e2_Unbenannt2.png

 

56e1ae946fe7a_Unbenannt.png

Edited by shorty1483
  • Like 2

Share this post


Link to post
Share on other sites
Ben Z

Something like this? 

 

 

 

 

Perhaps with transparent background cards for the titles in the different library views. 

 

 

 

 
Since you mentioned that, I realised I forgot to change the background cards for music lists to transparent, thank you for that!
 
I'm afraid I could not change the background cards for titles as you asked (I'm kinda not too familiar to that). I tried few things but it didn't work. Besides that, I think I did what you're looking for (see .txt file).
 
Also, I fixed minor things and I'll update the versions from OP once I find or anyone else find a solution for this: 

 

I modified my orignal post. Is it possible to change the title of this thread for "Dark Theme and colored highlights" for me please?

 

Also, I have to fix something on this theme. I don't know how to do it. Maybe someone can help?

 

Since Emby Version 3.0.5882.0, there is a kind of white footer on the active device blocks in the server dashboard page (see attached picture). How can I change the color of it please? I tried several things but it didn't work sadly.

post-72732-0-49615800-1457663940_thumb.png

GREEN - Darker-Black Theme - Emby 3.0.5882.txt

Edited by benjidave
  • Like 2

Share this post


Link to post
Share on other sites
shorty1483

Looking awesome @ !

 

Which part of the css describes the background e.g. in library or Home view. I want to make it al lil bit transparent to see the fanart.

Share this post


Link to post
Share on other sites
Ben Z

@@shorty1483

 

Section 3.1 under /* Corrections */

 

You can also delete those 3 lines:

body.libraryDocument {
    background: #000000 !important;
} 
div.ui-content {
    background: #000000 !important;
}
html.minimumSizeTabs.basicPaperLibraryTabs.background-theme-b.darkScrollbars {
    background: #000000 !important;
}

It comes back to default, which is good in my opinion. If you don't like the gray opacity, you'll have to find the correct html elements because changing the opacity of these didn't work and I don't have much time for this right now.

  • Like 1

Share this post


Link to post
Share on other sites
Happy2Play

Looking awesome @ !

 

Which part of the css describes the background e.g. in library or Home view. I want to make it al lil bit transparent to see the fanart.

You referring to this?  I use this to make backdrops more visible.

.pageBackground {background-color: rgba(29,29,29,.50) !important;}
Edited by Happy2Play
  • Like 1

Share this post


Link to post
Share on other sites
Ben Z

@@Happy2Play

 

If I replace

body.libraryDocument {
    background: #000000 !important;
} 
div.ui-content {
    background: #000000 !important;
}
html.minimumSizeTabs.basicPaperLibraryTabs.background-theme-b.darkScrollbars {
    background: #000000 !important;
}

by this

.pageBackground {background-color: rgba(29,29,29,.50) !important;}

That's pretty much what he wants but I think he also wants to keep the Home library background to black everywhere else where you don't have a fanart at the same time. I don't know how.

  • Like 1

Share this post


Link to post
Share on other sites
Happy2Play

I enable backdrops (from auto to yes) so I have fanart on Home and library, no black backdrops. 

Share this post


Link to post
Share on other sites
shorty1483

When playing with your values I get the result that want for backgrounds with fanart. But the then the background in details view is grey again @@Happy2Play

 

Gesendet von meinem HTC One_M8 mit Tapatalk

Share this post


Link to post
Share on other sites
Happy2Play

When playing with your values I get the result that want for backgrounds with fanart. But the then the background in details view is grey again @@Happy2Play

 

Gesendet von meinem HTC One_M8 mit Tapatalk

I see what you are saying.

 

 

 

Issue I see now is backdrop carryover to detail view until page refresh.

56e5b7b13287a_carryover.jpg

 

 

after page refresh

56e5b7d045dae_refresh.jpg

.withBackdrop .pageBackground {background-color: transparent;}

.pageBackground {background-color: #000000; display: block;}
Edited by Happy2Play
  • Like 1

Share this post


Link to post
Share on other sites
mediacowboy

Is there anyway to get the logo in the same gray you used in the theme?

 

#535353 - (83,83,83)

Share this post


Link to post
Share on other sites
Ben Z

Is there anyway to get the logo in the same gray you used in the theme?

 

#535353 - (83,83,83)

Sure.

 

Do you mean #7F7F7F - (127,127,127)? Anyway, I did both just to be sure.

 

I guess I'll do it for every colors.

 

EDIT : Changed to the proper resolution for logos

Logos & Icons.zip

Edited by benjidave

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...