Jump to content

Emby Dark Themes in different accent colors


Ben Z

Recommended Posts

It's tricky because of resource loading order. All of the various pieces of the app are not going to load their resources until needed, but your css is loaded at the beginning when the app starts.

Link to post
Share on other sites

OP edited:

  • The way you implement the dark theme is now way easier ( thank you @Nickbert ). Just copy the text as usual, it imports an url. It means there are no more manual fixes needed to be made by you (if I keep it up to date of course).
Link to post
Share on other sites

I just found out, that there might be an issue with rawgit as cdn provider:

https://github.com/rgrove/rawgit/wiki/Frequently-Asked-Questions#how-long-does-the-cdn-cache-files-how-can-i-make-it-refresh-my-file

If I understand that right, changes on an file will not be applied to the cdn.

 

But with gitcdn.link it should be possible to get the latest version of the css file. (I'll check that tomorrow)

https://github.com/schme16/gitcdn.xyz#how-is-this-different-from-rawgitcom-and-githackcom

 

So maybe you should use

https://gitcdn.xyz/repo/BenZuser/Emby-Web-Dark-Themes-CSS/master/GREEN%20-%20Dark%20Theme.css
Edited by Nickbert
Link to post
Share on other sites

I just found out, that there might be an issue with rawgit as cdn provider:

https://github.com/rgrove/rawgit/wiki/Frequently-Asked-Questions#how-long-does-the-cdn-cache-files-how-can-i-make-it-refresh-my-file

If I understand that right, changes on an file will not be applied to the cdn.

That's right. That's why I'm using the url just right of it, which is the URL for development. It update new changes by itself. I'm not using the cdn.

Link to post
Share on other sites

The @import "cleanup" is awesome. Makes things super simple on everyone, I think. 

 

But sad to hear that you only plan on doing the green theme until the theming engine is completely retrofitted...

 

:(

Link to post
Share on other sites

The @import "cleanup" is awesome. Makes things super simple on everyone, I think. 

 

But sad to hear that you only plan on doing the green theme until the theming engine is completely retrofitted...

 

:(

I know right. I loved my red theme. I just don't feel like fixing everything on something that is getting old. With green, well you know, the default one is already green.  ;) So, almost no accent color problems.

Link to post
Share on other sites

Well the web client isn't going anywhere.

I know, I just wait until it's retrofitted before continuing the other colors.

Link to post
Share on other sites

I know right. I loved my red theme. I just don't feel like fixing everything on something that is getting old. With green, well you know, the default one is already green.  ;) So, almost no accent color problems.

 

What, don't want the nickname "Sisyphus"? :P

 

Well, I totally understand.  Easier to wait until the changes are complete than to fight every release.

 

Hopefully the team can get it done sooner rather than later! (though no rush)

 

 

 

Tested it out anyways, and while the green is annoying, it's in the server settings only, so I don't really mind it. 

But I've cheated, using my webserver to host the modified CSS for myself. :)

Edited by drashna
  • Like 1
Link to post
Share on other sites
Happy2Play

If I get it right, we can't overwrite elements with already !important ?

 

Like the admin drawer

.adminDrawer .sidebarLink.selectedSidebarLink {
    background: #E81123 !important;
    color: #fff !important;
}

57992fc01b18b_drawer.png

I ended up using selector.

body > div.mainDrawerPanel > div.mainDrawer.transition.touch-menu-la.adminDrawer > div > div > a.sidebarLink.selectedSidebarLink
Link to post
Share on other sites
Happy2Play

@@Ben Z

 

Here you go this works also and more toward what you want.  Nothing like Trial and Error.

.drawerContent a.sidebarLink.selectedSidebarLink {
    background: #4285F4 !important;}
  • Like 1
Link to post
Share on other sites
Happy2Play

Also magnify glass specific to Select Directory.

/*Magnify Glass in Dashboard to Select Directory*/
[is=paper-icon-button-light][title="Select Directory"] {color: #4285F4 !important;}

5799cc176c264_directory.jpg

 

 

Side note Home Screen Glow borders needs updated.

 

 

 

/*OLD*/
div[data-itemtype="CollectionFolder"] .cardContent,
div[data-itemtype="UserView"] .cardContent,
div[data-itemtype="PlaylistsFolder"] .cardContent, 
div[data-itemtype="Channel"] .cardContent {border: 1px solid rgba(82,181,75,.5);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,181,75,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,181,75,.6);}

/*NEW*/
/*Glow for userview cards */
.itemsContainer.homeTopViews .cardContent {
  border: 1px solid rgba(0,94,243,.5);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,.6);
}
Edited by Happy2Play
  • Like 2
Link to post
Share on other sites
Happy2Play

Some clean up options for "Pop-up & other rectangle buttons".

/*Help Page Buttons*/
#aboutPage [data-role="button"]

/*Scheduled Tasks Added*/
#popupAddTrigger button       or       #popupAddTrigger [type="submit"], #popupAddTrigger [type="button"]

/*Security Revoke Button*/
#serverSecurityPage button    or       #serverSecurityPage [title="Revoke"]

/*DLNA Profile Buttons*/
#dlnaProfilePage button /*note this covers all buttons on page but affect colored ones also (Save button)*/

     Or these three

#dlnaProfilePage [data-icon="check"]
#dlnaProfilePage [type="button"]
#dlnaProfilePage [data-role="button"]


/*Parental Controls add Schedule Button*/
#userParentalControlPage [type="button"]
#popupSchedule button         or       #popupSchedule [type="submit"], #popupSchedule [type="button"]

.ui-popup.ui-body-a {background: #010101 !important;}
Edited by Happy2Play
  • Like 1
Link to post
Share on other sites

sass or less could be used to change the colors and output the appropriate files off of just one base .css

Edited by Delphi
  • Like 1
Link to post
Share on other sites

OP edited:

 

I added the other themes finally.

 

The web app is getting older and start being retro-fitted to adopt the newer techniques of Emby Theater. 

 

It means that there are more fixes needed on every update. As long as we can't install themes as plugins just like Emby Theater, I can't guarantee perfection with future updates, sorry for the inconvenience.

  • Like 1
Link to post
Share on other sites
Happy2Play

Grabbed Blue from Git and had issues with .countIndicator needs added and Logs needed updating.

Needs Added
/* --- 1.2 : Details --- */
/* --- Icons & Indicators --- */
/* Home Page */
.countIndicator

/*Logs*/
.listItemIcon {background-color: #4285F4 !important;}
.mdl-checkbox__input:focus + span + .mdl-checkbox__focus-helper {background-color: transparent;}

579a880c104db_log.jpg

 

579a88cabfbd8_count.jpg

 

Hard to catch it but the cancel button for installing new updates.

button.raised.cancelDark.mini

579a8b86bc4f3_cancel.jpg

 

Duplicate data (OLD)

div[data-itemtype="CollectionFolder"] .cardContent {
  border: 1px solid rgba(66, 133, 244, 0.5);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(66, 133, 244, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(66, 133, 244, 0.6); }


Edited by Happy2Play
  • Like 1
Link to post
Share on other sites
Happy2Play

More code that can be removed (highlighted Red)
 
579a90d7df0ca_unneeded.jpg
 

Edited by Happy2Play
Link to post
Share on other sites
Happy2Play

What happened to

/*Pop-up for Restart and Shutdown*/
.dialog .buttons button {color: #4285F4 !important;}
.dialog .buttons button:focus {background-color: #080808 !important;}

Sorry this should be !important, copied original from browser. 

/*background highlight for Debug logging check box*/
.mdl-checkbox__input:focus + span + .mdl-checkbox__focus-helper {
  background-color: transparent !important; }
Edited by Happy2Play
Link to post
Share on other sites

 

What happened to

/*Pop-up for Restart and Shutdown*/
.dialog .buttons button {color: #4285F4 !important;}
.dialog .buttons button:focus {background-color: #080808 !important;}

 

I dont't know really but I updated it.

Link to post
Share on other sites
Happy2Play

Looks like we are back to where we started, unless anyone sees and area that I missed.

  • Like 1
Link to post
Share on other sites
Happy2Play

I don't use it but Auto-Organize Legend text is black.

 

579aa5927b6b9_legend.jpg

 

 .legend need added here to make it visible.

/* --- Fonts --- */
/* Dashboard */
select, input, h1, h2, h3, .paper-checkbox-0 #checkboxLabel.paper-checkbox, p#appVersionNumber, p#pUpToDate, p#ports, p.localUrl, p.externalUrl, div#appVersionNumber, div.detailSectionHeader, table.tblApiKeys.stripedTable.ui-responsive.table-stroke.ui-table.ui-table-reflow, textarea#textarea.style-scope.iron-autogrow-textarea, div.ui-collapsible-content.ui-body-inherit, table.tblOrganizationResults.stripedTable.ui-responsive.table-stroke.ui-table.ui-table-reflow, table#movie-table.ui-responsive.ui-table.ui-table-reflow, .legend {
  color: #FFFFFF !important; }
Edited by Happy2Play
Link to post
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...