Dark mode theme

.gitignore

@@ -31,3 +31,4 @@ deploy
 */releases/*
 /monitor/TorHiddenServiceStartupTimeTests/*
 /monitor/monitor-tor/*
+/desktop/.sass-cache/*

build.gradle

@@ -1,13 +1,18 @@
 buildscript {
     repositories {
         jcenter()
+        maven {
+            url "https://plugins.gradle.org/m2/"
+        }
+
     }
     dependencies {
         classpath 'com.google.protobuf:protobuf-gradle-plugin:0.8.5'
         classpath 'com.google.gradle:osdetector-gradle-plugin:1.6.0'
         classpath 'com.github.jengelman.gradle.plugins:shadow:4.0.2'
         classpath files('gradle/witness/gradle-witness.jar')
         classpath 'org.springframework.boot:spring-boot-gradle-plugin:1.5.10.RELEASE'
+        classpath "gradle.plugin.com.github.anbuck:compass-gradle-plugin:2.0.7"
     }
 }
 
@@ -267,6 +272,7 @@ configure(project(':core')) {
 
 
 configure(project(':desktop')) {
+    apply plugin: "com.github.anbuck.compass"
     apply plugin: 'com.github.johnrengelman.shadow'
     apply plugin: 'witness'
     apply from: '../gradle/witness/gradle-witness.gradle'
@@ -314,6 +320,12 @@ configure(project(':desktop')) {
         testAnnotationProcessor "org.projectlombok:lombok:$lombokVersion"
     }
 
+    // https://github.com/anbuck/gradle-compass
+    compass {
+        sassDir = file("src/main/resources/styles")
+        cssDir = file("build/resources/main/bisq/desktop/styles")
+    }
+
     test {
         systemProperty 'jdk.attach.allowAttachSelf', true
 

common/src/main/proto/pb.proto

@@ -1299,6 +1299,7 @@ message PreferencesPayload {
     string rpc_pw = 48;
     string take_offer_selected_payment_account_id = 49;
     double buyer_security_deposit_as_percent = 50;
+    int32 ui_theme = 51;
 }
 
 ///////////////////////////////////////////////////////////////////////////////////////////
@@ -1775,6 +1776,12 @@ message Region {
     string name = 2;
 }
 
+message UITheme {
+    int64 id = 1;
+    string label = 2;
+    bool darkMode = 3;
+}
+
 ///////////////////////////////////////////////////////////////////////////////////////////
 // Notifications
 ///////////////////////////////////////////////////////////////////////////////////////////

core/src/main/java/bisq/core/user/Preferences.java

@@ -43,8 +43,10 @@
 import javax.inject.Named;
 
 import javafx.beans.property.BooleanProperty;
+import javafx.beans.property.IntegerProperty;
 import javafx.beans.property.LongProperty;
 import javafx.beans.property.SimpleBooleanProperty;
+import javafx.beans.property.SimpleIntegerProperty;
 import javafx.beans.property.SimpleLongProperty;
 
 import javafx.collections.FXCollections;
@@ -116,6 +118,8 @@ public final class Preferences implements PersistedDataHost, BridgeAddressProvid
     @Getter
     private final BooleanProperty useAnimationsProperty = new SimpleBooleanProperty(prefPayload.isUseAnimations());
     @Getter
+    private final IntegerProperty uiThemeIdProperty = new SimpleIntegerProperty(prefPayload.getUiThemeId());
+    @Getter
     private final BooleanProperty useCustomWithdrawalTxFeeProperty = new SimpleBooleanProperty(prefPayload.isUseCustomWithdrawalTxFee());
     @Getter
     private final LongProperty withdrawalTxFeeInBytesProperty = new SimpleLongProperty(prefPayload.getWithdrawalTxFeeInBytes());
@@ -165,6 +169,11 @@ public Preferences(Storage<PreferencesPayload> storage,
             persist();
         });
 
+        uiThemeIdProperty.addListener((ov) -> {
+            prefPayload.setUiThemeId(uiThemeIdProperty.get());
+            persist();
+        });
+
         useStandbyModeProperty.addListener((ov) -> {
             prefPayload.setUseStandbyMode(useStandbyModeProperty.get());
             persist();
@@ -248,6 +257,7 @@ public void readPersisted() {
 
         // set all properties
         useAnimationsProperty.set(prefPayload.isUseAnimations());
+        uiThemeIdProperty.set(prefPayload.getUiThemeId());
         useStandbyModeProperty.set(prefPayload.isUseStandbyMode());
         useCustomWithdrawalTxFeeProperty.set(prefPayload.isUseCustomWithdrawalTxFee());
         withdrawalTxFeeInBytesProperty.set(prefPayload.getWithdrawalTxFeeInBytes());
@@ -322,6 +332,10 @@ public void setUseAnimations(boolean useAnimations) {
         this.useAnimationsProperty.set(useAnimations);
     }
 
+    public void setThemeId(int themeId) {
+        this.uiThemeIdProperty.set(themeId);
+    }
+
     public void addFiatCurrency(FiatCurrency tradeCurrency) {
         if (!fiatCurrenciesAsObservable.contains(tradeCurrency))
             fiatCurrenciesAsObservable.add(tradeCurrency);
@@ -732,6 +746,8 @@ private interface ExcludesDelegateMethods {
 
         void setUseAnimations(boolean useAnimations);
 
+        void setThemeId(int themeId);
+
         void setUserLanguage(@NotNull String userLanguageCode);
 
         void setUserCountry(@NotNull Country userCountry);

core/src/main/java/bisq/core/user/PreferencesPayload.java

@@ -94,6 +94,7 @@ public final class PreferencesPayload implements PersistableEnvelope {
     private long buyerSecurityDepositAsLong;
 
     private boolean useAnimations;
+    private int uiThemeId;
     @Nullable
     private PaymentAccount selectedPaymentAccountForCreateOffer;
     private boolean payFeeInBtc = true;
@@ -167,6 +168,7 @@ public Message toProtoMessage() {
                 .setDirectoryChooserPath(directoryChooserPath)
                 .setBuyerSecurityDepositAsLong(buyerSecurityDepositAsLong)
                 .setUseAnimations(useAnimations)
+                .setUiTheme(uiThemeId)
                 .setPayFeeInBtc(payFeeInBtc)
                 .setBridgeOptionOrdinal(bridgeOptionOrdinal)
                 .setTorTransportOrdinal(torTransportOrdinal)
@@ -241,6 +243,7 @@ public static PersistableEnvelope fromProto(PB.PreferencesPayload proto, CorePro
                 proto.getDirectoryChooserPath(),
                 proto.getBuyerSecurityDepositAsLong(),
                 proto.getUseAnimations(),
+                proto.getUiTheme(),
                 paymentAccount,
                 proto.getPayFeeInBtc(),
                 proto.getBridgeAddressesList().isEmpty() ? null : new ArrayList<>(proto.getBridgeAddressesList()),

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

@@ -887,6 +887,7 @@ setting.preferences.addAltcoin=Add altcoin
 setting.preferences.displayOptions=Display options
 setting.preferences.showOwnOffers=Show my own offers in offer book
 setting.preferences.useAnimations=Use animations
+setting.preferences.uiTheme=UI theme
 setting.preferences.sortWithNumOffers=Sort market lists with no. of offers/trades
 setting.preferences.resetAllFlags=Reset all \"Don't show again\" flags
 setting.preferences.reset=Reset

desktop/src/main/java/bisq/desktop/app/BisqApp.java

@@ -30,6 +30,7 @@
 import bisq.desktop.main.overlays.windows.SendAlertMessageWindow;
 import bisq.desktop.main.overlays.windows.ShowWalletDataWindow;
 import bisq.desktop.util.ImageUtil;
+import bisq.desktop.util.UITheme;
 
 import bisq.core.alert.AlertManager;
 import bisq.core.app.AppOptionKeys;
@@ -75,6 +76,9 @@
 import java.awt.GraphicsEnvironment;
 import java.awt.Rectangle;
 
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
 import java.util.concurrent.TimeUnit;
 import java.util.function.Consumer;
 
@@ -226,11 +230,14 @@ private Scene createAndConfigScene(MainView mainView, Injector injector) {
                 maxWindowBounds.height < INITIAL_WINDOW_HEIGHT ?
                         (maxWindowBounds.height < MIN_WINDOW_HEIGHT ? MIN_WINDOW_HEIGHT : maxWindowBounds.height) :
                         INITIAL_WINDOW_HEIGHT);
-        scene.getStylesheets().setAll(
-                "/bisq/desktop/bisq.css",
-                "/bisq/desktop/images.css",
-                "/bisq/desktop/CandleStickChart.css");
+
         addSceneKeyEventHandler(scene, injector);
+
+        loadSceneStyles(scene, injector);
+        injector.getInstance(Preferences.class).getUiThemeIdProperty().addListener((ov) -> {
+            loadSceneStyles(scene, injector);
+        });
+
         return scene;
     }
 
@@ -319,12 +326,39 @@ private void addSceneKeyEventHandler(Scene scene, Injector injector) {
                         showFPSWindow(scene);
                     } else if (Utilities.isAltOrCtrlPressed(KeyCode.Z, keyEvent)) {
                         showDebugWindow(scene, injector);
+                    } else if (Utilities.isAltOrCtrlPressed(KeyCode.D, keyEvent)) {
+                        cycleUIThemes(scene, injector);
                     }
                 }
             }
         });
     }
 
+    private void cycleUIThemes(Scene scene, Injector injector) {
+        List<UITheme> uiThemeList = Arrays.asList(UITheme.values());
+        uiThemeList = new ArrayList<>(uiThemeList);
+        int currentThemeId = injector.getInstance(Preferences.class).getUiThemeId();
+        if (currentThemeId < (uiThemeList.size() - 1)) {
+            currentThemeId += 1;
+        } else {
+            currentThemeId = 0;
+        }
+        injector.getInstance(Preferences.class).setThemeId(currentThemeId);
+        loadSceneStyles(scene, injector);
+    }
+
+    private void loadSceneStyles(Scene scene, Injector injector) {
+        List<UITheme> uiThemeList = Arrays.asList(UITheme.values());
+        uiThemeList = new ArrayList<>(uiThemeList);
+        int themeId = injector.getInstance(Preferences.class).getUiThemeId();
+        String cssPath = "/bisq/desktop/styles/";
+        String themeCss = uiThemeList.get(themeId).getCssName() + ".css";
+        scene.getStylesheets().setAll(
+                cssPath + themeCss,
+                cssPath + "bisq.css"
+        );
+    }
+
     private void shutDownByUser() {
         if (injector.getInstance(OpenOfferManager.class).getObservableList().isEmpty()) {
             // No open offers, so no need to show the popup.