Emby Dark Themes in different accent colors

[Ben Z 86]

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, PURPLE, GRAY & PINK

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 August 27, 2018 by Ben Z

[David Martin 24]

Looks Great.

[Blueeyiz702 219]

Thats nice looking,good work.

[GugZi 2]

:focus {

    outline: #E81123 auto 5px;

}

 

fix to "problem1"

[Ben Z 86]

Thank you!

[Ben Z 86]

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.

Edited March 8, 2016 by benjidave

[swhitmore 781]

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

[Ben Z 86]

That was fast, thanks!

[Happy2Play 9157]

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

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

[Ben Z 86]

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

[Happy2Play 9157]

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);

}

[Ben Z 86]

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.

[shorty1483 504]

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

[Ben Z 86]

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?

[shorty1483 504]

What do you mean? Having black as accent color?

 

Something like this? 

 

 

 

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

 

Edited March 10, 2016 by shorty1483

[Ben Z 86]

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.

GREEN - Darker-Black Theme - Emby 3.0.5882.txt

Edited March 11, 2016 by benjidave

[shorty1483 504]

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.

[Ben Z 86]

@@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.

[Happy2Play 9157]

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 March 11, 2016 by Happy2Play

[Ben Z 86]

@@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.

[Happy2Play 9157]

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

[shorty1483 504]

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

[Happy2Play 9157]

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.

 

 

after page refresh

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

.pageBackground {background-color: #000000; display: block;}

Edited March 13, 2016 by Happy2Play

[mediacowboy 438]

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

 

#535353 - (83,83,83)

[Ben Z 86]

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 March 14, 2016 by benjidave