feat(ui): restore original clean Jellyfin layout with pure OLED pitch black theme

Dockerfile

@@ -39,7 +39,11 @@ RUN python3 -m pip install --upgrade pip --break-system-packages && \
 COPY . .
 COPY apex /opt/apex
 
-RUN chmod +x /app/combined-entrypoint.sh /opt/apex/health_doctor.py /opt/apex/combined-entrypoint.sh
+RUN if [ -f /opt/apex/theme/pitch-black.css ] && [ -d /usr/share/jellyfin/web ]; then \
+        cp /opt/apex/theme/pitch-black.css /usr/share/jellyfin/web/pitch-black.css \
+        && sed -i 's|</head>|<link rel="stylesheet" href="pitch-black.css"></head>|' /usr/share/jellyfin/web/index.html; \
+    fi \
+    && chmod +x /app/combined-entrypoint.sh /opt/apex/health_doctor.py /opt/apex/combined-entrypoint.sh
 
 EXPOSE 7860
 

apex/combined-entrypoint.sh

@@ -64,8 +64,25 @@ restore_jellyfin_local() {
     ln -s "$LOCAL_ROOT/data/metadata" /data/jellyfin/data/metadata 2>/dev/null || true
     if [ -d "$LOCAL_ROOT/data/metadata" ]; then
         mkdir -p /data/jellyfin/data/metadata.snapshot
-        cp -a -f "$LOCAL_ROOT/data/metadata/." /data/jellyfin/data/metadata.snapshot/ 2>/dev/null || true
     fi
+
+    # Seed and sync Pitch Black OLED dark theme branding
+    if [ -f "/opt/apex/theme/branding.xml" ]; then
+        echo "[JELLYFIN] Applying Pitch Black OLED dark theme branding..."
+        cp -f /opt/apex/theme/branding.xml "$LOCAL_ROOT/config/branding.xml"
+        mkdir -p /data/jellyfin/config
+        cp -f /opt/apex/theme/branding.xml /data/jellyfin/config/branding.xml 2>/dev/null || true
+    fi
+
+    # Pre-inject pitch-black.css into web assets for instant loading
+    if [ -f "/opt/apex/theme/pitch-black.css" ] && [ -d "/usr/share/jellyfin/web" ]; then
+        cp -f /opt/apex/theme/pitch-black.css /usr/share/jellyfin/web/pitch-black.css 2>/dev/null || true
+        if [ -f "/usr/share/jellyfin/web/index.html" ] && ! grep -q "pitch-black.css" /usr/share/jellyfin/web/index.html; then
+            sed -i 's|</head>|<link rel="stylesheet" href="pitch-black.css"></head>|' /usr/share/jellyfin/web/index.html 2>/dev/null || true
+            echo "[JELLYFIN] Pitch Black OLED theme injected into web index.html."
+        fi
+    fi
+
     echo "[JELLYFIN] Local datadir ready. Metadata redirected to fast local disk."
 }
 

apex/entrypoint.sh

@@ -49,8 +49,25 @@ restore_jellyfin_local() {
     ln -s "$LOCAL_ROOT/data/metadata" /data/jellyfin/data/metadata 2>/dev/null || true
     if [ -d "$LOCAL_ROOT/data/metadata" ]; then
         mkdir -p /data/jellyfin/data/metadata.snapshot
-        cp -a -f "$LOCAL_ROOT/data/metadata/." /data/jellyfin/data/metadata.snapshot/ 2>/dev/null || true
     fi
+
+    # Seed and sync Pitch Black OLED dark theme branding
+    if [ -f "/opt/apex/theme/branding.xml" ]; then
+        echo "[JELLYFIN] Applying Pitch Black OLED dark theme branding..."
+        cp -f /opt/apex/theme/branding.xml "$LOCAL_ROOT/config/branding.xml"
+        mkdir -p /data/jellyfin/config
+        cp -f /opt/apex/theme/branding.xml /data/jellyfin/config/branding.xml 2>/dev/null || true
+    fi
+
+    # Pre-inject pitch-black.css into web assets for instant loading
+    if [ -f "/opt/apex/theme/pitch-black.css" ] && [ -d "/usr/share/jellyfin/web" ]; then
+        cp -f /opt/apex/theme/pitch-black.css /usr/share/jellyfin/web/pitch-black.css 2>/dev/null || true
+        if [ -f "/usr/share/jellyfin/web/index.html" ] && ! grep -q "pitch-black.css" /usr/share/jellyfin/web/index.html; then
+            sed -i 's|</head>|<link rel="stylesheet" href="pitch-black.css"></head>|' /usr/share/jellyfin/web/index.html 2>/dev/null || true
+            echo "[JELLYFIN] Pitch Black OLED theme injected into web index.html."
+        fi
+    fi
+
     echo "[JELLYFIN] Local datadir ready. Metadata redirected to fast local disk."
 }
 

apex/tests/test_pitch_black_theme.py

@@ -0,0 +1,31 @@
+import os
+import xml.etree.ElementTree as ET
+import pytest
+
+def test_pitch_black_theme_exists_and_valid():
+    theme_path = os.path.join(os.path.dirname(__file__), "..", "theme", "pitch-black.css")
+    assert os.path.exists(theme_path), "pitch-black.css must exist"
+    
+    with open(theme_path, "r", encoding="utf-8") as f:
+        content = f.read()
+    
+    # Assert pure pitch black and red accent tokens
+    assert "#000000" in content, "Must enforce pure pitch black background"
+    assert "#e50914" in content.lower(), "Must use Netflix red accent"
+    
+    # Assert core components styled
+    assert "#loginPage" in content, "Must style login page in pure black"
+    assert "backgroundContainer" in content, "Must style background container"
+    assert "itemProgressBarForeground" in content, "Must style playback progress bar"
+
+def test_branding_xml_is_valid():
+    xml_path = os.path.join(os.path.dirname(__file__), "..", "theme", "branding.xml")
+    assert os.path.exists(xml_path), "branding.xml must exist"
+    
+    tree = ET.parse(xml_path)
+    root = tree.getroot()
+    assert root.tag == "BrandingOptions"
+    custom_css = root.find("CustomCss")
+    assert custom_css is not None
+    assert "#000000" in (custom_css.text or "")
+    assert "#e50914" in (custom_css.text or "").lower()

apex/theme/branding.xml

@@ -0,0 +1,154 @@
+<?xml version="1.0" encoding="utf-8"?>
+<BrandingOptions xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
+  <LoginDisclaimer />
+  <CustomCss><![CDATA[/* ==========================================================================
+   Apex / Jellyfin — Pitch Black OLED Dark Theme
+   Clean Original Layout with 100% Pure Pitch Black Surfaces & Netflix Red
+   ========================================================================== */
+
+:root,
+:root[data-theme] {
+  --accent: #E50914 !important;
+  --accent-hover: #b80710 !important;
+  --accent-glow: rgba(229, 9, 20, 0.4) !important;
+  --accentColor: #E50914 !important;
+  --accentHoverColor: #b80710 !important;
+  --uiAccentColor: #E50914 !important;
+  --activeColor: #E50914 !important;
+  --btnSubmitColor: #E50914 !important;
+  --btnMiniPlayColor: #E50914 !important;
+  --highlightOutlineColor: #E50914 !important;
+  --cardResumeProgressColor: #E50914 !important;
+  --osdSeekBarPlayedColor: #E50914 !important;
+  --osdSeekBarThumbColor: #E50914 !important;
+
+  --darkerGradientPoint: #000000 !important;
+  --darkerGradientPointAlpha: rgba(0, 0, 0, 0.95) !important;
+  --lighterGradientPoint: #050505 !important;
+  --lighterGradientPointAlpha: rgba(5, 5, 5, 0.95) !important;
+  --headerColor: rgba(0, 0, 0, 0.92) !important;
+  --drawerColor: rgba(0, 0, 0, 0.98) !important;
+  --borderColor: #222222 !important;
+  --darkerBorderColor: #141414 !important;
+  --selectorBackgroundColor: #111111 !important;
+  --tableBodyColor: #050505 !important;
+  --textareaBackgroundColor: #111111 !important;
+
+  --jf-palette-background-default: #000000 !important;
+  --jf-palette-background-paper: #0c0c0c !important;
+  --jf-palette-AppBar-defaultBg: rgba(0, 0, 0, 0.92) !important;
+  --jf-palette-primary-main: #E50914 !important;
+  --jf-palette-secondary-main: #E50914 !important;
+  --jf-palette-action-hover: rgba(229, 9, 20, 0.12) !important;
+  --jf-palette-action-selected: rgba(229, 9, 20, 0.22) !important;
+  --jf-palette-action-focus: rgba(229, 9, 20, 0.22) !important;
+}
+
+html,
+body,
+.backgroundContainer,
+.backdropContainer,
+.mainDrawer,
+.skinHeader,
+.page,
+.view,
+.dialog,
+.actionSheet,
+.cardBox,
+.visualCardBox,
+.paperList,
+.mainDrawer-scrollContainer,
+.dashboardSection,
+.emby-tabs-slider,
+div#itemDetailPage {
+  background-color: #000000 !important;
+  color: #FFFFFF;
+}
+
+.backgroundContainer.withBackdrop {
+  background-color: rgba(0, 0, 0, 0.88) !important;
+}
+
+.backdropContainer {
+  background-color: #000000 !important;
+}
+
+#loginPage {
+  background-color: #000000 !important;
+}
+
+#loginPage .readOnlyContent {
+  background-color: #0a0a0a !important;
+  border: 1px solid #222222 !important;
+  border-radius: 8px !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9) !important;
+}
+
+#loginPage .emby-input {
+  background: #161616 !important;
+  border: 1px solid #2a2a2a !important;
+  color: #FFFFFF !important;
+}
+
+#loginPage .emby-input:focus {
+  border-color: #E50914 !important;
+}
+
+#loginPage .raised.button-submit,
+#loginPage .MuiButton-containedPrimary {
+  background-color: #E50914 !important;
+  color: #FFFFFF !important;
+  font-weight: 600 !important;
+}
+
+::selection {
+  background: #E50914 !important;
+  color: #FFFFFF !important;
+}
+
+::-moz-selection {
+  background: #E50914 !important;
+  color: #FFFFFF !important;
+}
+
+.emby-button.show-focus:focus,
+.paper-icon-button-light.show-focus:focus {
+  background-color: #E50914 !important;
+  color: #FFFFFF !important;
+}
+
+.emby-checkbox:checked + span + .checkboxOutline {
+  background-color: #E50914 !important;
+  border-color: #E50914 !important;
+}
+
+.itemProgressBarForeground {
+  background-color: #E50914 !important;
+}
+
+.cardOverlayContainer > .cardOverlayFab-primary,
+.listItemImageButton {
+  background-color: #E50914 !important;
+  color: #FFFFFF !important;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #000000;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #2a2a2a;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #E50914;
+}
+]]></CustomCss>
+  <SplashscreenEnabled>true</SplashscreenEnabled>
+</BrandingOptions>

apex/theme/pitch-black.css

@@ -0,0 +1,163 @@
+/* ==========================================================================
+   Apex / Jellyfin — Pitch Black OLED Dark Theme
+   Clean Original Layout with 100% Pure Pitch Black Surfaces & Netflix Red
+   ========================================================================== */
+
+:root,
+:root[data-theme] {
+  /* Design Tokens */
+  --accent: #E50914 !important;
+  --accent-hover: #b80710 !important;
+  --accent-glow: rgba(229, 9, 20, 0.4) !important;
+  --accentColor: #E50914 !important;
+  --accentHoverColor: #b80710 !important;
+  --uiAccentColor: #E50914 !important;
+  --activeColor: #E50914 !important;
+  --btnSubmitColor: #E50914 !important;
+  --btnMiniPlayColor: #E50914 !important;
+  --highlightOutlineColor: #E50914 !important;
+  --cardResumeProgressColor: #E50914 !important;
+  --osdSeekBarPlayedColor: #E50914 !important;
+  --osdSeekBarThumbColor: #E50914 !important;
+
+  /* Pure OLED Pitch Black Tokens */
+  --darkerGradientPoint: #000000 !important;
+  --darkerGradientPointAlpha: rgba(0, 0, 0, 0.95) !important;
+  --lighterGradientPoint: #050505 !important;
+  --lighterGradientPointAlpha: rgba(5, 5, 5, 0.95) !important;
+  --headerColor: rgba(0, 0, 0, 0.92) !important;
+  --drawerColor: rgba(0, 0, 0, 0.98) !important;
+  --borderColor: #222222 !important;
+  --darkerBorderColor: #141414 !important;
+  --selectorBackgroundColor: #111111 !important;
+  --tableBodyColor: #050505 !important;
+  --textareaBackgroundColor: #111111 !important;
+
+  /* Jellyfin 12 MUI Tokens */
+  --jf-palette-background-default: #000000 !important;
+  --jf-palette-background-paper: #0c0c0c !important;
+  --jf-palette-AppBar-defaultBg: rgba(0, 0, 0, 0.92) !important;
+  --jf-palette-primary-main: #E50914 !important;
+  --jf-palette-secondary-main: #E50914 !important;
+  --jf-palette-action-hover: rgba(229, 9, 20, 0.12) !important;
+  --jf-palette-action-selected: rgba(229, 9, 20, 0.22) !important;
+  --jf-palette-action-focus: rgba(229, 9, 20, 0.22) !important;
+}
+
+/* --------------------------------------------------------------------------
+   1. Pure OLED Pitch Black Backgrounds (#000000) Everywhere
+   -------------------------------------------------------------------------- */
+html,
+body,
+.backgroundContainer,
+.backdropContainer,
+.mainDrawer,
+.skinHeader,
+.page,
+.view,
+.dialog,
+.actionSheet,
+.cardBox,
+.visualCardBox,
+.paperList,
+.mainDrawer-scrollContainer,
+.dashboardSection,
+.emby-tabs-slider,
+div#itemDetailPage {
+  background-color: #000000 !important;
+  color: #FFFFFF;
+}
+
+.backgroundContainer.withBackdrop {
+  background-color: rgba(0, 0, 0, 0.88) !important;
+}
+
+.backdropContainer {
+  background-color: #000000 !important;
+}
+
+/* --------------------------------------------------------------------------
+   2. Pure Pitch Black Login Page
+   -------------------------------------------------------------------------- */
+#loginPage {
+  background-color: #000000 !important;
+}
+
+#loginPage .readOnlyContent {
+  background-color: #0a0a0a !important;
+  border: 1px solid #222222 !important;
+  border-radius: 8px !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.9) !important;
+}
+
+#loginPage .emby-input {
+  background: #161616 !important;
+  border: 1px solid #2a2a2a !important;
+  color: #FFFFFF !important;
+}
+
+#loginPage .emby-input:focus {
+  border-color: #E50914 !important;
+}
+
+#loginPage .raised.button-submit,
+#loginPage .MuiButton-containedPrimary {
+  background-color: #E50914 !important;
+  color: #FFFFFF !important;
+  font-weight: 600 !important;
+}
+
+/* --------------------------------------------------------------------------
+   3. Netflix Red Interactive Elements & Focus
+   -------------------------------------------------------------------------- */
+::selection {
+  background: #E50914 !important;
+  color: #FFFFFF !important;
+}
+
+::-moz-selection {
+  background: #E50914 !important;
+  color: #FFFFFF !important;
+}
+
+.emby-button.show-focus:focus,
+.paper-icon-button-light.show-focus:focus {
+  background-color: #E50914 !important;
+  color: #FFFFFF !important;
+}
+
+.emby-checkbox:checked + span + .checkboxOutline {
+  background-color: #E50914 !important;
+  border-color: #E50914 !important;
+}
+
+.itemProgressBarForeground {
+  background-color: #E50914 !important;
+}
+
+.cardOverlayContainer > .cardOverlayFab-primary,
+.listItemImageButton {
+  background-color: #E50914 !important;
+  color: #FFFFFF !important;
+}
+
+/* --------------------------------------------------------------------------
+   4. Custom Dark Scrollbars
+   -------------------------------------------------------------------------- */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #000000;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #2a2a2a;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #E50914;
+}