Jump to content

Emby Dark Themes in different accent colors


Ben Z

Recommended Posts

mediacowboy

Thanks for this. I really love the themes.

Edited by mediacowboy
Link to comment
Share on other sites

shorty1483

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

rcarteraz

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

Link to comment
Share on other sites

Ben Z

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

  • Like 1
Link to comment
Share on other sites

Ben Z

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

Happy2Play

@

 

/* --- 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
Update Firefox and Edge
  • Like 2
Link to comment
Share on other sites

shorty1483

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

arrbee99

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.

Link to comment
Share on other sites

Ben Z

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
  • Like 1
Link to comment
Share on other sites

Ben Z

Edited OP:

 

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

  • Like 1
Link to comment
Share on other sites

shorty1483

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

 

@

 

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
  • Like 1
Link to comment
Share on other sites

shorty1483

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
  • Like 1
Link to comment
Share on other sites

Ben Z

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!

Link to comment
Share on other sites

Ben Z

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

Link to comment
Share on other sites

shorty1483

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

 

 

Instead of :

 

 

The light one was my intention  :D I did not recognize the orange on orange...thanks for the hint.

Edited by shorty1483
  • Like 1
Link to comment
Share on other sites

arrbee99

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

 

 

Thanks, that fixed the sorting list.

 

I was using Chrome (and am experimenting with Firefox and Opera at the moment), still getting that Trailer, Sync, triple colon stuff in grey, the rest in transparent.

 

Think the only change made to the theme was to add that code line to show the background in full screen with the transparency adjusted.

 

With the channels thing, it seems to add a thin line to each program row, but not to the actual channel names, but its no biggy.

 

Am using the V2 version.

 

Tried adding the code given by Shorty in Post# 37 (if it was meant for me......), it kind of turned Rotten Tomatoes into a two tone thing....(or was it two tone to begin with. Anyway.

 

56ef702b51e5b_EmbyDarkThemeBug4.jpg

Link to comment
Share on other sites

shorty1483

Thanks, that fixed the sorting list.

 

I was using Chrome (and am experimenting with Firefox and Opera at the moment), still getting that Trailer, Sync, triple colon stuff in grey, the rest in transparent.

 

Think the only change made to the theme was to add that code line to show the background in full screen with the transparency adjusted.

 

With the channels thing, it seems to add a thin line to each program row, but not to the actual channel names, but its no biggy.

 

Am using the V2 version.

 

Tried adding the code given by Shorty in Post# 37 (if it was meant for me......), it kind of turned Rotten Tomatoes into a two tone thing....(or was it two tone to begin with. Anyway.

 

56ef702b51e5b_EmbyDarkThemeBug4.jpg

 

No this was a general modification, but I will post a fix for the padding in the evening. Currently at work.

Edited by shorty1483
Link to comment
Share on other sites

Ben Z

OP edited:

  • I had too many manual fixes, so I made a V3 and updated all individual themes for people that doesn't want to download the .zip file. The V3 include several minor fixes. I also changed the color icons in a way that you can see when you check one. Issue mentioned in 1st edit fixed.
  • Like 1
Link to comment
Share on other sites

Ben Z

I was using Chrome (and am experimenting with Firefox and Opera at the moment), still getting that Trailer, Sync, triple colon stuff in grey, the rest in transparent.

 

Think the only change made to the theme was to add that code line to show the background in full screen with the transparency adjusted.

Well, it's supposed to be gray everywhere.

56ef89e531727_1.png

 

Maybe the background transparency adjustment is screwing up somewhere? Download the V3 or any individual theme, I updated them. Try both, without and with the transparency adjustment to see if it's the issue. But honestly, it shouldn't.

Edited by benjidave
Link to comment
Share on other sites

arrbee99

Well, it's supposed to be gray everywhere.

56ef89e531727_1.png

 

Maybe the background transparency adjustment is screwing up somewhere? Download the V3 or any individual theme, I updated them. Try both, without and with the transparency adjustment to see if it's the issue. But honestly, it shouldn't.

 

Doesn't seem to make any difference..... In the three images below, the first image has no CSS theme applied and its still a half n' half thing (presumably the original design). The second has a Version 3 green theme, still the same, and the third image is the Version 3 green theme plus the transparency command / effect, no change. I see also that Shorty's Plex(ish) theme is halfy / halfy.

 

56efabc6e0ee7_EmbyDarkThemeBugremoved.jp

 

56efabe07cb3b_EmbyDarkThemeBugremoved1.j

 

56efabffc9c08_EmbyDarkThemeBugremoved2.j

 

Not sure its worth worrying about ?

Link to comment
Share on other sites

shorty1483

Thanks, that fixed the sorting list.

 

I was using Chrome (and am experimenting with Firefox and Opera at the moment), still getting that Trailer, Sync, triple colon stuff in grey, the rest in transparent.

 

Think the only change made to the theme was to add that code line to show the background in full screen with the transparency adjusted.

 

With the channels thing, it seems to add a thin line to each program row, but not to the actual channel names, but its no biggy.

 

Am using the V2 version.

 

Tried adding the code given by Shorty in Post# 37 (if it was meant for me......), it kind of turned Rotten Tomatoes into a two tone thing....(or was it two tone to begin with. Anyway.

 

56ef702b51e5b_EmbyDarkThemeBug4.jpg

.paperList { padding-top: 0px; }

 

Gesendet von meinem HTC One_M8 mit Tapatalk

Link to comment
Share on other sites

Ben Z

Doesn't seem to make any difference..... In the three images below, the first image has no CSS theme applied and its still a half n' half thing (presumably the original design). The second has a Version 3 green theme, still the same, and the third image is the Version 3 green theme plus the transparency command / effect, no change. I see also that Shorty's Plex(ish) theme is halfy / halfy.

 

Not sure its worth worrying about ?

My Emby server is linux based and not windows. There are probably some differences.

Link to comment
Share on other sites

Happy2Play

/* DLNA - Profile - Direct Play section */
ul[data-role="listview"] > li[data-role="list-divider"] {
background: #101010 !important;}

ul[data-role="listview"] , ul[data-role="listview"] > li{
border-color: #101010 !important;
}
ui-page-theme-a .ui-body-inherit, html .ui-bar-a .ui-body-inherit, html .ui-body-a .ui-body-inherit, html body .ui-group-theme-a .ui-body-inherit, html .ui-panel-page-container-a {
background-color: #101010;}

Edited by Happy2Play
  • Like 2
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
×
×
  • Create New...