feat: rework styles of theme section on settings page

includes/i18n/de.php

@@ -176,8 +176,11 @@
     "get_key_alternative" => "Alternativ können Sie einen kostenlosen Fixer-Api-Schlüssel erhalten von",
     "display_settings" => "Display-Einstellungen",
     "theme_settings" => "Themen-Einstellungen",
+    "colors" => "Farben",
     "custom_colors" => "Benutzerdefinierte Farben",
+    "theme" => "Thema",
     "dark_theme" => "Dark Theme",
+    "light_theme" => "Light Theme",
     "automatic"=> "Automatisch",
     "calculate_monthly_price" => "Berechne und zeige monatlichen Preis für alle Abonnements an",
     "convert_prices" => "Preise immer in meine Hauptwährung umrechnen und darin anzeigen (langsamer)",

includes/i18n/el.php

@@ -176,8 +176,11 @@
     "get_key_alternative" => "Εναλλακτικά, μπορείτε να λάβετε ένα δωρεάν κλειδί api fixer από το",
     "display_settings" => "Ρυθμίσεις εμφάνισης",
     "theme_settings" => "Ρυθμίσεις θέματος",
+    "colors" => "Χρώματα",
     "custom_colors" => "Προσαρμοσμένα χρώματα",
+    "theme" => "Θέμα",
     "dark_theme" => "Dark Theme",
+    "light_theme" => "Light Theme",
     "automatic"=> "Αυτόματο",
     "calculate_monthly_price" => "Υπολογισμός και εμφάνιση της μηνιαίας τιμής για όλες τις συνδρομές",
     "convert_prices" => "Πάντα να μετατρέπει και να εμφανίζει τις τιμές στο κύριο νόμισμά μου (πιο αργό)",

includes/i18n/en.php

@@ -176,8 +176,11 @@
     "get_key_alternative" => "Alternatively, you can get a free fixer api key from",
     "display_settings" => "Display Settings",
     "theme_settings" => "Theme Settings",
+    "colors" => "Colors",
     "custom_colors" => "Custom Colors",
+    "theme" => "Theme",
     "dark_theme" => "Dark Theme",
+    "light_theme" => "Light Theme",
     "automatic"=> "Automatic",
     "calculate_monthly_price" => "Calculate and show monthly price for all subscriptions",
     "convert_prices" => "Always convert and show prices on my main currency (slower)",

includes/i18n/es.php

@@ -176,8 +176,11 @@
     "get_key_alternative" => "También puede obtener una clave api gratuita de Fixer en",
     "display_settings" => "Configuración de Pantalla",
     "theme_settings" => "Configuración de Tema",
+    "colors" => "Colores",
     "custom_collors" => "Colores Personalizados",
+    "theme" => "Tema",
     "dark_theme" => "Tema Oscuro",
+    "light_theme" => "Tema Claro",
     "automatic"=> "Automático",
     "calculate_monthly_price" => "Calcular y mostrar el precio mensual de todas las suscripciones",
     "convert_prices" => "Convertir y mostrar siempre los precios en mi moneda principal (más lento)",

includes/i18n/fr.php

@@ -176,8 +176,11 @@
     "get_key_alternative" => "Vous pouvez également obtenir une clé api de fixation gratuite auprès de",
     "display_settings" => "Paramètres d'affichage",
     "theme_settings" => "Paramètres de thème",
+    "colors" => "Couleurs",
     "custom_colors" => "Couleurs personnalisées",
+    "theme" => "Thème",
     "dark_theme" => "Thème sombre",
+    "light_theme" => "Thème clair",
     "automatic"=> "Automatique",
     "calculate_monthly_price" => "Calculer et afficher le prix mensuel pour tous les abonnements",
     "convert_prices" => "Convertir toujours et afficher les prix dans ma devise principale (plus lent)",

includes/i18n/it.php

@@ -184,8 +184,11 @@
     'get_key_alternative' => 'In alternativa, puoi ottenere gratuitamente una chiave API di Fixer da',
     'display_settings' => 'Impostazioni di visualizzazione',
     "theme_settings" => 'Impostazioni del tema',
+    "colors" => 'Colori',
     "custom_colors" => 'Colori personalizzati',
+    "theme" => 'Tema',
     "dark_theme" => 'Tema scuro',
+    "light_theme" => 'Tema chiaro',
     "automatic" => "Automatico",
     'calculate_monthly_price' => 'Calcola e mostra il prezzo mensile per tutti gli abbonamenti',
     'convert_prices' => 'Converti sempre e mostra i prezzi nella mia valuta principale (più lento)',

includes/i18n/jp.php

@@ -176,8 +176,11 @@
     "get_key_alternative" => "または、以下のサイトから無料のフィクサーapiキーを入手することもできます。",
     "display_settings" => "表示設定",
     "theme_settings" => "テーマ設定",
+    "colors" => "色",
     "custom_colors" => "カスタムカラー",
+    "theme" => "テーマ",
     "dark_theme" => "ダークテーマ",
+    "light_theme" => "ライトテーマ",
     "automatic"=> "自動",
     "calculate_monthly_price" => "すべての定期購入の月額料金を計算して表示する",
     "convert_prices" => "常にメイン通貨で価格を換算して表示する (遅い)",

includes/i18n/ko.php

@@ -177,8 +177,11 @@
     "get_key_alternative" => "또는 다음 사이트에서 무료 Fixer api 키를 얻을 수 있습니다.",
     "display_settings" => "디스플레이 설정",
     "theme_settings" => "테마 설정",
+    "colors" => "색상",
     "custom_colors" => "커스텀 색상",
+    "theme" => "테마",
     "dark_theme" => "다크 테마",
+    "light_theme" => "라이트 테마",
     "automatic"=> "자동",
     "calculate_monthly_price" => "모든 구독에 대한 월별 요금을 계산하고 표시",
     "convert_prices" => "항상 기본 통화로 가격을 환산하고 표시 (느림)",

includes/i18n/pl.php

@@ -176,8 +176,11 @@
     "get_key_alternative" => "Alternatywnie, możesz uzyskać darmowy klucz api fixer'a od",
     "display_settings" => "Ustawienia wyświetlania",
     "theme_settings" => "Ustawienia motywu",
+    "colors" => "Kolory",
     "custom_colors" => "Kolory niestandardowe",
+    "theme" => "Motyw",
     "dark_theme" => "Przełącz na jasny/ciemny motyw",
+    "light_theme" => "Przełącz na ciemny/jasny motyw",
     "automatic"=> "Automatycznie",
     "calculate_monthly_price" => "Oblicz i pokaż miesięczną cenę wszystkich subskrypcji",
     "convert_prices" => "Zawsze przeliczaj i pokazuj ceny w mojej głównej walucie (wolniej)",

includes/i18n/pt.php

@@ -176,8 +176,11 @@
     "get_key_alternative" => "Como alternativa obtenha a sua API Key em",
     "display_settings" => "Definições de visualização",
     "theme_settings" => "Definições de Tema",
+    "colors" => "Cores",
     "custom_colors" => "Cores Personalizadas",
+    "theme" => "Tema",
     "dark_theme" => "Tema Escuro",
+    "light_theme" => "Tema Claro",
     "automatic"=> "Automático",
     "calculate_monthly_price" => "Calcular e mostrar preço mensal para todas as subscrições",
     "convert_prices" => "Converter e mostrar todas as subscrições na moeda principal (mais lento)",

includes/i18n/pt_br.php

@@ -176,8 +176,11 @@
     "get_key_alternative" => "Como alternativa, você pode obter uma chave de API grátis em",
     "display_settings" => "Configurações de visualização",
     "theme_settings" => "Configurações de tema",
+    "colors" => "Cores",
     "custom_colors" => "Cores personalizadas",
+    "theme" => "Tema",
     "dark_theme" => "Tema Escuro",
+    "light_theme" => "Tema Claro",
     "automatic" => "Automático",
     "calculate_monthly_price" => "Calcular e exibir o custo mensal para todas as assinaturas",
     "convert_prices" => "Sempre converter e exibir preços na moeda principal (mais lento)",

includes/i18n/ru.php

@@ -176,8 +176,11 @@
     "get_key_alternative" => "Кроме того, вы можете получить бесплатный ключ API Fixer на сайте",
     "display_settings" => "Настройки отображения",
     "theme_settings" => "Настройки темы",
+    "colors" => "Цвета",
     "custom_colors" => "Пользовательские цвета",
+    "theme" => "Тема",
     "dark_theme" => "Темная тема",
+    "light_theme" => "Светлая тема",
     "automatic"=> "Автоматически",
     "calculate_monthly_price" => "Рассчитать и показать ежемесячную цену для всех подписок",
     "convert_prices" => "Всегда конвертировать и показывать цены в моей основной валюте (медленнее)",

includes/i18n/sl.php

@@ -176,8 +176,11 @@
     "get_key_alternative" => "Lahko pa tudi dobite brezplačni Fixer API od",
     "display_settings" => "Nastavitve zaslona",
     "theme_settings" => "Nastavitve teme",
+    "colors" => "Barve",
     "custom_colors" => "Barve po meri",
+    "theme" => "Tema",
     "dark_theme" => "Temna tema",
+    "light_theme" => "Svetla tema",
     "automatic"=> "Samodejno",
     "calculate_monthly_price" => "Izračunaj in prikaži mesečno ceno za vse naročnine",
     "convert_prices" => "Vedno pretvori in prikaži cene v moji glavni valuti (počasneje)",

includes/i18n/sr.php

@@ -175,8 +175,11 @@
     "get_key_alternative" => "Алтернативно, можете добити бесплатни Fixer API кључ са",
     "display_settings" => "Подешавања приказа",
     "theme_settings" => "Подешавања теме",
+    "colors" => "Боје",
     "custom_colors" => "Прилагођене боје",
+    "theme" => "Тема",
     "dark_theme" => "Тамна тема",
+    "light_theme" => "Светла тема",
     "automatic"=> "Аутоматски",
     "calculate_monthly_price" => "Израчунајте и прикажите месечну цену за све претплате",
     "convert_prices" => "Увек конвертујте и прикажите цене на мојој главној валути (спорије)",

includes/i18n/sr_lat.php

@@ -176,8 +176,11 @@
     "get_key_alternative" => "Alternativno, možete dobiti besplatni Fixer API ključ na",
     "display_settings" => "Podešavanja prikaza",
     "theme_settings" => "Podešavanja teme",
+    "colors" => "Boje",
     "custom_colors" => "Prilagođene boje",
+    "theme" => "Tema",
     "dark_theme" => "Tamna tema",
+    "light_theme" => "Svetla tema",
     "automatic"=> "Automatski",
     "calculate_monthly_price" => "Izračunaj i prikaži mesečnu cenu za sve pretplate",
     "convert_prices" => "Uvek konvertuj i prikaži cene u mojoj glavnoj valuti (sporije)",

includes/i18n/tr.php

@@ -176,9 +176,11 @@
     "get_key_alternative" => "Alternatif olarak, şu adresten ücretsiz bir fixer api anahtarı edinebilirsiniz",
     "display_settings" => "Görüntüleme Ayarları",
     "theme_settings" => "Tema Ayarları",
+    "colors" => "Renkler",
     "custom_colors" => "Özel Renkler",
+    "theme" => "Tema",
     "dark_theme" => "Koyu Temayı",
-    "switch_theme" => "Açık / Koyu Temayı Değiştir",
+    "light_theme" => "Açık Temayı",
     "automatic"=> "Otomatik",
     "calculate_monthly_price" => "Tüm aboneliklerin aylık fiyatını hesaplayın ve gösterin",
     "convert_prices" => "Fiyatları her zaman ana para birimimde dönüştürün ve gösterin (daha yavaş)",

includes/i18n/zh_cn.php

@@ -184,8 +184,11 @@
     "get_key_alternative" => "或者，您也可以从以下网站获取免费的修复程序 api 密钥",
     "display_settings" => "显示设置",
     "theme_settings" => "主题设置",
+    "colors" => "颜色",
     "custom_colors" => "自定义颜色",
+    "theme" => "主题",
     "dark_theme" => "深色主题",
+    "light_theme" => "浅色主题",
     "automatic"=> "自动",
     "calculate_monthly_price" => "计算并显示所有订阅的月价格",
     "convert_prices" => "始终按我的主要货币转换和显示价格（较慢）",

includes/i18n/zh_tw.php

@@ -176,8 +176,11 @@
     "get_key_alternative" => "或者，您可以從以下網址取得一個免費的修復 api 金鑰",
     "display_settings" => "顯示設定",
     "theme_settings" => "主題設定",
+    "colors" => "顏色",
     "custom_colors" => "自訂顏色",
+    "theme" => "主題",
     "dark_theme" => "深色主題",
+    "light_theme" => "淺色主題",
     "automatic"=> "自動",
     "calculate_monthly_price" => "計算並顯示所有訂閱的每月價格",
     "convert_prices" => "始終按照我的主要貨幣單位轉換和顯示價格（較慢）",

scripts/settings.js

@@ -906,17 +906,17 @@ function switchTheme() {
 }
 
 function setDarkTheme(theme) {
-  const darkThemeRadio = document.querySelector("#theme-dark");
-  const lightThemeRadio = document.querySelector("#theme-light");
-  const automaticThemeRadio = document.querySelector("#theme-automatic");
+  const darkThemeButton = document.querySelector("#theme-dark");
+  const lightThemeButton = document.querySelector("#theme-light");
+  const automaticThemeButton = document.querySelector("#theme-automatic");
   const darkThemeCss = document.querySelector("#dark-theme");
   const themes = {0: 'light', 1: 'dark', 2: 'automatic'};
   const themeValue = themes[theme];
   const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-  darkThemeRadio.disabled = true;
-  lightThemeRadio.disabled = true;
-  automaticThemeRadio.disabled = true;
+  darkThemeButton.disabled = true;
+  lightThemeButton.disabled = true;
+  automaticThemeButton.disabled = true;
 
   fetch('endpoints/settings/theme.php', {
     method: 'POST',
@@ -928,39 +928,45 @@ function setDarkTheme(theme) {
   .then(response => response.json())
   .then(data => {
       if (data.success) {
-          darkThemeRadio.disabled = false;
-          lightThemeRadio.disabled = false;
-          automaticThemeRadio.disabled = false;
+          darkThemeButton.disabled = false;
+          lightThemeButton.disabled = false;
+          automaticThemeButton.disabled = false;
+          darkThemeButton.classList.remove('selected');
+          lightThemeButton.classList.remove('selected');
+          automaticThemeButton.classList.remove('selected');
 
           document.cookie = `theme=${themeValue}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
 
           if (theme == 0) {
             darkThemeCss.disabled = true;
             document.body.className = 'light';
+            lightThemeButton.classList.add('selected');
           }
 
           if (theme == 1)  {
             darkThemeCss.disabled = false;
             document.body.className = 'dark';
+            darkThemeButton.classList.add('selected');
           }
 
           if (theme == 2) {
             darkThemeCss.disabled = !prefersDarkMode;
             document.body.className = prefersDarkMode ? 'dark' : 'light';
+            automaticThemeButton.classList.add('selected');
             document.cookie = `inUseTheme=${prefersDarkMode ? 'dark' : 'light'}; expires=Fri, 31 Dec 9999 23:59:59 GMT`;
           }
 
           showSuccessMessage(data.message);
       } else {
           showErrorMessage(data.errorMessage);
-          darkThemeRadio.disabled = false;
-          lightThemeRadio.disabled = false;
-          automaticThemeRadio.disabled = false;
+          darkThemeButton.disabled = false;
+          lightThemeButton.disabled = false;
+          automaticThemeButton.disabled = false;
       }
   }).catch(error => {
-      darkThemeRadio.disabled = false;
-      lightThemeRadio.disabled = false;
-      automaticThemeRadio.disabled = false;
+      darkThemeButton.disabled = false;
+      lightThemeButton.disabled = false;
+      automaticThemeButton.disabled = false;
   });
 }