Emby Dark Themes in different accent colors

[Ben Z 86]

I talking about the icons of your 2 screen but not black(my bad) but in white.

 

 In section /* Icons & Menu Bars */ under  "1.1 : Buttons", I removed :

.viewMenuBar paper-icon-button

and

div.videoAdvancedControls paper-icon-button.mediaButton.x-scope.paper-icon-button-0

 

If you're not familiar with CSS, just do the following.

 

Replace the section /* Icons & Menu Bars */ under  "1.1 : Buttons" by this:

/* Icons & Menu Bars */
.btnUserItemRatingOn {color: #E81123 !important;} /* ACCENT COLOR HERE */
paper-icon-button.btnCast.headerButton.headerButtonRight.x-scope.paper-icon-button-0.btnActiveCast, paper-icon-button.nowPlayingCastIcon.x-scope.paper-icon-button-0.btnActiveCast, paper-icon-button.nowPlayingCastIcon.x-scope.paper-icon-button-0, paper-icon-button.mediaButton.toggleRepeatButton.x-scope.paper-icon-button-0.repeatActive, paper-icon-button.btnCancel.x-scope.paper-icon-button-0, paper-icon-button.btnExitRemoteControl.x-scope.paper-icon-button-0, paper-icon-button.btnNextPage.x-scope.paper-icon-button-0, paper-icon-button.btnPreviousPage.x-scope.paper-icon-button-0, 
paper-button.accent, paper-icon-button.btnUp.x-scope.paper-icon-button-0, paper-icon-button.btnDown.x-scope.paper-icon-button-0, .ui-body-a .emby-collapsible-button, paper-icon-button.btnViewItemDown.btnViewItemMove.x-scope.paper-icon-button-0, paper-icon-button.btnViewItemUp.btnViewItemMove.x-scope.paper-icon-button-0 {
color: #E81123 !important;} /* ACCENT COLOR HERE */

Replace #E81123 (2 times) with the appropriate accent color HEX code (as you can see in original post).

Edited April 5, 2016 by Ben Z

[Shrom 6]

Perfect !! thx a lot

[Baenwort 102]

Thank you for making the dashboard dark again. I do have one problem though. Which ever tab I have selected in the dashboard (e.g. Server, or Devices, or anything except Scheduled Tasks) the highlight is white instead of Green. This make the letters of the selected tab impossible to see. Scheduled Tasks shows a green highlight with white tasks as expected.

[Ben Z 86]

Thank you for making the dashboard dark again. I do have one problem though. Which ever tab I have selected in the dashboard (e.g. Server, or Devices, or anything except Scheduled Tasks) the highlight is white instead of Green. This make the letters of the selected tab impossible to see. Scheduled Tasks shows a green highlight with white tasks as expected.

I guess you're not using Google Chrome? I'm sorry but I only support Chrome and I don't have this issue.

 

Are you using Edge or Internet Explorer? I've tested it for you if so. Try to add the following lines:

div.content-secondary.toolsSidebar .sidebarLink.selectedSidebarLink {
background: #52B54B !important;
}

Edited April 17, 2016 by Ben Z

[Ben Z 86]

OP edited:

• Made a V5 because 3.0.5930 changed a lot of things. The dark theme is a little bit darker and I added the emby logo "logo.png"  for each theme (a light version is also included) in "Logos & Icons V3.zip" , which is needed if you're using the mobile web-ui.

[Baenwort 102]

 

I guess you're not using Google Chrome? I'm sorry but I only support Chrome and I don't have this issue.

 

Are you using Edge or Internet Explorer? I've tested it for you if so. Try to add the following lines:

div.content-secondary.toolsSidebar .sidebarLink.selectedSidebarLink {
background: #52B54B !important;
}

 

I'm using Firefox as part of my commitment to community software.

 

I've updated to the latest V5 and manual fixes and everything is working well.

 

Thank you for continuing your work. A dark theme is a requirement for me and you fix the settings area so that it is tolerable for me.

 

 

[Luke 39629]

why not turn this into a skin that can be installed and updated?

 

http://emby.media/community/index.php?/blog/1/entry-302-learn-how-to-create-skins-for-emby-theater/

 

the same skinning engine is on it's way to the regular web client.

[Ben Z 86]

why not turn this into a skin that can be installed and updated?

I'll consider it when the engine for the regular web client will be out. I'm actually not using Emby Theater.

[Ben Z 86]

OP edited:

• Made a V6 to fix several changes from the version 3.0.5970. There is nothing special added.

[drashna 47]

Looks like the new 3.0.5985.0 stable release breaks a bunch of the theming. (such as the admin page, the sidebar is white,  and overall, all the text color is wrong) 

[David Martin 24]

Yeah I'm seeing the same.

[Ben Z 86]

Unfortunately, I did not have time this week to update it. I'll eventually do it sometime. Sorry

[drashna 47]

Unfortunately, I did not have time this week to update it. I'll eventually do it sometime. Sorry

 

Totally understand.  

 

Eagerly awaiting for when you do have time.

[Ben Z 86]

I can't figure out how to modify those white buttons...

 

 

I found this:

a[data-role='button'], .type-interior button:not([data-role='none']):not(.clearButton):not([is]) {
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
    background-clip: padding-box;
    border-radius: .3125em;
    border: 1px solid #ddd !important;
    color: rgb(51,51,51) !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 500 !important;
    margin: 0 .25em !important;
    display: inline-block;
    padding: .8em 1em;
    text-align: center;
    text-decoration: none !important;
    background: #f6f6f6 !important;
    font-size: 16px;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.15);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.15);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

Modifying this doesn't work. Any help?

 

BTW, I attached an almost final version (RED) for anyone interested. I just need to fix those white buttons and it's pretty much done.

RED - Dark Theme.txt

[Happy2Play 9351]

@@Ben Z Doesn't look like you can since !important is already used (background: #f6f6f6 !important;).  But with some google foo and trial and error, targeting them seems to work with a higher override. 

/*Help Page Buttons*/
#aboutPage > div > div > div > a:nth-child(n+3) {
    background-color: #E81123 !important;}

Unless someone knows another way to override something that is already "!important"? Edited July 15, 2016 by Happy2Play

[Happy2Play 9351]

Unfortunately there are a lot of buttons affect by the default {background: #f6f6f6 !important;}. If it wasn't already marked !important all buttons could have been changed with the code you posted above.  Tested by removing !important in dashboard.css.

 

 Users-Parental Controls-Access Schedule (expanded)-Add Schedule
DLNA-Profiles-Select any profile-Buttons on each Tab menu
All Plugins
Advanced-Security-Revoke

Would you like me to target each one and post here for you to add?

Was the Shutdown button suppose to be Black?

@@Luke would have to say why !important was used on that background.

 

But overall it looks really good.

Edited July 15, 2016 by Happy2Play

[Ben Z 86]

Would you like me to target each one and post here for you to add?

Was the Shutdown button suppose to be Black?

Yes please. And yes, the Shutdown button is supposed to be black.

 

There are also some of these buttons at Scheduled tasks - Task triggers pop-ups

Edited July 15, 2016 by Ben Z

[Happy2Play 9351]

Here you go, only buttons I didn't do were Plugins do to everyone having different one.  If there are specific ones you would like done let me know or if I missed any.

/*Help Page Buttons*/
#aboutPage > div > div > div > a:nth-child(n+3) {background-color: #E81123 !important;}

/*Scheduled Tasks Added*/
#popupAddTrigger > form > div.ui-content > ul > li:nth-child(7) > button:nth-child(n+0)  {background-color: #E81123 !important;}

/*Security Revoke Button*/
#serverSecurityPage > div > div > table > tbody > tr > td:nth-child(1) > button {background-color: #E81123 !important;}

/*DLNA Profile Buttons*/
#dlnaProfilePage > div.ui-content > div > form > ul > li > button.btnSave {background-color: #E81123 !important;}
#dlnaProfilePage > div.ui-content > div > form > ul > li > button:nth-child(2) {background-color: #E81123 !important;}
#dlnaProfilePage > div.ui-content > div > form > div.tabContent.tabDirectPlayProfiles > button {background-color: #E81123 !important;}
#dlnaProfilePage > div.ui-content > div > form > div.tabContent.tabTranscodingProfiles > button {background-color: #E81123 !important;}
#dlnaProfilePage > div.ui-content > div > form > div.tabContent.tabContainerProfiles > button {background-color: #E81123 !important;}
#dlnaProfilePage > div.ui-content > div > form > div.tabContent.tabCodecProfiles > button {background-color: #E81123 !important;}
#dlnaProfilePage > div.ui-content > div > form > div.tabContent.tabMediaProfiles > button {background-color: #E81123 !important;}

/*Parental Controls add Schedule Button*/
#userParentalControlPage > div.ui-content > div > form > div.accessScheduleSection > div > div > button {background-color: #E81123 !important;}
#popupSchedule > div:nth-child(2) > form > ul > li:nth-child(4) > button:nth-child(n+0) {background-color: #E81123 !important;}
.ui-popup.ui-body-a {background: #010101 !important;}

[Ben Z 86]

@@Happy2Play

 

Awesome, thanks!

[Ben Z 86]

There are some left for few of the pop-ups from the DLNA settings.

 

 

But seriously, just don't do them. It's unecessary, they're hidden and useless on a daily basis use. What you did before are just enough, especially those from the scheduled tasks. Your help is appreciated!

 

I'll update OP and add the other color themes in few hours.

#aboutPage > div > div > div > a:nth-child(n+3), #popupAddTrigger > form > div.ui-content > ul > li:nth-child(7) > button:nth-child(n+0),
#serverSecurityPage > div > div > table > tbody > tr > td:nth-child(1) > button,
#dlnaProfilePage > div.ui-content > div > form > ul > li > button.btnSave,
#dlnaProfilePage > div.ui-content > div > form > ul > li > button:nth-child(2),
#dlnaProfilePage > div.ui-content > div > form > div.tabContent.tabDirectPlayProfiles > button,
#dlnaProfilePage > div.ui-content > div > form > div.tabContent.tabTranscodingProfiles > button,
#dlnaProfilePage > div.ui-content > div > form > div.tabContent.tabContainerProfiles > button,
#dlnaProfilePage > div.ui-content > div > form > div.tabContent.tabCodecProfiles > button,
#dlnaProfilePage > div.ui-content > div > form > div.tabContent.tabMediaProfiles > button,
#userParentalControlPage > div.ui-content > div > form > div.accessScheduleSection > div > div > button,
#popupSchedule > div:nth-child(2) > form > ul > li:nth-child(4) > button:nth-child(n+0),
div.page.type-interior.pluginConfigurationPage.esqConfigurationPage.mainAnimatedPage.ui-page.ui-page-theme-a.ui-body-a button,
div#boxsetsConfigurationPage.page.type-interior.pluginConfigurationPage.mainAnimatedPage.ui-page.ui-page-theme-a.ui-body-a button,
button#btnInstall {
    background-color: #404040 !important;
border-color: #404040 !important;
color: #FFFFFF !important;}

Edited July 15, 2016 by Ben Z

[Happy2Play 9351]

Well for completeness here you go.   Missed the Update button also.

 

To be merged into previous update, Only change may be the color you want Update Now button to be.

#popupEditDirectPlayProfile > div.ui-content > form > p > button:nth-child(n+0), 
#transcodingProfilePopup > div.ui-content > form > p > button:nth-child(n+0),
#containerProfilePopup > div.ui-content > form > p:nth-child(4) > button:nth-child(n+0),
#codecProfilePopup > div.ui-content > form > p:nth-child(4) > button:nth-child(n+0),
#responseProfilePopup > div.ui-content > form > p > button:nth-child(n+0),
#btnUpdateApplication 

Edited July 15, 2016 by Happy2Play

[Ben Z 86]

 

Well for completeness here you go.   Missed the Update button also.

 

To be added to in with previous update, Only change may be the color you want Update Now button to be.

#popupEditDirectPlayProfile > div.ui-content > form > p > button:nth-child(n+0), 
#transcodingProfilePopup > div.ui-content > form > p > button:nth-child(n+0),
#containerProfilePopup > div.ui-content > form > p:nth-child(4) > button:nth-child(n+0),
#codecProfilePopup > div.ui-content > form > p:nth-child(4) > button:nth-child(n+0),
#responseProfilePopup > div.ui-content > form > p > button:nth-child(n+0),
#btnUpdateApplication 

 

[Happy2Play 9351]

 Anymore

#dlnaProfilePage > div.ui-content > div > form > div.tabContent.tabInfo > div:nth-child(10) > div > div > p:nth-child(2) > button,
#subtitleProfilePopup > div.ui-content > form > p > button:nth-child(n+0),
#xmlAttributePopup > div.ui-content > form > p > button:nth-child(n+0),

Still looking into green progress bar on Library when Scan library is initiated.

Edited July 15, 2016 by Happy2Play

[Happy2Play 9351]

Change 101 Progress bar in Library menu wants background not background-color.

 

section 1.2-Others

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

Edited July 15, 2016 by Happy2Play

[Ben Z 86]

 

Change 101 Progress bar in Library menu wants background not background-color.

 

section 1.2-Others

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

 

 

EDIT: Never mind 

Edited July 15, 2016 by Ben Z