From 06f6a30797bd98b93488ada5c20a380ac1fa4928 Mon Sep 17 00:00:00 2001
From: MasterAcnolo <68693319+MasterAcnolo@users.noreply.github.com>
Date: Sun, 12 Apr 2026 19:32:05 +0200
Subject: [PATCH] Feat: Enhance theme settings with new button styles for open
 theme and JSON options

---
 public/script/customthemes.js          | 16 ++++++++++------
 public/styles/layout/settingsPanel.css |  8 ++++----
 theme/template.theme.json              |  8 ++++++++
 3 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/public/script/customthemes.js b/public/script/customthemes.js
index 76750da..c9649ac 100644
--- a/public/script/customthemes.js
+++ b/public/script/customthemes.js
@@ -59,12 +59,16 @@ function applyTheme(theme) {
   root.style.setProperty("--playlist-background-color", style.playlist?.background || "");
 
   // Settings
-  root.style.setProperty("--settings-button-bg-color",    style.settings?.button?.background || "");
-  root.style.setProperty("--settings-button-text-color",  style.settings?.button?.text || "");
-  root.style.setProperty("--settings-modal-bg-color",     style.settings?.background?.modal || "");
-  root.style.setProperty("--settings-section-bg-color",   style.settings?.background?.section || "");
-  root.style.setProperty("--settings-text-color",         style.settings?.text || "");
-  root.style.setProperty("--settings-subtitle-color",     style.settings?.subtitle || "");
+  root.style.setProperty("--settings-button-bg-color",      style.settings?.button?.background || "");
+  root.style.setProperty("--settings-button-text-color",    style.settings?.button?.text || "");
+  root.style.setProperty("--open-theme-button-bg-color",    style.settings?.openThemeButton?.background || "");
+  root.style.setProperty("--open-theme-button-text-color",  style.settings?.openThemeButton?.text || "");
+  root.style.setProperty("--open-json-button-bg-color",     style.settings?.openJsonButton?.background || style.settings?.button?.background || "");
+  root.style.setProperty("--open-json-button-text-color",   style.settings?.openJsonButton?.text || style.settings?.button?.text || "");
+  root.style.setProperty("--settings-modal-bg-color",       style.settings?.background?.modal || "");
+  root.style.setProperty("--settings-section-bg-color",     style.settings?.background?.section || "");
+  root.style.setProperty("--settings-text-color",           style.settings?.text || "");
+  root.style.setProperty("--settings-subtitle-color",       style.settings?.subtitle || "");
 
   // Subtitle
   const subtitleEl = document.getElementById("subtitle");
diff --git a/public/styles/layout/settingsPanel.css b/public/styles/layout/settingsPanel.css
index feea711..3e2f780 100644
--- a/public/styles/layout/settingsPanel.css
+++ b/public/styles/layout/settingsPanel.css
@@ -190,8 +190,8 @@ details summary {
     border: none;
     cursor: pointer;
     font-weight: 600;
-    background-color: var(--form-button-bg-color);
-    color: #fff;
+    background-color: var(--open-json-button-bg-color);
+    color: var(--open-json-button-text-color);
 }
 
 #open-theme {
@@ -200,8 +200,8 @@ details summary {
     border: none;
     cursor: pointer;
     font-weight: 600;
-    background-color: var(--form-button-bg-color);
-    color: #fff;
+    background-color: var(--open-theme-button-bg-color);
+    color: var(--open-theme-button-text-color);
 }
 
 #experimental-args {
diff --git a/theme/template.theme.json b/theme/template.theme.json
index 328615f..ab655f3 100644
--- a/theme/template.theme.json
+++ b/theme/template.theme.json
@@ -77,6 +77,14 @@
         "background": "",
         "text": ""
       },
+      "openThemeButton": {
+        "background": "",
+        "text": ""
+      },
+      "openJsonButton": {
+        "background": "",
+        "text": ""
+      },
       "background": {
         "modal": "",
         "section": ""