Jump to content


Photo

Emby Dark Themes in different accent colors

theme darkness dark css Color Accent themes web client skin colors

  • Please log in to reply
399 replies to this topic

#1 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 187 posts
  • Local time: 08:19 AM
  • LocationCanada

Posted 19 December 2015 - 05:11 PM

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, 31 July 2017 - 11:42 AM.

  • Luke, CBers, shaefurr and 13 others like this

#2 David Martin OFFLINE  

David Martin

    Advanced Member

  • Members
  • 62 posts
  • Local time: 12:19 PM
  • LocationSheffield

Posted 20 December 2015 - 04:11 PM

Looks Great.



#3 Blueeyiz702 OFFLINE  

Blueeyiz702

    Advanced

  • Members
  • 711 posts
  • Local time: 05:19 AM
  • LocationDeathStar

Posted 24 December 2015 - 03:55 AM

Thats nice looking,good work.



#4 GugZi OFFLINE  

GugZi

    Newbie

  • Members
  • 7 posts
  • Local time: 01:19 PM

Posted 27 January 2016 - 01:35 PM

:focus {
    outline: #E81123 auto 5px;

}

 

fix to "problem1"


  • Ben Z likes this

#5 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 187 posts
  • Local time: 08:19 AM
  • LocationCanada

Posted 27 January 2016 - 03:34 PM

Thank you!



#6 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 187 posts
  • Local time: 08:19 AM
  • LocationCanada

Posted 08 March 2016 - 02:07 AM

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.

Attached Files


Edited by benjidave, 08 March 2016 - 02:21 AM.


#7 swhitmore OFFLINE  

swhitmore

    Advanced Member

  • Moderators
  • 2698 posts
  • Local time: 08:19 PM
  • LocationPerth, Australia

Posted 08 March 2016 - 02:14 AM

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 likes this

#8 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 187 posts
  • Local time: 08:19 AM
  • LocationCanada

Posted 08 March 2016 - 02:19 AM

That was fast, thanks!



#9 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 10174 posts
  • Local time: 05:19 AM
  • LocationWashington State

Posted 08 March 2016 - 04:56 AM

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

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


#10 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 187 posts
  • Local time: 08:19 AM
  • LocationCanada

Posted 08 March 2016 - 02:30 PM

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



#11 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 10174 posts
  • Local time: 05:19 AM
  • LocationWashington State

Posted 08 March 2016 - 03:04 PM

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



#12 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 187 posts
  • Local time: 08:19 AM
  • LocationCanada

Posted 08 March 2016 - 03:30 PM

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.


  • Happy2Play likes this

#13 shorty1483 OFFLINE  

shorty1483

    Advanced Member

  • Members
  • 1355 posts
  • Local time: 02:19 PM
  • LocationGermany

Posted 09 March 2016 - 01:26 PM

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



#14 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 187 posts
  • Local time: 08:19 AM
  • LocationCanada

Posted 09 March 2016 - 04:11 PM

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

What do you mean? Having black as accent color?



#15 shorty1483 OFFLINE  

shorty1483

    Advanced Member

  • Members
  • 1355 posts
  • Local time: 02:19 PM
  • LocationGermany

Posted 10 March 2016 - 12:54 PM

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, 10 March 2016 - 01:27 PM.

  • Happy2Play and Ben Z like this

#16 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 187 posts
  • Local time: 08:19 AM
  • LocationCanada

Posted 10 March 2016 - 10:42 PM

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.

Attached Files


Edited by benjidave, 10 March 2016 - 10:43 PM.

  • Happy2Play and shorty1483 like this

#17 shorty1483 OFFLINE  

shorty1483

    Advanced Member

  • Members
  • 1355 posts
  • Local time: 02:19 PM
  • LocationGermany

Posted 11 March 2016 - 11:18 AM

Looking awesome @benjidave !

 

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.



#18 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 187 posts
  • Local time: 08:19 AM
  • LocationCanada

Posted 11 March 2016 - 02:40 PM

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


  • shorty1483 likes this

#19 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 10174 posts
  • Local time: 05:19 AM
  • LocationWashington State

Posted 11 March 2016 - 02:47 PM

Looking awesome @benjidave !

 

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, 11 March 2016 - 02:48 PM.

  • shorty1483 likes this

#20 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 187 posts
  • Local time: 08:19 AM
  • LocationCanada

Posted 11 March 2016 - 03:02 PM

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


  • shorty1483 likes this





Also tagged with one or more of these keywords: theme, darkness, dark, css, Color, Accent, themes, web client, skin, colors

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users