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"
     }
 }
 
@@ -262,6 +267,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'
@@ -281,6 +287,7 @@ configure(project(':desktop')) {
         compile project(':p2p')
         compile project(':core')
         compile project(':common')
+
         compile 'org.controlsfx:controlsfx:8.0.6_20'
         compile 'org.reactfx:reactfx:2.0-M3'
         compile 'net.glxn:qrgen:1.3'
@@ -309,6 +316,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

@@ -1292,6 +1292,7 @@ message PreferencesPayload {
     string rpc_user = 47;
     string rpc_pw = 48;
     string take_offer_selected_payment_account_id = 49;
+    bool use_dark_theme = 50;
 }
 
 ///////////////////////////////////////////////////////////////////////////////////////////

core/src/main/java/bisq/core/locale/GlobalSettings.java

@@ -25,6 +25,7 @@
 
 public class GlobalSettings {
     private static boolean useAnimations = true;
+    private static boolean useDarkTheme = false;
     private static Locale locale;
     private static final ObjectProperty<Locale> localeProperty = new SimpleObjectProperty<>(locale);
     private static TradeCurrency defaultTradeCurrency;
@@ -47,6 +48,10 @@ public static void setUseAnimations(boolean useAnimations) {
         GlobalSettings.useAnimations = useAnimations;
     }
 
+    public static void setUseDarkTheme(boolean useDarkTheme) {
+        GlobalSettings.useDarkTheme = useDarkTheme;
+    }
+
     public static void setDefaultTradeCurrency(TradeCurrency fiatCurrency) {
         GlobalSettings.defaultTradeCurrency = fiatCurrency;
     }
@@ -72,6 +77,10 @@ public static boolean getUseAnimations() {
         return useAnimations;
     }
 
+    public static boolean getUseDarkTheme() {
+        return useDarkTheme;
+    }
+
     public static Locale getLocale() {
         return locale;
     }

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

@@ -115,6 +115,8 @@ public final class Preferences implements PersistedDataHost, BridgeAddressProvid
     @Getter
     private final BooleanProperty useAnimationsProperty = new SimpleBooleanProperty(prefPayload.isUseAnimations());
     @Getter
+    private final BooleanProperty useDarkThemeProperty = new SimpleBooleanProperty(prefPayload.isUseDarkTheme());
+    @Getter
     private final BooleanProperty useCustomWithdrawalTxFeeProperty = new SimpleBooleanProperty(prefPayload.isUseCustomWithdrawalTxFee());
     @Getter
     private final LongProperty withdrawalTxFeeInBytesProperty = new SimpleLongProperty(prefPayload.getWithdrawalTxFeeInBytes());
@@ -164,6 +166,12 @@ public Preferences(Storage<PreferencesPayload> storage,
             persist();
         });
 
+        useDarkThemeProperty.addListener((ov) -> {
+            prefPayload.setUseDarkTheme(useDarkThemeProperty.get());
+            GlobalSettings.setUseDarkTheme(prefPayload.isUseDarkTheme());
+            persist();
+        });
+
         useStandbyModeProperty.addListener((ov) -> {
             prefPayload.setUseStandbyMode(useStandbyModeProperty.get());
             persist();
@@ -205,6 +213,7 @@ public void readPersisted() {
             prefPayload = persisted;
             GlobalSettings.setLocale(new Locale(prefPayload.getUserLanguage(), prefPayload.getUserCountry().code));
             GlobalSettings.setUseAnimations(prefPayload.isUseAnimations());
+            GlobalSettings.setUseDarkTheme(prefPayload.isUseDarkTheme());
             preferredTradeCurrency = checkNotNull(prefPayload.getPreferredTradeCurrency(), "preferredTradeCurrency must not be null");
             setPreferredTradeCurrency(preferredTradeCurrency);
             setFiatCurrencies(prefPayload.getFiatCurrencies());
@@ -247,6 +256,7 @@ public void readPersisted() {
 
         // set all properties
         useAnimationsProperty.set(prefPayload.isUseAnimations());
+        useDarkThemeProperty.set(prefPayload.isUseDarkTheme());
         useStandbyModeProperty.set(prefPayload.isUseStandbyMode());
         useCustomWithdrawalTxFeeProperty.set(prefPayload.isUseCustomWithdrawalTxFee());
         withdrawalTxFeeInBytesProperty.set(prefPayload.getWithdrawalTxFeeInBytes());
@@ -321,6 +331,10 @@ public void setUseAnimations(boolean useAnimations) {
         this.useAnimationsProperty.set(useAnimations);
     }
 
+    public void setUseDarkTheme(boolean useDarkTheme) {
+        this.useDarkThemeProperty.set(useDarkTheme);
+    }
+
     public void addFiatCurrency(FiatCurrency tradeCurrency) {
         if (!fiatCurrenciesAsObservable.contains(tradeCurrency))
             fiatCurrenciesAsObservable.add(tradeCurrency);
@@ -720,6 +734,8 @@ private interface ExcludesDelegateMethods {
 
         void setUseAnimations(boolean useAnimations);
 
+        void setUseDarkTheme(boolean useDarkTheme);
+
         void setUserLanguage(@NotNull String userLanguageCode);
 
         void setUserCountry(@NotNull Country userCountry);

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

@@ -91,6 +91,7 @@ public final class PreferencesPayload implements PersistableEnvelope {
     private String directoryChooserPath;
     private long buyerSecurityDepositAsLong = Restrictions.getDefaultBuyerSecurityDeposit().value;
     private boolean useAnimations;
+    private boolean useDarkTheme;
     @Nullable
     private PaymentAccount selectedPaymentAccountForCreateOffer;
     private boolean payFeeInBtc = true;
@@ -163,6 +164,7 @@ public Message toProtoMessage() {
                 .setDirectoryChooserPath(directoryChooserPath)
                 .setBuyerSecurityDepositAsLong(buyerSecurityDepositAsLong)
                 .setUseAnimations(useAnimations)
+                .setUseDarkTheme(useDarkTheme)
                 .setPayFeeInBtc(payFeeInBtc)
                 .setBridgeOptionOrdinal(bridgeOptionOrdinal)
                 .setTorTransportOrdinal(torTransportOrdinal)
@@ -236,6 +238,7 @@ public static PersistableEnvelope fromProto(PB.PreferencesPayload proto, CorePro
                 proto.getDirectoryChooserPath(),
                 proto.getBuyerSecurityDepositAsLong(),
                 proto.getUseAnimations(),
+                proto.getUseDarkTheme(),
                 paymentAccount,
                 proto.getPayFeeInBtc(),
                 proto.getBridgeAddressesList().isEmpty() ? null : new ArrayList<>(proto.getBridgeAddressesList()),

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

@@ -871,6 +871,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.useDarkTheme=Use dark 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

@@ -92,6 +92,7 @@
 import static bisq.desktop.util.Layout.MIN_WINDOW_HEIGHT;
 import static bisq.desktop.util.Layout.MIN_WINDOW_WIDTH;
 
+
 @Slf4j
 public class BisqApp extends Application implements UncaughtExceptionHandler {
     private static final long LOG_MEMORY_PERIOD_MIN = 10;
@@ -219,11 +220,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).getUseDarkThemeProperty().addListener((ov) -> {
+            loadSceneStyles(scene, injector);
+        });
+
         return scene;
     }
 
@@ -313,12 +317,37 @@ 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)) {
+                        toggleDarkTheme(scene, injector);
                     }
                 }
             }
         });
     }
 
+    private void toggleDarkTheme(Scene scene, Injector injector) {
+        boolean useDarkTheme = ! injector.getInstance(Preferences.class).isUseDarkTheme();
+        injector.getInstance(Preferences.class).setUseDarkTheme(useDarkTheme);
+        loadSceneStyles(scene, injector);
+    }
+
+    private void loadSceneStyles(Scene scene, Injector injector) {
+        Boolean useDarkTheme = injector.getInstance(Preferences.class).isUseDarkTheme();
+        String themeCss = useDarkTheme ? "theme-dark.css" : "theme-light.css";
+        String cssPath = "/bisq/desktop/styles/";
+
+//        String cssBaseDir = "/home/peter/Work/bisq/bisq/desktop/build/resources/main/bisq/desktop/styles/";
+//
+//        scene.getStylesheets().setAll(
+//                "file://" + cssBaseDir + themeCss,
+//                "file://" + cssBaseDir + "bisq.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.