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
416 replies to this topic

#21 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19143 posts
  • Local time: 01:39 AM
  • LocationWashington State

Posted 11 March 2016 - 03:31 PM

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



#22 shorty1483 OFFLINE  

shorty1483

    Advanced Member

  • Members
  • 1429 posts
  • Local time: 10:39 AM
  • LocationGermany

Posted 12 March 2016 - 02:02 AM

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

#23 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19143 posts
  • Local time: 01:39 AM
  • LocationWashington State

Posted 13 March 2016 - 03:05 PM

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, 13 March 2016 - 03:06 PM.

  • shorty1483 likes this

#24 mediacowboy OFFLINE  

mediacowboy

    Advanced Member

  • Alpha Testers
  • 1857 posts
  • Local time: 03:39 AM
  • LocationTexas, United States

Posted 13 March 2016 - 08:10 PM

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

 

#535353 - (83,83,83)



#25 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 190 posts
  • Local time: 04:39 AM
  • LocationCanada

Posted 13 March 2016 - 10:00 PM

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

Attached Files


Edited by benjidave, 13 March 2016 - 10:05 PM.


#26 mediacowboy OFFLINE  

mediacowboy

    Advanced Member

  • Alpha Testers
  • 1857 posts
  • Local time: 03:39 AM
  • LocationTexas, United States

Posted 13 March 2016 - 10:15 PM

Thanks for this. I really love the themes.

Edited by mediacowboy, 13 March 2016 - 10:15 PM.


#27 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 190 posts
  • Local time: 04:39 AM
  • LocationCanada

Posted 13 March 2016 - 10:30 PM

@mediacowboy

 

You're welcome.

 

 

 

Also, I edited the OP to include all emby logos and checkmark icons for each theme in a .ZIP file.



#28 shorty1483 OFFLINE  

shorty1483

    Advanced Member

  • Members
  • 1429 posts
  • Local time: 10:39 AM
  • LocationGermany

Posted 14 March 2016 - 01:52 PM

@benjidave @Happy2Play

 

Thanks to the Detail view changes made by the Devs @Luke in the latest Dev Server the solution from post 20 is working properly now. Yay :D

.pageBackground {background-color: rgba(0,0,0,.80) !important;}

56e6fa5890f57_Unbenannt.png


Edited by shorty1483, 14 March 2016 - 01:55 PM.


#29 rcarteraz OFFLINE  

rcarteraz

    Advanced Member

  • Members
  • 78 posts
  • Local time: 01:39 AM

Posted 14 March 2016 - 05:19 PM

I'm using the Dark w/ Blue. The active devices shows white, is it possible to change this to blue as well so it doesn't look off? 

 

56e72acdc78b2_Capture.png



#30 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 190 posts
  • Local time: 04:39 AM
  • LocationCanada

Posted 14 March 2016 - 06:55 PM

@rcarteraz

 

As I mentioned here:

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.

 I don't know yet how to fix that, unfortunately. I'll need help of someone more experienced then me.


  • rcarteraz likes this

#31 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 190 posts
  • Local time: 04:39 AM
  • LocationCanada

Posted 17 March 2016 - 01:42 AM

@rcarteraz

 

Edited the OP:

 

"I made a V2 of all versions in a .ZIP file "Dark Theme & Colored Highlights V2" containing the 7 colors. It consist of some fixes, including the active device blocks being white mentioned a few posts after."


Edited by benjidave, 17 March 2016 - 01:44 AM.


#32 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 19143 posts
  • Local time: 01:39 AM
  • LocationWashington State

Posted 17 March 2016 - 06:03 PM

@benjidave

 

/* --- To Do List --- */
/* Dashboard Progress Bar Playback /Resume*/

 

Could only get this to work for Chrome, from this reference.

/*Chrome*/
progress::-webkit-progress-value {
    background-color: #E81123 !important;}

/* Firefox */
progress::-moz-progress-bar {
    background: #E81123;}

/*Edge*/
progress {color: #E81123;}



Edit - Update with Firefox and Edge, haven't figured out IE11 yet.


Edited by Happy2Play, 17 March 2016 - 06:56 PM.
Update Firefox and Edge

  • shorty1483 and Ben Z like this

#33 shorty1483 OFFLINE  

shorty1483

    Advanced Member

  • Members
  • 1429 posts
  • Local time: 10:39 AM
  • LocationGermany

Posted 18 March 2016 - 01:24 PM

Black progressbar for Darker Theme thanks to @rthomas

.nowPlayingBar {
    border-top: 1px solid #3b3b3b !important;
	color: #e8e8e8 !important;
    background-color: rgba(0,0,0,.90) !important;
    /*box-shadow: 0 0 8px rgba(232,232,232,.4);*/
}
.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
    color: #e8e8e8;
}
.nowPlayingBarText {
    font-size: 15px;
}
.nowPlayingBarPositionSlider #progressContainer {
    background-color: transparent !important;
}

56ec39e29b998_progressbar.png


Edited by shorty1483, 18 March 2016 - 01:48 PM.


#34 arrbee99 OFFLINE  

arrbee99

    Advanced Member

  • Members
  • 3573 posts
  • Local time: 08:39 PM
  • LocationNew Zealand

Posted 19 March 2016 - 08:36 PM

Wondering If I could ask politely for some help fixing possible minor bugs in this theme (know nowt about css or html unfortunately)....

 

56edef895e09f_EmbyDarkThemeBug.jpg

 

- sorting thing a bit difficult to read

 

56edefb62125a_EmbyDarkThemeBug1.jpg

 

- is the Rotten Tomatoes thing supposed to have a grey background or be transparent ? and also use a different (though easier to read) font ?

 

56edf009d24bc_EmbyDarkThemeBug2.jpg

 

- as before, is Trailer, Sync. etc supposed to have grey background or be transparent ?

 

56edf0439ebb3_EmbyDarkThemeBug3.jpg

 

 

- items in Guide get out of sync with their Channels.



#35 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 190 posts
  • Local time: 04:39 AM
  • LocationCanada

Posted 20 March 2016 - 03:01 AM

Wondering If I could ask politely for some help fixing possible minor bugs in this theme (know nowt about css or html unfortunately)....

56edef895e09f_EmbyDarkThemeBug.jpg

- sorting thing a bit difficult to read



- is the Rotten Tomatoes thing supposed to have a grey background or be transparent ? and also use a different (though easier to read) font ?



- as before, is Trailer, Sync. etc supposed to have grey background or be transparent ?


- items in Guide get out of sync with their Channels.

Add the following lines. This should fix the sorting list (thanks though) :
.paper-radio-button-0 #radioLabel.paper-radio-button {color: #CCCCCC !important;}
I should have mentioned it before, but I only tested my themes in Google Chrome. Which browser are you using? I'm not getting the same thing as you in Chrome.
56ee486540688_screenshot.png
56ee48d0ce729_screenshot2.png

Did you do some modifications from earlier posts by Happy2Play and shorty1483? My screenshots were made by my CSS texts from my original post.

For your channels, unfortunately, I don't use TV with emby. I can't really help you there.

EDIT: Make sure to use the .zip file called "Dark Theme & Colored Highlights V2" if you use Emby Version 3.0.5882.0

Edited by benjidave, 20 March 2016 - 03:52 AM.

  • shorty1483 likes this

#36 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 190 posts
  • Local time: 04:39 AM
  • LocationCanada

Posted 20 March 2016 - 03:39 AM

Edited OP:

 

- Added a "Manual Fixes" section instead of constantly updating version files.


  • shorty1483 likes this

#37 shorty1483 OFFLINE  

shorty1483

    Advanced Member

  • Members
  • 1429 posts
  • Local time: 10:39 AM
  • LocationGermany

Posted 20 March 2016 - 05:08 AM

For the darker/black theme. But I'm sure it can be used in the grey themes. Important: This does also apply to e.g. Metadata Editors listviews (Actors etc.).

/*--------------------------------------------------------------RottenTomatoes---------------------------------------------------------------*/
.criticRatingSummary {	
	color: #CC7B19;
    background-color: #000000 !important;
}

.criticRatingScore {
	color: #CC7B19;
}

.x-scope.paper-icon-item-0 {
    background-color: #000000 !important;
}

56ee68759b59c_tomatoes.png    56eea0184dda9_Editor.png

 

@benjidave

 

I played around with your great black base theme (transparent cards, black progress popup etc.). Can I upload here? I don't see there is a new thread needed cause the most work is done by you...


Edited by shorty1483, 20 March 2016 - 09:05 AM.

  • Ben Z likes this

#38 shorty1483 OFFLINE  

shorty1483

    Advanced Member

  • Members
  • 1429 posts
  • Local time: 10:39 AM
  • LocationGermany

Posted 20 March 2016 - 08:50 AM

Change of button coloring in detail screen (HTML color value needs to be changed to theme color)

/*--------------------------------------------------------------Buttons---------------------------------------------------------------*/
paper-button.subdued.x-scope.paper-button-0 { 
background: #B35A00 !important;
}
paper-button.btnSync.x-scope.paper-button-0 {
background: #B35A00 !important;
}
paper-button.subdued.btnMoreCommands.notext.x-scope.paper-button-0 {
background: #B35A00 !important;
}

56ee9c755bf3b_buttons.png

 

****************************************************************************************************************************************************************************************************************************

 

Fix Dialog Header matching theme color (HTML color value need to be changed to theme color).

 

56ee9e5ad08e1_Sync.png

/*--------------------------------------------------------------Dialog Header---------------------------------------------------------------*/
div.dialogHeader {
background: #101010 !important;
}

Edited by shorty1483, 20 March 2016 - 01:17 PM.

  • Ben Z likes this

#39 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 190 posts
  • Local time: 04:39 AM
  • LocationCanada

Posted 20 March 2016 - 11:51 AM

I played around with your great black base theme (transparent cards, black progress popup etc.). Can I upload here? I don't see there is a new thread needed cause the most work is done by you...

Yes, sure!



#40 Ben Z OFFLINE  

Ben Z

    Advanced Member

  • Members
  • 190 posts
  • Local time: 04:39 AM
  • LocationCanada

Posted 20 March 2016 - 12:26 PM

Fix Dialog Header matching theme color (HTML color value need to be changed to theme color).

 

56ee9e5ad08e1_Sync.png

/*--------------------------------------------------------------Dialog Header---------------------------------------------------------------*/
div.dialogHeader {
background: #CC7B19 !important;
}

Make sure to use a dark color like #101010 instead because you'll get this in metadata editor :

56eecf2051e88_screenshot.png

 

Instead of :

56eecf3731b38_screenshot2.png







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