Jump to content

Emby Dark Themes in different accent colors


Ben Z

Recommended Posts

shorty1483

New Black theme based on @ V3

 

Changes/Addons to stock dark theme

- Orange colors

- black Server Admin GUI and Login Screen

- Black Side Panels

- remove card BG in library view

- semi transparent NowPlaying in Library View

- semi transparent Top Bar

- semi transparent RottenTomatoes rating

- colored buttons in detail view

 

 

56f03a17c2288_test.jpg

PLEXLIKE_BLACK_ORANGE_Emby 3.0.5882.txt

  • Like 1
Link to comment
Share on other sites

Happy2Play


/*Background for dialog pop-up windows*/
.dialog:not(.background-theme-a):not(.background-theme- {
background-color: #282828 important;}

 

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

Ben Z
/*Background for dialog pop-up windows*/
.dialog:not(.background-theme-a):not(.background-theme- {
    background-color: #282828 !important;}

I don't see any change. Can you tell me what this fix does?

 

EDIT: Is it a dev release fix?

Edited by Happy2Play
Link to comment
Share on other sites

Happy2Play

The background of the dialog box appear white without the change, at least for me.  Running primarily beta (5918)

 

56f4a7a0d5f7e_dialog.jpg

 

Without change

56f4a823320b8_dialog2.jpg

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

Ben Z

The background of the dialog box appear white without the change, at least for me.  Running primarily beta (5918)

 

56f4a7a0d5f7e_dialog.jpg

 

Without change

56f4a823320b8_dialog2.jpg

A beta issue I guess, it doesn't do that on stable. But good to know.

Edited by benjidave
Link to comment
Share on other sites

shorty1483

A beta issue I guess, it doesn't do that on stable. But good to know.

 

Also white default on latest devs.

 

@@Happy2Play My Chrome says "invalid property value". You forgot the ! before important in your code :P

/* --- Upper BG when no Backdrop (e.g. Actor Infos) --- */
.noBackdrop {
    height: 170px;
    background: #CC7B19;
    margin-top: 0 !important;
}

56f50e99a7aee_accent.jpg

/* --- Footer Notifications --- */
.footerNotification {
    background-color: #B35A00 !important;
    border-top: #FFFFFF !important;
}

56f50ec16ea2a_footer.jpg

 

Edited by shorty1483
Link to comment
Share on other sites

For me, I tried de replace de Logo  and de check inton ( checkmarkgreen.png and mblogoicon.png) with the same name in the right folder but seems doesn't works... 

Link to comment
Share on other sites

Ben Z

For me, I tried de replace de Logo  and de check inton ( checkmarkgreen.png and mblogoicon.png) with the same name in the right folder but seems doesn't works... 

Did you restart your server? Is it the Windows version?

I'm using linux debian (raspberry pi) for my server and for some reasons, I had to wait few hours or days before the icons changed. I don't know why.

Link to comment
Share on other sites

shorty1483

Also e.g. in Chrome I need to delete picture cache.

 

Gesendet von meinem HTC One_M8 mit Tapatalk

Link to comment
Share on other sites

My embryo server runs under Debian 8 and I already restart my server, so if I understand what you said, I think this is a cache problem.

Edited by Shrom
Link to comment
Share on other sites

Happy2Play

For me, I tried de replace de Logo  and de check inton ( checkmarkgreen.png and mblogoicon.png) with the same name in the right folder but seems doesn't works... 

I had to clear the history in Chrome for them to be updated.  Don't know if it is the way Chrome caches everything or the added caching Emby uses in Chrome.

 

Sometime CTRL+F5 works.

Edited by Happy2Play
Link to comment
Share on other sites

shorty1483

Actually the delete the Combo

 

1. Cookies

2. Image cache

3. hosted app data

 

works for me in chrome

  • Like 1
Link to comment
Share on other sites

Happy2Play

Looks like the next release cycle updates will need to be done.

 

New layout/design

 

56f8c4b8b3dc5_Dashboardnew.jpg

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

shorty1483

Looks like the next release cycle updates will need to be done.

 

New layout/design

 

 

 

Header bar is no problem. Still figuring out the white sidebar...

 

Edit:

/*--------------------------------------------------------------New Server Dashboard (.5930.41066 ff.)---------------------------------------------------------------*/
.dashboardDocument .viewMenuBar {
    background-color: rgba(0,0,0,.50);
}

.paper-drawer-panel-0 #drawer.paper-drawer-panel > [drawer] {
    height: 100%;
	background: #000000;
}

.adminDrawerPanel #drawer .emby-collapsible-title {
    color: #ffffff;
	border-right: 1px solid #202020;
}

.adminDrawerPanel #drawer {
    background: #000000 !important;
    box-shadow: none !important;
    border-right: 1px solid #202020;
}

.adminDrawerPanel #drawer #titleIcon {
    color: #ffffff;
}

.adminDrawerPanel .sidebarLinkIcon {
    color: #ffffff !important;
}

iron-icon#expandIcon.style-scope.emby-collapsible.x-scope.iron-icon-0 {
    color: #CC7B19;
}

.adminDrawerLogo {
    border-bottom: 1px solid #202020;
}

56f8d531eacb0_Unbenannt.jpg

 

I removed indicated color palette in attached logo.png (is this expression correct in englisch?) because is leads to bad pixelation on dark bg.

 

 

post-59764-0-69322200-1459148136_thumb.png

PLEXLIKE_BLACK_ORANGE_Emby 3.0.5882_NEW_DASHBOARD.txt

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

Ben Z

I guess I should install a windows beta version of the server and start the modifications when I'll get time.

  • Like 2
Link to comment
Share on other sites

Happy2Play

I guess I should install a windows beta version of the server and start the modifications when I'll get time.

It will probably be a couple days before this hit beta, since there are some bugs to be worked out of new stable release 5911.

Link to comment
Share on other sites

Ben Z

OP edited:

  • Made a V4 because 3.0.5911.0 messed up a bit the themes. I did some icon improvements and minor fixes. I added a 8th theme, the orange plex. An idea from @@shorty1483. I updated the "Logos & Icons" .zip file to also include the files for orange plex in V2. If you want a Darker Orange Plex theme, check posts from @@shorty1483 or here
Edited by benjidave
  • Like 1
Link to comment
Share on other sites

shorty1483

CSS Code for New Dev / Beta Server Dashboard sidebar, use with @ v4. No adjustments in main color (blue, green etc. needed). 

/*--------------------------------------------------------------New Server Dashboard (.5930.41066 ff.)---------------------------------------------------------------*/
.paper-drawer-panel-0 #drawer.paper-drawer-panel > [drawer] {
    height: 100%;
	background: #181818;
}
.adminDrawerPanel #drawer {
    background: #000000 !important;
    box-shadow: none !important;
    border-right: 1px solid #202020;
}
.adminDrawerPanel #drawer #titleIcon {
    color: #CCCCCC;
}
.adminDrawerPanel .sidebarLinkIcon {
    color: #CCCCCC !important;
}

56fa26ffc9137_Unbenannt.jpg

Link to comment
Share on other sites

shorty1483

I share you what I did so far if you're interested.

 

Nice job! I decided to leave the total black Plex theme behind beacause it's too much work on every Server change. To fit in the Client line I will use the default green in @benjidave 's dark way with some modifications (remove card bg, hide theme songs, List bg, Rottentomatoes...)

 

Feel free.

GREEN - Dark Theme.txt

Edited by shorty1483
Link to comment
Share on other sites

mediacowboy


html{
background-color: #181818 !important;
}


 

I had to add this to make pages on the admin dashboard have the same color all the way down. One such page to see the what I am talking about is the Resume Settings page.

  • Like 2
Link to comment
Share on other sites

shorty1483

 

html{ 
    background-color: #181818 !important;
}
 
I had to add this to make pages on the admin dashboard have the same color all the way down. One such page to see the what I am talking about is the Resume Settings page.

 

 

Also saw it on the Plugin pages. Thanks!

Link to comment
Share on other sites

Does anyone know how I can have the icon on the top right (in the player and in the web interface) in black please ? Wich value should I modify/delete ? I don't know CSS...

 

Thanks a lot :)

Link to comment
Share on other sites

Ben Z

Does anyone know how I can have the icon on the top right (in the player and in the web interface) in black please ? Wich value should I modify/delete ? I don't know CSS...

 

Thanks a lot :)

I'm not sure if I understand your question. Which icon are you reffering to?

5703db350d9d2_icons.png???

So you want black on black? Hmm..

 

CSS only affects the web interface.

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