Jellyfin OLED Theme

jellyfin-oled-theme.css · 3.4 KiB · CSS Raw

/* ============================================================
   Jellyfin OLED (True Black) Theme
   ------------------------------------------------------------
   Same layout as the default Dark theme — only the backgrounds
   are pushed to pure #000000 for OLED displays.
   Accent colors, text, spacing, and layout are untouched.

HOW TO USE:
   Dashboard > General > Custom CSS  (applies to whole server)
        or
   Settings > Display > Custom CSS   (per-user, if enabled)
   Paste this whole file in, save, and refresh.

Tip: Use this ON TOP of the built-in "Dark" theme.
   ============================================================ */

/* ---- Core surfaces: html / body / page containers ---- */
html,
body,
.backgroundContainer,
.mainAnimatedPages,
.dashboardContainer,
.pageContainer,
.libraryPage,
.itemBackdrop,
.detailPageContent {
    background-color: #000 !important;
}

/* Kill the default dark gradient backdrop so it's flat black */
.backgroundContainer.withBackdrop,
.backgroundContainer {
    background-image: none !important;
}

/* ---- Top header / toolbar ---- */
.skinHeader,
.skinHeader-withBackground,
.skinHeader.semiTransparent {
    background: #000 !important;
    background-color: #000 !important;
}

/* Header gradient that shows on library/detail pages */
.skinHeader.headroom--not-top,
.skinHeader-blurred {
    background: #000 !important;
    backdrop-filter: none !important;
}

/* ---- Left navigation drawer ---- */
.mainDrawer,
.drawer,
.navMenuOption,
.navMenuOption-selected,
.emby-scrollbuttons {
    background-color: #000 !important;
}

/* ---- Dialogs / popups / menus ---- */
.dialog,
.formDialog,
.formDialogHeader,
.formDialogFooter,
.dialogContent,
.actionSheet,
.actionSheetContent,
.dialogBackdrop,
.menu,
.paperList,
.emby-select-withcolor,
.emby-input,
.emby-textarea {
    background-color: #000 !important;
}

/* ---- Cards ---- */
/* Keep cards visible against pure black with a whisper-thin
   elevation instead of the default gray. Set to #000 if you
   want them fully flat. */
.cardBox,
.cardBox-bottompadded,
.card:not(.card-hoverable) .cardImageContainer,
.itemsContainer .cardBox {
    background-color: #0a0a0a !important;
}

.cardBox.visualCardBox,
.cardOverlayContainer {
    background-color: transparent !important;
}

/* ---- Detail page primary/secondary panels ---- */
.detailSticky,
.detailPagePrimaryContainer,
.detailPageSecondaryContainer,
.mediaInfoStats,
.itemDetailPage {
    background-color: #000 !important;
}

/* ---- Now Playing / remote control bars ---- */
.nowPlayingBar,
.nowPlayingBarPositionContainer,
.upNextContainer {
    background-color: #000 !important;
    background: #000 !important;
}

/* ---- Login / splash / select-server screens ---- */
#loginPage,
.wizardContent,
.startupWrapper,
.serverButton {
    background-color: #000 !important;
}

/* ---- Misc elevated surfaces that default to dark gray ---- */
.emby-tab-button,
.headerTabs,
.itemsViewSettingsContainer,
.sectionTitleContainer,
.filterDialogContent,
.formDialogContent,
.listItem,
.listItemBody,
.virtualScrollItem {
    background-color: #000 !important;
}

/* Tooltip / snackbar / toast */
.mdl-tooltip,
.toast,
.toastVisible {
    background-color: #0a0a0a !important;
}

/* Progress + scrollbar troughs so they don't look gray on black */
.itemProgressBarForeground {
    /* leave accent color alone */
}
.itemProgressBar,
.mainDrawer::-webkit-scrollbar-track {
    background-color: #1a1a1a !important;
}

1	/* ============================================================
2	Jellyfin OLED (True Black) Theme
3	------------------------------------------------------------
4	Same layout as the default Dark theme — only the backgrounds
5	are pushed to pure #000000 for OLED displays.
6	Accent colors, text, spacing, and layout are untouched.
7
8	HOW TO USE:
9	Dashboard > General > Custom CSS (applies to whole server)
10	or
11	Settings > Display > Custom CSS (per-user, if enabled)
12	Paste this whole file in, save, and refresh.
13
14	Tip: Use this ON TOP of the built-in "Dark" theme.
15	============================================================ */
16
17	/* ---- Core surfaces: html / body / page containers ---- */
18	html,
19	body,
20	.backgroundContainer,
21	.mainAnimatedPages,
22	.dashboardContainer,
23	.pageContainer,
24	.libraryPage,
25	.itemBackdrop,
26	.detailPageContent {
27	background-color: #000 !important;
28	}
29
30	/* Kill the default dark gradient backdrop so it's flat black */
31	.backgroundContainer.withBackdrop,
32	.backgroundContainer {
33	background-image: none !important;
34	}
35
36	/* ---- Top header / toolbar ---- */
37	.skinHeader,
38	.skinHeader-withBackground,
39	.skinHeader.semiTransparent {
40	background: #000 !important;
41	background-color: #000 !important;
42	}
43
44	/* Header gradient that shows on library/detail pages */
45	.skinHeader.headroom--not-top,
46	.skinHeader-blurred {
47	background: #000 !important;
48	backdrop-filter: none !important;
49	}
50
51	/* ---- Left navigation drawer ---- */
52	.mainDrawer,
53	.drawer,
54	.navMenuOption,
55	.navMenuOption-selected,
56	.emby-scrollbuttons {
57	background-color: #000 !important;
58	}
59
60	/* ---- Dialogs / popups / menus ---- */
61	.dialog,
62	.formDialog,
63	.formDialogHeader,
64	.formDialogFooter,
65	.dialogContent,
66	.actionSheet,
67	.actionSheetContent,
68	.dialogBackdrop,
69	.menu,
70	.paperList,
71	.emby-select-withcolor,
72	.emby-input,
73	.emby-textarea {
74	background-color: #000 !important;
75	}
76
77	/* ---- Cards ---- */
78	/* Keep cards visible against pure black with a whisper-thin
79	elevation instead of the default gray. Set to #000 if you
80	want them fully flat. */
81	.cardBox,
82	.cardBox-bottompadded,
83	.card:not(.card-hoverable) .cardImageContainer,
84	.itemsContainer .cardBox {
85	background-color: #0a0a0a !important;
86	}
87
88	.cardBox.visualCardBox,
89	.cardOverlayContainer {
90	background-color: transparent !important;
91	}
92
93	/* ---- Detail page primary/secondary panels ---- */
94	.detailSticky,
95	.detailPagePrimaryContainer,
96	.detailPageSecondaryContainer,
97	.mediaInfoStats,
98	.itemDetailPage {
99	background-color: #000 !important;
100	}
101
102	/* ---- Now Playing / remote control bars ---- */
103	.nowPlayingBar,
104	.nowPlayingBarPositionContainer,
105	.upNextContainer {
106	background-color: #000 !important;
107	background: #000 !important;
108	}
109
110	/* ---- Login / splash / select-server screens ---- */
111	#loginPage,
112	.wizardContent,
113	.startupWrapper,
114	.serverButton {
115	background-color: #000 !important;
116	}
117
118	/* ---- Misc elevated surfaces that default to dark gray ---- */
119	.emby-tab-button,
120	.headerTabs,
121	.itemsViewSettingsContainer,
122	.sectionTitleContainer,
123	.filterDialogContent,
124	.formDialogContent,
125	.listItem,
126	.listItemBody,
127	.virtualScrollItem {
128	background-color: #000 !important;
129	}
130
131	/* Tooltip / snackbar / toast */
132	.mdl-tooltip,
133	.toast,
134	.toastVisible {
135	background-color: #0a0a0a !important;
136	}
137
138	/* Progress + scrollbar troughs so they don't look gray on black */
139	.itemProgressBarForeground {
140	/* leave accent color alone */
141	}
142	.itemProgressBar,
143	.mainDrawer::-webkit-scrollbar-track {
144	background-color: #1a1a1a !important;
145	}