feat(ui): reset Jellyfin branding and web assets to stock default

Dockerfile

@@ -39,11 +39,7 @@ RUN python3 -m pip install --upgrade pip --break-system-packages && \
 COPY . .
 COPY apex /opt/apex
 
-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
+RUN chmod +x /app/combined-entrypoint.sh /opt/apex/health_doctor.py /opt/apex/combined-entrypoint.sh
 
 EXPOSE 7860
 

apex/combined-entrypoint.sh

@@ -66,21 +66,28 @@ restore_jellyfin_local() {
         mkdir -p /data/jellyfin/data/metadata.snapshot
     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."
+    # Ensure branding is completely reset to stock Jellyfin default
+    for b_path in "$LOCAL_ROOT/config/branding.xml" "/data/jellyfin/config/branding.xml"; do
+        if [ -f "$b_path" ]; then
+            python3 -c "
+import xml.etree.ElementTree as ET
+try:
+    tree = ET.parse('$b_path')
+    root = tree.getroot()
+    css_node = root.find('CustomCss')
+    if css_node is not None and css_node.text:
+        css_node.text = ''
+        tree.write('$b_path', encoding='utf-8', xml_declaration=True)
+except Exception:
+    pass
+" 2>/dev/null || true
         fi
+    done
+
+    # Clean up any custom css files and restore stock index.html
+    rm -f /usr/share/jellyfin/web/netflix-dark.css /usr/share/jellyfin/web/pitch-black.css 2>/dev/null || true
+    if [ -f "/usr/share/jellyfin/web/index.html" ]; then
+        sed -i 's|<link rel="stylesheet" href="[^"]*css"></head>|</head>|g' /usr/share/jellyfin/web/index.html 2>/dev/null || true
     fi
 
     echo "[JELLYFIN] Local datadir ready. Metadata redirected to fast local disk."

apex/entrypoint.sh

@@ -51,21 +51,28 @@ restore_jellyfin_local() {
         mkdir -p /data/jellyfin/data/metadata.snapshot
     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."
+    # Ensure branding is completely reset to stock Jellyfin default
+    for b_path in "$LOCAL_ROOT/config/branding.xml" "/data/jellyfin/config/branding.xml"; do
+        if [ -f "$b_path" ]; then
+            python3 -c "
+import xml.etree.ElementTree as ET
+try:
+    tree = ET.parse('$b_path')
+    root = tree.getroot()
+    css_node = root.find('CustomCss')
+    if css_node is not None and css_node.text:
+        css_node.text = ''
+        tree.write('$b_path', encoding='utf-8', xml_declaration=True)
+except Exception:
+    pass
+" 2>/dev/null || true
         fi
+    done
+
+    # Clean up any custom css files and restore stock index.html
+    rm -f /usr/share/jellyfin/web/netflix-dark.css /usr/share/jellyfin/web/pitch-black.css 2>/dev/null || true
+    if [ -f "/usr/share/jellyfin/web/index.html" ]; then
+        sed -i 's|<link rel="stylesheet" href="[^"]*css"></head>|</head>|g' /usr/share/jellyfin/web/index.html 2>/dev/null || true
     fi
 
     echo "[JELLYFIN] Local datadir ready. Metadata redirected to fast local disk."

apex/tests/test_pitch_black_theme.py

@@ -1,31 +0,0 @@
-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

@@ -1,154 +0,0 @@
-<?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

@@ -1,163 +0,0 @@
-/* ==========================================================================
-   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;
-}