Dark mode theme

.gitignore

@@ -32,3 +32,5 @@ deploy
 /monitor/TorHiddenServiceStartupTimeTests/*
 /monitor/monitor-tor/*
 .java-version
+/desktop/.sass-cache/*
+/desktop/src/main/java/bisq/desktop/styles/*

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"
     }
 }
 
@@ -268,6 +273,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'
@@ -315,6 +321,13 @@ configure(project(':desktop')) {
         testAnnotationProcessor "org.projectlombok:lombok:$lombokVersion"
     }
 
+    // https://github.com/anbuck/gradle-compass
+    compass {
+        sassDir = file("src/main/resources/styles")
+        cssDir = file("src/main/java/bisq/desktop/styles")
+        imagesDir = file("src/main/resources/images")
+    }
+
     test {
         systemProperty 'jdk.attach.allowAttachSelf', true
 

common/src/main/proto/pb.proto

@@ -1356,6 +1356,7 @@ message PreferencesPayload {
     int32 ignore_dust_threshold = 51;
     double buyer_security_deposit_as_percent_for_crypto = 52;
     int32 block_notify_port = 53;
+    int32 ui_theme = 54;
 }
 
 ///////////////////////////////////////////////////////////////////////////////////////////
@@ -1856,6 +1857,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

@@ -45,8 +45,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;
@@ -120,6 +122,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());
@@ -171,6 +175,11 @@ public Preferences(Storage<PreferencesPayload> storage,
             persist();
         });
 
+        uiThemeIdProperty.addListener((ov) -> {
+            prefPayload.setUiThemeId(uiThemeIdProperty.get());
+            persist();
+        });
+
         useStandbyModeProperty.addListener((ov) -> {
             prefPayload.setUseStandbyMode(useStandbyModeProperty.get());
             persist();
@@ -256,6 +265,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());
@@ -330,6 +340,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);
@@ -820,6 +834,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

@@ -96,6 +96,7 @@ public final class PreferencesPayload implements PersistableEnvelope {
     private long buyerSecurityDepositAsLong;
 
     private boolean useAnimations;
+    private int uiThemeId;
     @Nullable
     private PaymentAccount selectedPaymentAccountForCreateOffer;
     private boolean payFeeInBtc = true;
@@ -172,6 +173,7 @@ public Message toProtoMessage() {
                 .setDirectoryChooserPath(directoryChooserPath)
                 .setBuyerSecurityDepositAsLong(buyerSecurityDepositAsLong)
                 .setUseAnimations(useAnimations)
+                .setUiTheme(uiThemeId)
                 .setPayFeeInBtc(payFeeInBtc)
                 .setBridgeOptionOrdinal(bridgeOptionOrdinal)
                 .setTorTransportOrdinal(torTransportOrdinal)
@@ -249,6 +251,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

@@ -931,6 +931,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;
@@ -76,6 +77,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;
 
@@ -227,11 +231,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;
     }
 
@@ -320,12 +327,48 @@ 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 cssFilePrefix = "";
+
+        // This enables CSS file mapping in Scenic View for CSS/theme development
+        if (DevEnv.isDevMode()) {
+            cssFilePrefix = "file://" + System.getProperty("user.dir") + "/desktop/src/main/java/";
+            log.debug("CSS file prefix: " + cssFilePrefix);
+        }
+
+        String cssPath = cssFilePrefix + "/bisq/desktop/styles/";
+        String themeCss = uiThemeList.get(themeId).getCssName() + ".css";
+        scene.getStylesheets().setAll(
+                cssPath + themeCss,
+                cssPath + "bisq.css"
+        );
+    }
+
     private void shutDownByUser() {
         boolean hasOpenOffers = false;
         for (OpenOffer openOffer : injector.getInstance(OpenOfferManager.class).getObservableList()) {

desktop/src/main/java/bisq/desktop/components/HyperlinkWithIcon.java

@@ -72,8 +72,7 @@ private void setIcon(Node icon) {
         setContentDisplay(ContentDisplay.RIGHT);
         setGraphicTextGap(7.0);
 
-        //TODO: replace workaround of setting the style this way
-        tooltipProperty().addListener((observable, oldValue, newValue) -> newValue.setStyle("-fx-text-fill: #000"));
+        tooltipProperty().addListener((observable, oldValue, newValue) -> newValue.getStyleClass().add("tooltip-hyperlink-icon"));
     }
 
     public void clear() {

desktop/src/main/java/bisq/desktop/components/SeparatedPhaseBars.java

@@ -148,11 +148,11 @@ public SeparatedPhaseBarsItem(DaoPhase.Phase phase, boolean showBlocks) {
         }
 
         public void setInActive() {
-            titleLabel.setStyle("-fx-text-fill: black;");
+            titleLabel.getStyleClass().add("separated-phase-bar-inactive");
         }
 
         public void setActive() {
-            titleLabel.setStyle("-fx-text-fill: -fx-accent;");
+            titleLabel.getStyleClass().add("separated-phase-bar-active");
         }
 
         public void setPeriodRange(int firstBlock, int lastBlock, int duration) {

desktop/src/main/java/bisq/desktop/components/TooltipUtil.java

@@ -38,7 +38,7 @@ public static void showTooltipIfTruncated(SkinBase skinBase, Labeled labeled) {
 
                     // Force tooltip to use color, as it takes in some cases the color of the parent label
                     // and can't be overriden by class or id
-                    tooltip.setStyle("-fx-text-fill: -bs-rd-black;");
+                    tooltip.setStyle("-fx-text-fill: -bs-rd-tooltip-truncated;");
                     labeled.setTooltip(tooltip);
                 }
             }