From 95d58db5f9e4cb43b53c0eb6c0a9795a7fc09c1b Mon Sep 17 00:00:00 2001
From: Bill Thornton <billt2006@gmail.com>
Date: Mon, 21 Dec 2020 10:38:54 -0500
Subject: [PATCH] Restore dashboard theme option

---
 .../displaySettings/displaySettings.js          | 17 +++++++++--------
 .../displaySettings.template.html               |  4 ++++
 src/scripts/autoThemes.js                       | 12 ++++++++++--
 3 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/components/displaySettings/displaySettings.js b/src/components/displaySettings/displaySettings.js
index 289fa40d50..261c25a89c 100644
--- a/src/components/displaySettings/displaySettings.js
+++ b/src/components/displaySettings/displaySettings.js
@@ -17,21 +17,17 @@ import template from './displaySettings.template.html';
 
 /* eslint-disable indent */
 
-    function fillThemes(context, userSettings) {
-        const select = context.querySelector('#selectTheme');
-
+    function fillThemes(select, selectedTheme) {
         skinManager.getThemes().then(themes => {
             select.innerHTML = themes.map(t => {
                 return `<option value="${t.id}">${t.name}</option>`;
             }).join('');
 
             // get default theme
-            const defaultTheme = themes.find(theme => {
-                return theme.default;
-            });
+            const defaultTheme = themes.find(theme => theme.default);
 
             // set the current theme
-            select.value = userSettings.theme() || defaultTheme.id;
+            select.value = selectedTheme || defaultTheme.id;
         });
     }
 
@@ -89,6 +85,8 @@ import template from './displaySettings.template.html';
             context.querySelector('.learnHowToContributeContainer').classList.add('hide');
         }
 
+        context.querySelector('.selectDashboardThemeContainer').classList.toggle('hide', !user.Policy.IsAdministrator);
+
         if (appHost.supports('screensaver')) {
             context.querySelector('.selectScreensaverContainer').classList.remove('hide');
         } else {
@@ -111,7 +109,9 @@ import template from './displaySettings.template.html';
             context.querySelector('.fldThemeVideo').classList.add('hide');
         }
 
-        fillThemes(context, userSettings);
+        fillThemes(context.querySelector('#selectTheme'), userSettings.theme());
+        fillThemes(context.querySelector('#selectDashboardTheme'), userSettings.dashboardTheme());
+
         loadScreensavers(context, userSettings);
 
         context.querySelector('.chkDisplayMissingEpisodes').checked = user.Configuration.DisplayMissingEpisodes || false;
@@ -147,6 +147,7 @@ import template from './displaySettings.template.html';
         userSettingsInstance.enableThemeSongs(context.querySelector('#chkThemeSong').checked);
         userSettingsInstance.enableThemeVideos(context.querySelector('#chkThemeVideo').checked);
         userSettingsInstance.theme(context.querySelector('#selectTheme').value);
+        userSettingsInstance.dashboardTheme(context.querySelector('#selectDashboardTheme').value);
         userSettingsInstance.screensaver(context.querySelector('.selectScreensaver').value);
 
         userSettingsInstance.libraryPageSize(context.querySelector('#txtLibraryPageSize').value);
diff --git a/src/components/displaySettings/displaySettings.template.html b/src/components/displaySettings/displaySettings.template.html
index 1b9bf00376..ab298f7802 100644
--- a/src/components/displaySettings/displaySettings.template.html
+++ b/src/components/displaySettings/displaySettings.template.html
@@ -126,6 +126,10 @@
         <select id="selectTheme" is="emby-select" label="${LabelTheme}"></select>
     </div>
 
+    <div class="selectContainer selectDashboardThemeContainer hide">
+        <select id="selectDashboardTheme" is="emby-select" label="${LabelDashboardTheme}"></select>
+    </div>
+
     <div class="selectContainer hide selectScreensaverContainer">
         <select is="emby-select" class="selectScreensaver" label="${LabelScreensaver}"></select>
     </div>
diff --git a/src/scripts/autoThemes.js b/src/scripts/autoThemes.js
index 35bfdbf738..9d29d735d6 100644
--- a/src/scripts/autoThemes.js
+++ b/src/scripts/autoThemes.js
@@ -1,8 +1,8 @@
 import * as userSettings from './settings/userSettings';
-import * as webSettings from './settings/webSettings';
 import skinManager from './themeManager';
 import { Events } from 'jellyfin-apiclient';
 import ServerConnections from '../components/ServerConnections';
+import { pageClassOn } from '../scripts/clientUtils';
 
 // Set the default theme when loading
 skinManager.setTheme(userSettings.theme())
@@ -12,6 +12,14 @@ skinManager.setTheme(userSettings.theme())
     .then(() => document.body.classList.add('force-scroll'));
 
 // set the saved theme once a user authenticates
-Events.on(ServerConnections, 'localusersignedin', function (e, user) {
+Events.on(ServerConnections, 'localusersignedin', () => {
     skinManager.setTheme(userSettings.theme());
 });
+
+pageClassOn('viewbeforeshow', 'page', function () {
+    if (this.classList.contains('type-interior')) {
+        skinManager.setTheme(userSettings.dashboardTheme());
+    } else {
+        skinManager.setTheme(userSettings.theme());
+    }
+});