ElegantEmby - Dark Rounded Theme for Emby Web

[Pejamas 59]

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.