ElegantEmby - Dark Rounded Theme for Emby Web

June 13

Hi everyone,

I wanted to share a custom Emby Web theme I’ve been working on called ElegantEmby.

It is a dark, rounded theme for Emby Web with softer panels, cleaner cards, muted accent colors, larger Spotlight artwork/logo styling, circular cast images, polished buttons, and a more modern overall layout.

Quote

The visual style is inspired by ElegantFin by lscambo13: https://github.com/lscambo13/ElegantFin

This has been adapted specifically for Emby Web.

Main Features

Dark slate-style interface
Rounded cards and panels
Cleaner top navigation tabs
Styled sidebar and search field
Larger Spotlight logo and metadata
Cleaner Spotlight metadata separators
Circular cast and crew images
Themed buttons, dialogs, lists, inputs, scrollbars, and progress bars
Custom accent color variables
Optional Spotlight companion script

Files Included

Quote

There are two files:

Elegantemby.css - This is the main theme file. This is required.

Elegantemby.css

Elegantemby.spotlight.js - This is optional. It adds extra Spotlight features such as a hover play button, ratings, and trailer preview behavior.

Elegantemby.spotlight.js

Install the CSS Theme

Open Emby Dashboard.
Go to Settings > General.
Paste the contents of Elegantemby.css into Custom CSS.
Save.
Hard refresh your browser.

Hard refresh shortcuts:

Windows / Linux: Ctrl + F5
Mac: Cmd + Shift + R

Quote

The base theme only needs the CSS file.

Optional Spotlight Script

Quote

Emby’s main page only accepts CSS, so the JavaScript file needs to be added separately.

The easiest option is to use the Custom CSS/JS plugin - https://github.com/Shurelol/EmbyCustomJS_Css

Paste Elegantemby.spotlight.js into the Custom JS box, Add a name and set force on > save.

You can also inject it through a reverse proxy or manually add it to index.html, but the plugin method is the simplest.

Changing the Accent Color

Near the top of Elegantemby.css you’ll find:

--ee-accent-h: 176;
--ee-accent-s: 3%;
--ee-accent-l: 63%;

These control the theme accent color.

Hue examples:

Quote

0 = red
25 = orange
95 = green
160 = teal
210 = blue
251 = purple

Saturation (s) controls color strength and Lightness (l) controls brightness.

Notes:

The main CSS theme is intended for the current stable Emby Server/Web release.

The optional Spotlight companion script and CSS is currently intended for Emby beta only. If you are on the current stable release, use the CSS theme by itself (you can keep the Spotlight CSS in to be ready for spotlight on release or remove it) and skip the Spotlight script section.

Feedback, screenshots, and fixes are welcome.

July 10

Love it! I use this theme on Jellyfin and love to see it over here.

I found one bug, it appears that with viewing Live TV there is a blue overlay to the video.

July 11

1 hour ago, craighton said:

Love it! I use this theme on Jellyfin and love to see it over here.

I found one bug, it appears that with viewing Live TV there is a blue overlay to the video.

I'll see what I can figure out today (don't have live TV so never thought to check this) I've added some more changes from the jelly theme too - season episodes display in the same card view instead of the vertical list.

July 11

It appears it has to do with

.backgroundContainer.withBackdrop {
  background-color: var(--ee-darkerGradientPointAlpha) !important;
}

And HTML

<div class="backgroundContainer withBackdrop backgroundContainer-transparent"></div>

July 18

On 11/07/2026 at 13:56, craighton said:

It appears it has to do with

.backgroundContainer.withBackdrop {
  background-color: var(--ee-darkerGradientPointAlpha) !important;
}

And HTML

<div class="backgroundContainer withBackdrop backgroundContainer-transparent"></div>

Should be fixed now, this css file includes a host of changes (ive moved away from using the JS script, felt too unsafe imo) Most noteable change is the tv episode grive view inline with the jellyfin theme

Elegantemby.css

July 18

This really looks decent. TY!

While it looks great on my 4K screen, The only part that bothered me was on my smaller 22" monitor (1680x1050) the top pillbox navigation section was too far down with too much padding so I added this to the very bottom of the CSS & it looks perfect now. ((See photos below to compare))

I'm not really good at programming so I ran it thru my LLM and here is what it spit out.

I figured I would drop the code here.

/* ===========================================================================
 *  Tab Position Fix - Pin tabs to top of header
 *  ======================================================================== */

@media not all and (min-width: 66em) {
    .headerMiddle-withSectionTabs:not(.headerMiddle-tv) {
        margin-top: 0 !important;
        height: 2.5em !important;
        position: absolute !important;
        top: 23px !important;
        left: 0 !important;
        right: 0 !important;
    }
}

@media (min-width: 80em) {
    .headerMiddle.sectionTabs.headerMiddle-withSectionTabs {
        position: absolute !important;
        top: 13px !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 60% !important;
    }
}

/* ===========================================================================
 *  Page Padding Fix
 *  ======================================================================== */

@media (min-width: 40em) {
    .skinBody-withFullDrawer .page-windowScroll.withTabs, 
    .skinBody-withFullDrawer .withTabs .padded-top-page,
    .page-windowScroll.withTabs, 
    html:not(.layout-tv) .withTabs .padded-top-page {
        padding-top: calc(5.5em + (var(--window-inset-top) * .7)) !important;
    }
}

/* ===========================================================================
 *  Header Height
 *  ======================================================================== */

.skinHeader:not(.osdHeader) {
    min-height: 75px !important;
    height: auto !important;
    padding-top: 0.4em !important;
    padding-bottom: 0.4em !important;
}

.emby-tab-button {
    padding-top: 0.3em !important;
    padding-bottom: 0.3em !important;
    line-height: 1.2 !important;
}

Before:

After:

I'll match my colors on the artwork later this week.

July 18

51 minutes ago, ZanderKeen said:

This really looks decent. TY!

While it looks great on my 4K screen, The only part that bothered me was on my smaller 22" monitor (1680x1050) the top pillbox navigation section was too far down with too much padding so I added this to the very bottom of the CSS & it looks perfect now. ((See photos below to compare))

I'm not really good at programming so I ran it thru my LLM and here is what it spit out.

I figured I would drop the code here.

/* ===========================================================================
 *  Tab Position Fix - Pin tabs to top of header
 *  ======================================================================== */

@media not all and (min-width: 66em) {
    .headerMiddle-withSectionTabs:not(.headerMiddle-tv) {
        margin-top: 0 !important;
        height: 2.5em !important;
        position: absolute !important;
        top: 23px !important;
        left: 0 !important;
        right: 0 !important;
    }
}

@media (min-width: 80em) {
    .headerMiddle.sectionTabs.headerMiddle-withSectionTabs {
        position: absolute !important;
        top: 13px !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 60% !important;
    }
}

/* ===========================================================================
 *  Page Padding Fix
 *  ======================================================================== */

@media (min-width: 40em) {
    .skinBody-withFullDrawer .page-windowScroll.withTabs, 
    .skinBody-withFullDrawer .withTabs .padded-top-page,
    .page-windowScroll.withTabs, 
    html:not(.layout-tv) .withTabs .padded-top-page {
        padding-top: calc(5.5em + (var(--window-inset-top) * .7)) !important;
    }
}

/* ===========================================================================
 *  Header Height
 *  ======================================================================== */

.skinHeader:not(.osdHeader) {
    min-height: 75px !important;
    height: auto !important;
    padding-top: 0.4em !important;
    padding-bottom: 0.4em !important;
}

.emby-tab-button {
    padding-top: 0.3em !important;
    padding-bottom: 0.3em !important;
    line-height: 1.2 !important;
}

Before:

After:

I'll match my colors on the artwork later this week.

The one thing i ALWAYS forget, not everyone has my same setup. WIll look at adding this in (and checking any other elements on a smaller resolution).

July 23

On 7/17/2026 at 11:15 PM, ZanderKeen said:

This really looks decent. TY!

While it looks great on my 4K screen, The only part that bothered me was on my smaller 22" monitor (1680x1050) the top pillbox navigation section was too far down with too much padding so I added this to the very bottom of the CSS & it looks perfect now. ((See photos below to compare))

I'm not really good at programming so I ran it thru my LLM and here is what it spit out.

I figured I would drop the code here.

/* ===========================================================================
 *  Tab Position Fix - Pin tabs to top of header
 *  ======================================================================== */

@media not all and (min-width: 66em) {
    .headerMiddle-withSectionTabs:not(.headerMiddle-tv) {
        margin-top: 0 !important;
        height: 2.5em !important;
        position: absolute !important;
        top: 23px !important;
        left: 0 !important;
        right: 0 !important;
    }
}

@media (min-width: 80em) {
    .headerMiddle.sectionTabs.headerMiddle-withSectionTabs {
        position: absolute !important;
        top: 13px !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 60% !important;
    }
}

/* ===========================================================================
 *  Page Padding Fix
 *  ======================================================================== */

@media (min-width: 40em) {
    .skinBody-withFullDrawer .page-windowScroll.withTabs, 
    .skinBody-withFullDrawer .withTabs .padded-top-page,
    .page-windowScroll.withTabs, 
    html:not(.layout-tv) .withTabs .padded-top-page {
        padding-top: calc(5.5em + (var(--window-inset-top) * .7)) !important;
    }
}

/* ===========================================================================
 *  Header Height
 *  ======================================================================== */

.skinHeader:not(.osdHeader) {
    min-height: 75px !important;
    height: auto !important;
    padding-top: 0.4em !important;
    padding-bottom: 0.4em !important;
}

.emby-tab-button {
    padding-top: 0.3em !important;
    padding-bottom: 0.3em !important;
    line-height: 1.2 !important;
}

Before:

After:

I'll match my colors on the artwork later this week.

where did you get images for the my media bar they super cool. I would really like to use them

Wednesday at 09:27 PM

On 7/23/2026 at 6:45 PM, Mangopulp said:

where did you get images for the my media bar they super cool. I would really like to use them

@Mangopulp Hey I'm glad you noticed & like them. I created them on gimp & hunted for matching images with transparent backgrounds then layered with the emby logo. When I get some time I will post a topic for it with my gimp template I use along with what images I already created. I tried to keep a green theme with them since emby's logo is green.

2026-08-04T16:15:43Z

Hi, first off thanks for this theme. Been running it on my server for a bit and the web client finally looks like something I want to open. Much appreciated.

Ran into one issue and I think I found the cause, so posting it here in case it's useful.

The preview thumbnails when you hover the progress bar during playback weren't showing for me. The bubble itself appeared fine - right size, dark background, chapter name and timestamp all there - just no image.

Turns out Emby builds that bubble with the class "sliderBubble dialog", and it paints the thumbnail as an inline style:

nowPlayingPositionSlider.getBubbleElement().style.backgroundImage = "url('...')"

So it gets caught by this rule in the theme:

html body .dialog {

background: rgb(23, 31, 44) !important;

background-color: rgb(23, 31, 44) !important;

...

}

The background shorthand sets background-image to none, and because it's !important it beats a normal inline style. So the image gets wiped before it can render. Removing just the shorthand line fixes it, and nothing changes visually because the background-color line right underneath is already doing the work.

Same thing on the .sliderBubble rule further up. That one isn't !important so it doesn't kill the image, but the shorthand still resets background-size and background-repeat, so the thumbnail ends up tiled at full size instead of fitted. Changing it to background-color sorts it:

.sliderBubble {

border-radius: var(--ee-smallRadius);

background-color: var(--ee-drawerColor);

}

One caveat - I'm on 4.10.0.22 beta, not stable. So I honestly don't know if this is a 4.10 markup change or if it hits everyone. If someone on stable can hover the progress bar mid playback and say whether the thumbnail shows properly, that would settle it. My guess is the tiling one would still show up on stable even if the first doesn't.

Second thing, unrelated. On the dashboard the server info panel at the top (version, ports, LAN and WAN access) is basically unreadable for me. Emby gives .infoBanner a light background of its own and the theme doesn't restyle it, so you end up with light grey text on near white. Added this and it's fine now:

.infoBanner {

background-color: var(--ee-selectorBackgroundColor);

color: var(--ee-textColor);

}

Worth knowing if you try it - I had to use "html body .infoBanner" with !important to make it stick. The dashboard's own CSS gets lazy loaded when you navigate there, so it lands after the custom CSS and wins at equal specificity. Took me a while to work that out, I thought my rule just wasn't loading at all.

Anyway, minor stuff overall. Thanks again for putting this together.

2026-08-04T16:53:13Z

Follow up on my post above - I checked the stable image so nobody has to guess.

4.9.5.0 has both of the same bits: the bubble is still built as "sliderBubble dialog", and the thumbnail is still set inline with getBubbleElement().style.backgroundImage. So it isn't something new in 4.10, stable is affected the same way.

On the .infoBanner one, that depends on which base Emby theme you're using. Stable defines --card-background-lightness at a few different values, so on a dark base theme the banner comes out dark and there's nothing wrong. Mine resolved light, which is where the unreadable text came from. So that one won't hit everybody.

Sign In

ElegantEmby - Dark Rounded Theme for Emby Web

Recommended Posts

Pejamas 68

craighton 0

Pejamas 68

craighton 0

Pejamas 68

ZanderKeen 79

Pejamas 68

Mangopulp 0

ZanderKeen 79

chrismallia 12

chrismallia 12

Create an account or sign in to comment

Create an account

Sign in

Activity