add light/dark mode toggle to footer

core/src/main/resources/i18n/displayStrings.properties

@@ -1334,6 +1334,7 @@ setting.preferences.displayOptions=Display options
 setting.preferences.showOwnOffers=Show my own offers in offer book
 setting.preferences.useAnimations=Use animations
 setting.preferences.useDarkMode=Use dark mode
+setting.preferences.useLightMode=Use light mode
 setting.preferences.sortWithNumOffers=Sort market lists with no. of offers/trades
 setting.preferences.onlyShowPaymentMethodsFromAccount=Hide non-supported payment methods
 setting.preferences.denyApiTaker=Deny takers using the API

core/src/main/resources/i18n/displayStrings_cs.properties

@@ -1297,6 +1297,7 @@ setting.preferences.displayOptions=Zobrazit možnosti
 setting.preferences.showOwnOffers=Zobrazit mé vlastní nabídky v seznamu nabídek
 setting.preferences.useAnimations=Použít animace
 setting.preferences.useDarkMode=Použít tmavý režim
+setting.preferences.useLightMode=Použijte světlý režim
 setting.preferences.sortWithNumOffers=Seřadit seznamy trhů s počtem nabídek/obchodů
 setting.preferences.onlyShowPaymentMethodsFromAccount=Skrýt nepodporované způsoby platby
 setting.preferences.denyApiTaker=Odmítat příjemce, kteří používají API

core/src/main/resources/i18n/displayStrings_de.properties

@@ -1033,6 +1033,7 @@ setting.preferences.displayOptions=Darstellungsoptionen
 setting.preferences.showOwnOffers=Eigenen Angebote im Angebotsbuch zeigen
 setting.preferences.useAnimations=Animationen abspielen
 setting.preferences.useDarkMode=Nacht-Modus benutzen
+setting.preferences.useLightMode=Leichtmodus verwenden
 setting.preferences.sortWithNumOffers=Marktlisten nach Anzahl der Angebote/Trades sortieren
 setting.preferences.onlyShowPaymentMethodsFromAccount=Nicht unterstützte Zahlungsmethoden ausblenden
 setting.preferences.denyApiTaker=Taker die das API nutzen vermeiden

core/src/main/resources/i18n/displayStrings_es.properties

@@ -1034,6 +1034,7 @@ setting.preferences.displayOptions=Mostrar opciones
 setting.preferences.showOwnOffers=Mostrar mis propias ofertas en el libro de ofertas
 setting.preferences.useAnimations=Usar animaciones
 setting.preferences.useDarkMode=Usar modo oscuro
+setting.preferences.useLightMode=Usar modo claro
 setting.preferences.sortWithNumOffers=Ordenar listas de mercado por número de ofertas/intercambios
 setting.preferences.onlyShowPaymentMethodsFromAccount=Ocultar métodos de pago no soportados
 setting.preferences.denyApiTaker=Denegar tomadores usando la misma API

core/src/main/resources/i18n/displayStrings_fa.properties

@@ -1029,7 +1029,8 @@ setting.preferences.addCrypto=افزودن آلتکوین
 setting.preferences.displayOptions=نمایش گزینه‌ها
 setting.preferences.showOwnOffers=نمایش پیشنهادهای من در دفتر پیشنهاد
 setting.preferences.useAnimations=استفاده از انیمیشن‌ها
-setting.preferences.useDarkMode=Use dark mode
+setting.preferences.useDarkMode=حالت تاریک را استفاده کنید
+setting.preferences.useLightMode=حالت روشن را استفاده کنید
 setting.preferences.sortWithNumOffers=مرتب سازی لیست‌ها با تعداد معاملات/پیشنهادها
 setting.preferences.onlyShowPaymentMethodsFromAccount=Hide non-supported payment methods
 setting.preferences.denyApiTaker=Deny takers using the API

core/src/main/resources/i18n/displayStrings_fr.properties

@@ -1035,6 +1035,7 @@ setting.preferences.displayOptions=Afficher les options
 setting.preferences.showOwnOffers=Montrer mes ordres dans le livre des ordres
 setting.preferences.useAnimations=Utiliser des animations
 setting.preferences.useDarkMode=Utiliser le mode sombre
+setting.preferences.useLightMode=Utiliser le mode clair
 setting.preferences.sortWithNumOffers=Trier les listes de marché avec le nombre d'ordres/de transactions
 setting.preferences.onlyShowPaymentMethodsFromAccount=Masquer les méthodes de paiement non supportées
 setting.preferences.denyApiTaker=Refuser les preneurs utilisant l'API

core/src/main/resources/i18n/displayStrings_it.properties

@@ -1032,6 +1032,7 @@ setting.preferences.displayOptions=Mostra opzioni
 setting.preferences.showOwnOffers=Mostra le mie offerte nel libro delle offerte
 setting.preferences.useAnimations=Usa animazioni
 setting.preferences.useDarkMode=Usa modalità notte
+setting.preferences.useLightMode=Usa la modalità chiara
 setting.preferences.sortWithNumOffers=Ordina le liste di mercato con n. di offerte/scambi
 setting.preferences.onlyShowPaymentMethodsFromAccount=Hide non-supported payment methods
 setting.preferences.denyApiTaker=Deny takers using the API

core/src/main/resources/i18n/displayStrings_ja.properties

@@ -1033,6 +1033,7 @@ setting.preferences.displayOptions=表示設定
 setting.preferences.showOwnOffers=オファーブックに自分のオファーを表示
 setting.preferences.useAnimations=アニメーションを使用
 setting.preferences.useDarkMode=ダークモードを利用
+setting.preferences.useLightMode=ライトモードを使用する
 setting.preferences.sortWithNumOffers=市場リストをオファー/トレードの数で並び替える
 setting.preferences.onlyShowPaymentMethodsFromAccount=サポートされていない支払い方法を非表示にする
 setting.preferences.denyApiTaker=APIを使用するテイカーを拒否する

core/src/main/resources/i18n/displayStrings_pt-br.properties

@@ -1034,6 +1034,7 @@ setting.preferences.displayOptions=Opções de exibição
 setting.preferences.showOwnOffers=Exibir minhas ofertas no livro de ofertas
 setting.preferences.useAnimations=Usar animações
 setting.preferences.useDarkMode=Usar modo escuro
+setting.preferences.useLightMode=Usar modo claro
 setting.preferences.sortWithNumOffers=Ordenar pelo nº de ofertas/negociações
 setting.preferences.onlyShowPaymentMethodsFromAccount=Hide non-supported payment methods
 setting.preferences.denyApiTaker=Deny takers using the API

core/src/main/resources/i18n/displayStrings_pt.properties

@@ -1031,6 +1031,7 @@ setting.preferences.displayOptions=Mostrar opções
 setting.preferences.showOwnOffers=Mostrar as minhas próprias ofertas no livro de ofertas
 setting.preferences.useAnimations=Usar animações
 setting.preferences.useDarkMode=Usar o modo escuro
+setting.preferences.useLightMode=Usar modo claro
 setting.preferences.sortWithNumOffers=Ordenar listas de mercado por nº de ofertas/negociações:
 setting.preferences.onlyShowPaymentMethodsFromAccount=Hide non-supported payment methods
 setting.preferences.denyApiTaker=Deny takers using the API

core/src/main/resources/i18n/displayStrings_ru.properties

@@ -1029,7 +1029,8 @@ setting.preferences.addCrypto=Добавить альткойн
 setting.preferences.displayOptions=Параметры отображения
 setting.preferences.showOwnOffers=Показать мои предложения в списке предложений
 setting.preferences.useAnimations=Использовать анимацию
-setting.preferences.useDarkMode=Use dark mode
+setting.preferences.useDarkMode=Использовать тёмный режим
+setting.preferences.useLightMode=Использовать светлый режим
 setting.preferences.sortWithNumOffers=Сортировать списки по кол-ву предложений/сделок
 setting.preferences.onlyShowPaymentMethodsFromAccount=Hide non-supported payment methods
 setting.preferences.denyApiTaker=Deny takers using the API

core/src/main/resources/i18n/displayStrings_th.properties

@@ -1029,7 +1029,8 @@ setting.preferences.addCrypto=เพิ่ม crypto
 setting.preferences.displayOptions=แสดงตัวเลือกเพิ่มเติม
 setting.preferences.showOwnOffers=แสดงข้อเสนอของฉันเองในสมุดข้อเสนอ
 setting.preferences.useAnimations=ใช้ภาพเคลื่อนไหว
-setting.preferences.useDarkMode=Use dark mode
+setting.preferences.useDarkMode=ใช้โหมดมืด
+setting.preferences.useLightMode=ใช้โหมดสว่าง
 setting.preferences.sortWithNumOffers=จัดเรียงรายการโดยเลขของข้อเสนอ / การซื้อขาย
 setting.preferences.onlyShowPaymentMethodsFromAccount=Hide non-supported payment methods
 setting.preferences.denyApiTaker=Deny takers using the API

core/src/main/resources/i18n/displayStrings_tr.properties

@@ -1293,6 +1293,7 @@ setting.preferences.displayOptions=Görüntüleme seçenekleri
 setting.preferences.showOwnOffers=Teklif defterinde kendi tekliflerini göster
 setting.preferences.useAnimations=Animasyonları kullan
 setting.preferences.useDarkMode=Karanlık modu kullan
+setting.preferences.useLightMode=Aydınlık modu kullan
 setting.preferences.sortWithNumOffers=Piyasaları teklif sayısına göre sırala
 setting.preferences.onlyShowPaymentMethodsFromAccount=Olmayan ödeme yöntemlerini gizle
 setting.preferences.denyApiTaker=API kullanan alıcıları reddet

core/src/main/resources/i18n/displayStrings_vi.properties

@@ -1031,7 +1031,8 @@ setting.preferences.addCrypto=Bổ sung crypto
 setting.preferences.displayOptions=Hiển thị các phương án
 setting.preferences.showOwnOffers=Hiển thị Báo giá của tôi trong danh mục Báo giá
 setting.preferences.useAnimations=Sử dụng hoạt ảnh
-setting.preferences.useDarkMode=Use dark mode
+setting.preferences.useDarkMode=Sử dụng chế độ tối
+setting.preferences.useLightMode=Sử dụng chế độ sáng
 setting.preferences.sortWithNumOffers=Sắp xếp danh sách thị trường với số chào giá/giao dịch
 setting.preferences.onlyShowPaymentMethodsFromAccount=Hide non-supported payment methods
 setting.preferences.denyApiTaker=Deny takers using the API

core/src/main/resources/i18n/displayStrings_zh-hans.properties

@@ -1033,6 +1033,7 @@ setting.preferences.displayOptions=显示选项
 setting.preferences.showOwnOffers=在报价列表中显示我的报价
 setting.preferences.useAnimations=使用动画
 setting.preferences.useDarkMode=使用夜间模式
+setting.preferences.useLightMode=使用浅色模式
 setting.preferences.sortWithNumOffers=使用“报价ID/交易ID”筛选列表
 setting.preferences.onlyShowPaymentMethodsFromAccount=Hide non-supported payment methods
 setting.preferences.denyApiTaker=Deny takers using the API

core/src/main/resources/i18n/displayStrings_zh-hant.properties

@@ -1033,6 +1033,7 @@ setting.preferences.displayOptions=顯示選項
 setting.preferences.showOwnOffers=在報價列表中顯示我的報價
 setting.preferences.useAnimations=使用動畫
 setting.preferences.useDarkMode=使用夜間模式
+setting.preferences.useLightMode=使用淺色模式
 setting.preferences.sortWithNumOffers=使用“報價ID/交易ID”篩選列表
 setting.preferences.onlyShowPaymentMethodsFromAccount=Hide non-supported payment methods
 setting.preferences.denyApiTaker=Deny takers using the API

desktop/src/main/java/haveno/desktop/images.css

@@ -363,4 +363,12 @@
 
 #image-xmr-logo {
     -fx-image: url("../../images/xmr_logo.png");
-}
+}
+
+#image-dark-mode {
+    -fx-image: url("../../images/dark_mode.png");   
+}
+
+#image-light-mode {
+    -fx-image: url("../../images/light_mode.png");
+}

desktop/src/main/java/haveno/desktop/main/MainView.java

@@ -32,6 +32,7 @@ import haveno.core.locale.GlobalSettings;
 import haveno.core.locale.LanguageUtil;
 import haveno.core.locale.Res;
 import haveno.core.provider.price.MarketPrice;
+import haveno.core.user.Preferences;
 import haveno.desktop.Navigation;
 import haveno.desktop.common.view.CachingViewLoader;
 import haveno.desktop.common.view.FxmlView;
@@ -127,6 +128,7 @@ public class MainView extends InitializableView<StackPane, MainViewModel>  {
     private Label xmrSplashInfo;
     private Popup p2PNetworkWarnMsgPopup, xmrNetworkWarnMsgPopup;
     private final TorNetworkSettingsWindow torNetworkSettingsWindow;
+    private final Preferences preferences;
     private static final int networkIconSize = 20;
 
     public static StackPane getRootContainer() {
@@ -154,12 +156,14 @@ public class MainView extends InitializableView<StackPane, MainViewModel>  {
                     CachingViewLoader viewLoader,
                     Navigation navigation,
                     Transitions transitions,
-                    TorNetworkSettingsWindow torNetworkSettingsWindow) {
+                    TorNetworkSettingsWindow torNetworkSettingsWindow,
+                    Preferences preferences) {
         super(model);
         this.viewLoader = viewLoader;
         this.navigation = navigation;
         MainView.transitions = transitions;
         this.torNetworkSettingsWindow = torNetworkSettingsWindow;
+        this.preferences = preferences;
     }
 
     @Override
@@ -758,13 +762,33 @@ public class MainView extends InitializableView<StackPane, MainViewModel>  {
         setRightAnchor(versionBox, 10d);
         setBottomAnchor(versionBox, 7d);
 
+        // Dark mode toggle
+        ImageView useDarkModeIcon = new ImageView();
+        useDarkModeIcon.setId(preferences.getCssTheme() == 1 ? "image-dark-mode" : "image-light-mode");
+        useDarkModeIcon.setFitHeight(networkIconSize);
+        useDarkModeIcon.setPreserveRatio(true);
+        useDarkModeIcon.setPickOnBounds(true);
+        useDarkModeIcon.setCursor(Cursor.HAND);
+        setRightAnchor(useDarkModeIcon, 8d);
+        setBottomAnchor(useDarkModeIcon, 6d);
+        Tooltip modeToolTip = new Tooltip();
+        Tooltip.install(useDarkModeIcon, modeToolTip);
+        useDarkModeIcon.setOnMouseEntered(e -> modeToolTip.setText(Res.get(preferences.getCssTheme() == 1 ? "setting.preferences.useLightMode" : "setting.preferences.useDarkMode")));
+        useDarkModeIcon.setOnMouseClicked(e -> {
+            preferences.setCssTheme(preferences.getCssTheme() != 1);
+        });
+        preferences.getCssThemeProperty().addListener((observable, oldValue, newValue) -> {
+            useDarkModeIcon.setId(preferences.getCssTheme() == 1 ? "image-dark-mode" : "image-light-mode");
+        });
+
         // P2P Network
         Label p2PNetworkLabel = new AutoTooltipLabel();
         p2PNetworkLabel.setId("footer-pane");
         p2PNetworkLabel.textProperty().bind(model.getP2PNetworkInfo());
 
+        double networkIconRightAnchor = 54d;
         ImageView p2PNetworkIcon = new ImageView();
-        setRightAnchor(p2PNetworkIcon, 8d);
+        setRightAnchor(p2PNetworkIcon, networkIconRightAnchor);
         setBottomAnchor(p2PNetworkIcon, 6d);
         p2PNetworkIcon.setPickOnBounds(true);
         p2PNetworkIcon.setCursor(Cursor.HAND);
@@ -790,7 +814,7 @@ public class MainView extends InitializableView<StackPane, MainViewModel>  {
         p2PNetworkStatusIcon.setCursor(Cursor.HAND);
         p2PNetworkStatusIcon.setFitWidth(networkIconSize);
         p2PNetworkStatusIcon.setFitHeight(networkIconSize);
-        setRightAnchor(p2PNetworkStatusIcon, 30d);
+        setRightAnchor(p2PNetworkStatusIcon, networkIconRightAnchor + 22);
         setBottomAnchor(p2PNetworkStatusIcon, 6d);
         Tooltip p2pNetworkStatusToolTip = new Tooltip();
         Tooltip.install(p2PNetworkStatusIcon, p2pNetworkStatusToolTip);
@@ -832,10 +856,10 @@ public class MainView extends InitializableView<StackPane, MainViewModel>  {
         VBox vBox = new VBox();
         vBox.setAlignment(Pos.CENTER_RIGHT);
         vBox.getChildren().addAll(p2PNetworkLabel, p2pNetworkProgressBar);
-        setRightAnchor(vBox, 53d);
+        setRightAnchor(vBox, networkIconRightAnchor + 45);
         setBottomAnchor(vBox, 5d);
 
-        return new AnchorPane(separator, xmrInfoLabel, versionBox, vBox, p2PNetworkStatusIcon, p2PNetworkIcon) {{
+        return new AnchorPane(separator, xmrInfoLabel, versionBox, vBox, p2PNetworkStatusIcon, p2PNetworkIcon, useDarkModeIcon) {{
             setId("footer-pane");
             setMinHeight(30);
             setMaxHeight(30);