Jump to content

ElegantEmby - Dark Rounded Theme for Emby Web

Pejamas

By Pejamas
in Web App CSS

 Share

Recommended Posts

Pejamas

Pejamas 66

Posted
Posted

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.

  • Like 4
  • 4 weeks later...
craighton

craighton 0

Posted
Posted

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.

Screenshot2026-07-10194330.thumb.png.0562ca252ff4043ef6fd31b27792631f.png

 

Pejamas

Pejamas 66

Posted
  • Author
Posted
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.

Screenshot2026-07-10194330.thumb.png.0562ca252ff4043ef6fd31b27792631f.png

 

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.

craighton

craighton 0

Posted
Posted

It appears it has to do with  

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

 

And HTML 

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

 

Pejamas

Pejamas 66

Posted
  • Author
Posted
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

image.thumb.png.e4b967fce77909561a5d827cc9b37861.png

Elegantemby.css

ZanderKeen

ZanderKeen 77

Posted
Posted

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:

Screenshot_20260717_210104.thumb.png.ee6fc0e7d9e160feccdc5db5c3eccd7f.png

After:

Screenshot_20260717_210132.thumb.png.30a7f066b8ee7da269abdc7bccae3cee.png

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

Pejamas

Pejamas 66

Posted
  • Author
Posted
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:

Screenshot_20260717_210104.thumb.png.ee6fc0e7d9e160feccdc5db5c3eccd7f.png

After:

Screenshot_20260717_210132.thumb.png.30a7f066b8ee7da269abdc7bccae3cee.png

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

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
 Share
Go to topic listing
×
×
  • Create New...