From dd6942f8dbf6a946f3ecd3964596e048bd508167 Mon Sep 17 00:00:00 2001
From: HighImKevin <kevinjohncampbell@gmail.com>
Date: Wed, 3 Dec 2025 22:28:17 -0500
Subject: [PATCH] Add option to enable/disable the Christmas background on the
 home screen

---
 kefinTweaks-default-config.js |  1 +
 scripts/configuration.js      | 20 ++++++++++++++------
 scripts/homeScreen.css        |  4 ++--
 scripts/homeScreen.js         |  9 +++++++--
 4 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/kefinTweaks-default-config.js b/kefinTweaks-default-config.js
index b49c12e..f9defc3 100644
--- a/kefinTweaks-default-config.js
+++ b/kefinTweaks-default-config.js
@@ -105,6 +105,7 @@ window.KefinTweaksDefaultConfig = {
     "seasonal": {
       "enabled": true,
       "enableSeasonalAnimations": true,
+      "enableSeasonalBackground": true,
       "defaultItemLimit": 16,
       "defaultSortOrder": "Random",
       "defaultCardFormat": "Poster",
diff --git a/scripts/configuration.js b/scripts/configuration.js
index 7786147..d42f571 100644
--- a/scripts/configuration.js
+++ b/scripts/configuration.js
@@ -1816,13 +1816,20 @@
                 </summary>
                 <div style="padding: 0.75em 0 0 0;">
                     <div id="homeScreen_seasonal_container">
-                        <div class="listItem" style="border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 0.75em; margin-bottom: 1em;">
-                            <div class="listItemContent">
-                                <div class="listItemBodyText" style="margin-bottom: 0.5em;">Enable Seasonal Animations</div>
-                                <div class="listItemBodyText secondary" style="margin-bottom: 0.75em; font-size: 0.9em;">Enable falling snow/leaves animations for seasonal themes</div>
-                                ${buildJellyfinCheckbox('homeScreen_seasonal_enableSeasonalAnimations', seasonal.enableSeasonalAnimations !== false, 'Enabled')}
+                            <div class="listItem" style="border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 0.75em; margin-bottom: 1em;">
+                                <div class="listItemContent">
+                                    <div class="listItemBodyText" style="margin-bottom: 0.5em;">Enable Seasonal Animations</div>
+                                    <div class="listItemBodyText secondary" style="margin-bottom: 0.75em; font-size: 0.9em;">Enable falling snow/leaves animations for seasonal themes</div>
+                                    ${buildJellyfinCheckbox('homeScreen_seasonal_enableSeasonalAnimations', seasonal.enableSeasonalAnimations !== false, 'Enabled')}
+                                </div>
+                            </div>
+                            <div class="listItem" style="border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; padding: 0.75em; margin-bottom: 1em;">
+                                <div class="listItemContent">
+                                    <div class="listItemBodyText" style="margin-bottom: 0.5em;">Enable Christmas Background</div>
+                                    <div class="listItemBodyText secondary" style="margin-bottom: 0.75em; font-size: 0.9em;">Enable the festive background image for the Christmas theme</div>
+                                    ${buildJellyfinCheckbox('homeScreen_seasonal_enableSeasonalBackground', seasonal.enableSeasonalBackground !== false, 'Enabled')}
+                                </div>
                             </div>
-                        </div>
                         <div id="homeScreen_seasonal_seasons_list" style="margin-bottom: 1em;">
                             ${seasonalSectionsHtml}
                         </div>
@@ -5080,6 +5087,7 @@ window.KefinTweaksConfig = ${JSON.stringify(config, null, 2)};`;
             seasonal: {
                 enabled: document.getElementById('homeScreen_seasonal_enabled')?.checked !== false,
                 enableSeasonalAnimations: document.getElementById('homeScreen_seasonal_enableSeasonalAnimations')?.checked !== false,
+                enableSeasonalBackground: document.getElementById('homeScreen_seasonal_enableSeasonalBackground')?.checked !== false,
                 defaultItemLimit: 16,
                 defaultSortOrder: 'Random',
                 defaultCardFormat: 'Poster',
diff --git a/scripts/homeScreen.css b/scripts/homeScreen.css
index abdd5a1..1b36dcf 100644
--- a/scripts/homeScreen.css
+++ b/scripts/homeScreen.css
@@ -58,7 +58,7 @@
 }
 
 /* Halloween theme */
-.home-screen.halloween-theme #reactRoot:has(.libraryPage:not(.hide) .pageTabContent.is-active[data-index="0"])>.backgroundContainer::after {
+.home-screen.halloween-theme.with-background #reactRoot:has(.libraryPage:not(.hide) .pageTabContent.is-active[data-index="0"])>.backgroundContainer::after {
     content: '';
     position: absolute;
     top: 0;
@@ -71,7 +71,7 @@
 }
 
 /* Christmas theme */
-.home-screen.christmas-theme #reactRoot:has(.libraryPage:not(.hide) .pageTabContent.is-active[data-index="0"])>.backgroundContainer::after {
+.home-screen.christmas-theme.with-background #reactRoot:has(.libraryPage:not(.hide) .pageTabContent.is-active[data-index="0"])>.backgroundContainer::after {
     content: '';
     position: absolute;
     top: 0;
diff --git a/scripts/homeScreen.js b/scripts/homeScreen.js
index 52497d9..8d0bd19 100644
--- a/scripts/homeScreen.js
+++ b/scripts/homeScreen.js
@@ -142,6 +142,7 @@
         const homeScreenConfig = window.KefinTweaksConfig?.homeScreen || {};
         const seasonalConfig = homeScreenConfig.seasonal || {};
         const enableSeasonalAnimations = seasonalConfig.enableSeasonalAnimations !== false;
+        const enableSeasonalBackground = seasonalConfig.enableSeasonalBackground !== false;
         
         // Manage home-screen class
         if (isHomePage && body) {
@@ -153,7 +154,7 @@
         // Manage theme classes (only on home page)
         if (isHomePage) {
             // Remove all existing theme classes
-            const themeClasses = ['halloween-theme', 'christmas-theme', 'valentines-theme', 'newyear-theme'];
+            const themeClasses = ['halloween-theme', 'christmas-theme', 'valentines-theme', 'newyear-theme', 'with-background'];
             themeClasses.forEach(themeClass => body.classList.remove(themeClass));
             
             // Add appropriate theme class based on current date
@@ -162,6 +163,10 @@
             } else if (isChristmasPeriod()) {
                 body.classList.add('christmas-theme');
 
+                if (enableSeasonalBackground) {
+                    body.classList.add('with-background');
+                }
+
                 if (enableSeasonalAnimations) {
                     // Import the Flurry module and leverage it from jQuery. /scripts/third party/flurry.js by appending it to the head
                     const flurryScriptSrc = (window.KefinTweaksConfig.kefinTweaksRoot || '') + 'scripts/third party/jquery.flurry.min.js';
@@ -192,7 +197,7 @@
             }
         } else {
             // Remove all theme classes when not on home page
-            const themeClasses = ['halloween-theme', 'christmas-theme', 'valentines-theme', 'newyear-theme'];
+            const themeClasses = ['halloween-theme', 'christmas-theme', 'valentines-theme', 'newyear-theme', 'with-background'];
             themeClasses.forEach(themeClass => body.classList.remove(themeClass));
         }
     }