Jump to content

Emby Dark Themes in different accent colors


Ben Z

Recommended Posts

Ben Z

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

  • 2 weeks later...
Baenwort

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.

Link to comment
Share on other sites

Ben Z

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

Ben Z

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" 57147ae8cb2cc_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.
Link to comment
Share on other sites

  • 4 weeks later...
Baenwort

 

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.

 

 

Link to comment
Share on other sites

Ben Z

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.

Link to comment
Share on other sites

  • 2 weeks later...
  • 1 month later...
drashna

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) 

Link to comment
Share on other sites

drashna

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. :)

  • Like 1
Link to comment
Share on other sites

Ben Z

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

5788950c0b7db_whitebuttons.png

 

 

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

  • Like 1
Link to comment
Share on other sites

Happy2Play

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

Happy2Play

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

Ben Z

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

Happy2Play

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

Ben Z

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

5789311271f2a_popups.png

 

 

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

Happy2Play

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

Ben Z

 

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 

578952208e6ce_popups.png

 

:D

Link to comment
Share on other sites

Happy2Play

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

Happy2Play

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

Ben Z

 

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 by Ben Z
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...