Emby Dark Themes in different accent colors

[sh0rty 536]

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

 

 

PLEXLIKE_BLACK_ORANGE_Emby 3.0.5882.txt

[Happy2Play 9403]

/*Background for dialog pop-up windows*/

.dialog:not(.background-theme-a):not(.background-theme- {

    background-color: #282828 important;}

 

Edited March 24, 2016 by Happy2Play

[Ben Z 86]

/*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 March 26, 2016 by Happy2Play

[Happy2Play 9403]

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

 

 

Without change

Edited March 25, 2016 by Happy2Play

[Ben Z 86]

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

 

 

Without change

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

Edited March 25, 2016 by benjidave

[sh0rty 536]

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

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

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

 

Edited March 25, 2016 by shorty1483

[Shrom 6]

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

[Ben Z 86]

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.

[sh0rty 536]

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

 

Gesendet von meinem HTC One_M8 mit Tapatalk

[Shrom 6]

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 March 26, 2016 by Shrom

[Happy2Play 9403]

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 March 26, 2016 by Happy2Play

[sh0rty 536]

Actually the delete the Combo

 

1. Cookies

2. Image cache

3. hosted app data

 

works for me in chrome

[Happy2Play 9403]

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

 

New layout/design

 

Edited March 28, 2016 by Happy2Play

[sh0rty 536]

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;
}

 

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

 

 

PLEXLIKE_BLACK_ORANGE_Emby 3.0.5882_NEW_DASHBOARD.txt

Edited March 28, 2016 by shorty1483

[Ben Z 86]

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

[Happy2Play 9403]

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.

[Ben Z 86]

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 March 28, 2016 by benjidave

[sh0rty 536]

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;
}

[Ben Z 86]

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

 

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

RED - Dark Theme - 3.0.5930.41066.txt

Edited March 30, 2016 by benjidave

[sh0rty 536]

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 March 30, 2016 by shorty1483

[mediacowboy 438]

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.

[sh0rty 536]

 

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!

[Shrom 6]

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

[Ben Z 86]

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?

???

So you want black on black? Hmm..

 

CSS only affects the web interface.

[Shrom 6]

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