Replace arrow navigation in theme switcher with `<select>` (#8190)

Follow-up (or replacement) of https://github.com/FreshRSS/FreshRSS/pull/8167

![gif](https://github.com/user-attachments/assets/96cdeaff-36bc-4d0b-9b75-97bd7ff78ba1)

1 files changed, 14 insertions, 0 deletions

diff --git a/p/scripts/extra.js b/p/scripts/extra.js
index 96874a65d..dfeff9293 100644
--- a/p/scripts/extra.js
+++ b/p/scripts/extra.js
@@ -100,6 +100,19 @@ function init_crypto_forms() {
 // </crypto form (Web login)>
 
 // <show password>
+
+function init_display(parent) {
+	const theme = parent.querySelector('select#theme');
+	if (!theme) {
+		return;
+	}
+	theme.addEventListener('change', (e) => {
+		const picked = parent.querySelector('.preview-container.picked');
+		picked.classList.remove('picked');
+		parent.querySelector(`[data-theme-preview="${e.target.value}"]`).classList.add('picked');
+	});
+}
+
 function togglePW(btn) {
 	if (btn.classList.contains('active')) {
 		hidePW(btn);
@@ -543,6 +556,7 @@ function init_extra_afterDOM() {
 			init_archiving(slider);
 			init_url_observers(slider);
 		} else {
+			init_display(document.body);
 			init_archiving(document.body);
 			init_url_observers(document.body);
 		}