Jump to content
SECURITY ALERT

Emby Dark Themes in different accent colors

Ben Z

By Ben Z
in Web App CSS

 Share

Recommended Posts

Ben Z

Ben Z   86

Posted
Posted (edited)

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

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
Link to comment
Share on other sites
  • 1 month later...
  • 1 month later...
Ben Z

Ben Z   86

Posted
  • Author
Posted (edited)

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
Link to comment
Share on other sites
swhitmore

swhitmore   781

Posted
Posted

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
Link to comment
Share on other sites
Happy2Play

Happy2Play   7747

Posted
Posted

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

div[data-itemtype="Channel"] .cardContent,
Link to comment
Share on other sites
Happy2Play

Happy2Play   7747

Posted
Posted

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

}

Link to comment
Share on other sites
Ben Z

Ben Z   86

Posted
  • Author
Posted

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
Link to comment
Share on other sites
shorty1483

shorty1483   448

Posted
Posted

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

Link to comment
Share on other sites
Ben Z

Ben Z   86

Posted
  • Author
Posted

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?

Link to comment
Share on other sites
shorty1483

shorty1483   448

Posted
Posted (edited)

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
Link to comment
Share on other sites
Ben Z

Ben Z   86

Posted
  • Author
Posted (edited)

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
Link to comment
Share on other sites
shorty1483

shorty1483   448

Posted
Posted

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.

Link to comment
Share on other sites
Ben Z

Ben Z   86

Posted
  • Author
Posted

@@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
Link to comment
Share on other sites
Happy2Play

Happy2Play   7747

Posted
Posted (edited)

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
Link to comment
Share on other sites
Ben Z

Ben Z   86

Posted
  • Author
Posted

@@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
Link to comment
Share on other sites
Happy2Play

Happy2Play   7747

Posted
Posted

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

Link to comment
Share on other sites
shorty1483

shorty1483   448

Posted
Posted

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

Link to comment
Share on other sites
Happy2Play

Happy2Play   7747

Posted
Posted (edited)

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
Link to comment
Share on other sites
mediacowboy

mediacowboy   438

Posted
Posted

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

 

#535353 - (83,83,83)

Link to comment
Share on other sites
Ben Z

Ben Z   86

Posted
  • Author
Posted (edited)

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
Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...