add dark theme

4 years ago · 77d3c848f9
31 changed files with 378 additions and 126 deletions
--- a/src/main/java/com/sparrowwallet/sparrow/AppController.java
+++ b/src/main/java/com/sparrowwallet/sparrow/AppController.java
@ -98,6 +98,9 @@ public class AppController implements Initializable {
    @FXML
    private ToggleGroup bitcoinUnit;

+    @FXML
+    private ToggleGroup theme;
+
    @FXML
    private CheckMenuItem showTxHex;

@ -224,8 +227,18 @@ public class AppController implements Initializable {
            Config.get().setBitcoinUnit(unit);
        }
        final BitcoinUnit selectedUnit = unit;
-        Optional<Toggle> selectedToggle = bitcoinUnit.getToggles().stream().filter(toggle -> selectedUnit.equals(toggle.getUserData())).findFirst();
-        selectedToggle.ifPresent(toggle -> bitcoinUnit.selectToggle(toggle));
+        Optional<Toggle> selectedUnitToggle = bitcoinUnit.getToggles().stream().filter(toggle -> selectedUnit.equals(toggle.getUserData())).findFirst();
+        selectedUnitToggle.ifPresent(toggle -> bitcoinUnit.selectToggle(toggle));
+
+        Theme configTheme = Config.get().getTheme();
+        if(configTheme == null) {
+            configTheme = Theme.LIGHT;
+            Config.get().setTheme(Theme.LIGHT);
+        }
+        final Theme selectedTheme = configTheme;
+        Optional<Toggle> selectedThemeToggle = theme.getToggles().stream().filter(toggle -> selectedTheme.equals(toggle.getUserData())).findFirst();
+        selectedThemeToggle.ifPresent(toggle -> theme.selectToggle(toggle));
+        setTheme(null);

        showTxHex.setSelected(true);
        showTxHexProperty = true;
@ -409,11 +422,11 @@ public class AppController implements Initializable {
            Stage stage = new Stage();
            stage.setTitle("About " + MainApp.APP_NAME);
            stage.initStyle(org.controlsfx.tools.Platform.getCurrent() == org.controlsfx.tools.Platform.OSX ? StageStyle.UNDECORATED : StageStyle.DECORATED);
-            setStageIcon(stage);
            stage.setResizable(false);
            stage.setScene(new Scene(root));
            controller.setStage(stage);
            controller.initializeView();
+            setStageIcon(stage);

            return stage;
        } catch(IOException e) {
@ -655,6 +668,7 @@ public class AppController implements Initializable {
    public static void showErrorDialog(String title, String content) {
        Alert alert = new Alert(Alert.AlertType.ERROR);
        setStageIcon(alert.getDialogPane().getScene().getWindow());
+        alert.getDialogPane().getScene().getStylesheets().add(AppController.class.getResource("general.css").toExternalForm());
        alert.setTitle(title);
        alert.setHeaderText(title);
        alert.setContentText(content);
@ -664,6 +678,10 @@ public class AppController implements Initializable {
    public static void setStageIcon(Window window) {
        Stage stage = (Stage)window;
        stage.getIcons().add(new Image(AppController.class.getResourceAsStream("/image/sparrow.png")));
+
+        if(stage.getScene() != null && Config.get().getTheme() == Theme.DARK) {
+            stage.getScene().getStylesheets().add(AppController.class.getResource("darktheme.css").toExternalForm());
+        }
    }

    public static Font getMonospaceFont() {
@ -1092,6 +1110,19 @@ public class AppController implements Initializable {
        return contextMenu;
    }

+    public void setTheme(ActionEvent event) {
+        Theme selectedTheme = (Theme)theme.getSelectedToggle().getUserData();
+        if(Config.get().getTheme() != selectedTheme) {
+            Config.get().setTheme(selectedTheme);
+        }
+
+        if(selectedTheme == Theme.DARK) {
+            tabs.getScene().getStylesheets().add(getClass().getResource("darktheme.css").toExternalForm());
+        } else {
+            tabs.getScene().getStylesheets().remove(getClass().getResource("darktheme.css").toExternalForm());
+        }
+    }
+
    @Subscribe
    public void tabSelected(TabSelectedEvent event) {
        String tabName = event.getTabName();
--- a/src/main/java/com/sparrowwallet/sparrow/Theme.java
+++ b/src/main/java/com/sparrowwallet/sparrow/Theme.java
@ -0,0 +1,5 @@
+package com.sparrowwallet.sparrow;
+
+public enum Theme {
+    LIGHT, DARK
+}
--- a/src/main/java/com/sparrowwallet/sparrow/control/QRDisplayDialog.java
+++ b/src/main/java/com/sparrowwallet/sparrow/control/QRDisplayDialog.java
@ -54,7 +54,7 @@ public class QRDisplayDialog extends Dialog<UR> {
        qrImageView = new ImageView();
        stackPane.getChildren().add(qrImageView);

-        dialogPane.setContent(Borders.wrap(stackPane).lineBorder().outerPadding(0).innerPadding(0).buildAll());
+        dialogPane.setContent(Borders.wrap(stackPane).lineBorder().buildAll());

        nextPart();
        if(encoder.isSinglePart()) {
--- a/src/main/java/com/sparrowwallet/sparrow/control/QRScanDialog.java
+++ b/src/main/java/com/sparrowwallet/sparrow/control/QRScanDialog.java
@ -40,7 +40,7 @@ public class QRScanDialog extends Dialog<QRScanDialog.Result> {
        StackPane stackPane = new StackPane();
        stackPane.getChildren().add(webcamView.getView());

-        dialogPane.setContent(Borders.wrap(stackPane).lineBorder().outerPadding(0).innerPadding(0).buildAll());
+        dialogPane.setContent(Borders.wrap(stackPane).lineBorder().buildAll());

        webcamService.resultProperty().addListener(new QRResultListener());
        webcamService.setOnFailed(failedEvent -> {
--- a/src/main/java/com/sparrowwallet/sparrow/control/TextAreaDialog.java
+++ b/src/main/java/com/sparrowwallet/sparrow/control/TextAreaDialog.java
@ -26,6 +26,7 @@ public class TextAreaDialog extends Dialog<String> {
        this.defaultValue = defaultValue;

        dialogPane.setContent(hbox);
+        dialogPane.getStylesheets().add(AppController.class.getResource("general.css").toExternalForm());
        AppController.setStageIcon(dialogPane.getScene().getWindow());

        dialogPane.getStyleClass().add("text-input-dialog");
--- a/src/main/java/com/sparrowwallet/sparrow/io/Config.java
+++ b/src/main/java/com/sparrowwallet/sparrow/io/Config.java
@ -3,6 +3,7 @@ package com.sparrowwallet.sparrow.io;
 import com.google.gson.*;
 import com.sparrowwallet.drongo.BitcoinUnit;
 import com.sparrowwallet.sparrow.Mode;
+import com.sparrowwallet.sparrow.Theme;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;

@ -24,6 +25,7 @@ public class Config {
    private boolean includeMempoolChange = true;
    private boolean notifyNewTransactions = true;
    private boolean checkNewVersions = true;
+    private Theme theme;
    private List<File> recentWalletFiles;
    private Integer keyDerivationPeriod;
    private File hwi;
@ -145,6 +147,15 @@ public class Config {
        flush();
    }

+    public Theme getTheme() {
+        return theme;
+    }
+
+    public void setTheme(Theme theme) {
+        this.theme = theme;
+        flush();
+    }
+
    public List<File> getRecentWalletFiles() {
        return recentWalletFiles;
    }
--- a/src/main/java/com/sparrowwallet/sparrow/keystoreimport/KeystoreImportDialog.java
+++ b/src/main/java/com/sparrowwallet/sparrow/keystoreimport/KeystoreImportDialog.java
@ -35,7 +35,7 @@ public class KeystoreImportDialog extends Dialog<Keystore> {

        try {
            FXMLLoader ksiLoader = new FXMLLoader(AppController.class.getResource("keystoreimport/keystoreimport.fxml"));
-            dialogPane.setContent(Borders.wrap(ksiLoader.load()).lineBorder().outerPadding(0).innerPadding(0).buildAll());
+            dialogPane.setContent(Borders.wrap(ksiLoader.load()).emptyBorder().buildAll());
            keystoreImportController = ksiLoader.getController();
            keystoreImportController.initializeView(wallet);
            keystoreImportController.selectSource(initialSource);
--- a/src/main/java/com/sparrowwallet/sparrow/preferences/PreferencesDialog.java
+++ b/src/main/java/com/sparrowwallet/sparrow/preferences/PreferencesDialog.java
@ -31,7 +31,7 @@ public class PreferencesDialog extends Dialog<Boolean> {

        try {
            FXMLLoader preferencesLoader = new FXMLLoader(AppController.class.getResource("preferences/preferences.fxml"));
-            dialogPane.setContent(Borders.wrap(preferencesLoader.load()).lineBorder().outerPadding(0).innerPadding(0).buildAll());
+            dialogPane.setContent(Borders.wrap(preferencesLoader.load()).emptyBorder().buildAll());
            PreferencesController preferencesController = preferencesLoader.getController();
            preferencesController.initializeView(Config.get());
            if(initialGroup != null) {
--- a/src/main/java/com/sparrowwallet/sparrow/preferences/ServerPreferencesController.java
+++ b/src/main/java/com/sparrowwallet/sparrow/preferences/ServerPreferencesController.java
@ -227,7 +227,7 @@ public class ServerPreferencesController extends PreferencesDetailController {
    }

    private void showConnectionSuccess(List<String> serverVersion, String serverBanner) {
-        testConnection.setGraphic(getGlyph(FontAwesome5.Glyph.CHECK_CIRCLE, Color.rgb(80, 161, 79)));
+        testConnection.setGraphic(getGlyph(FontAwesome5.Glyph.CHECK_CIRCLE, "success"));
        if(serverVersion != null) {
            testResults.setText("Connected to " + serverVersion.get(0) + " on protocol version " + serverVersion.get(1));
            if(ElectrumServer.supportsBatching(serverVersion)) {
@ -248,7 +248,7 @@ public class ServerPreferencesController extends PreferencesDetailController {
        }

        testResults.setText("Could not connect:\n\n" + reason);
-        testConnection.setGraphic(getGlyph(FontAwesome5.Glyph.EXCLAMATION_CIRCLE, Color.rgb(202, 18, 67)));
+        testConnection.setGraphic(getGlyph(FontAwesome5.Glyph.EXCLAMATION_CIRCLE, "failure"));
    }

    private void setupValidation() {
@ -340,11 +340,11 @@ public class ServerPreferencesController extends PreferencesDetailController {
        }
    }

-    private Glyph getGlyph(FontAwesome5.Glyph glyphName, Color color) {
+    private Glyph getGlyph(FontAwesome5.Glyph glyphName, String styleClass) {
        Glyph glyph = new Glyph(FontAwesome5.FONT_NAME, glyphName);
-        glyph.setFontSize(13);
-        if(color != null) {
-            glyph.setColor(color);
+        glyph.setFontSize(12);
+        if(styleClass != null) {
+            glyph.getStyleClass().add(styleClass);
        }

        return glyph;
--- a/src/main/java/com/sparrowwallet/sparrow/wallet/AdvancedDialog.java
+++ b/src/main/java/com/sparrowwallet/sparrow/wallet/AdvancedDialog.java
@ -18,7 +18,7 @@ public class AdvancedDialog extends Dialog<Void> {

        try {
            FXMLLoader advancedLoader = new FXMLLoader(AppController.class.getResource("wallet/advanced.fxml"));
-            dialogPane.setContent(Borders.wrap(advancedLoader.load()).lineBorder().outerPadding(0).innerPadding(0).buildAll());
+            dialogPane.setContent(Borders.wrap(advancedLoader.load()).emptyBorder().buildAll());
            AdvancedController settingsAdvancedController = advancedLoader.getController();
            settingsAdvancedController.initializeView(wallet);

--- a/src/main/java/com/sparrowwallet/sparrow/wallet/KeystoreController.java
+++ b/src/main/java/com/sparrowwallet/sparrow/wallet/KeystoreController.java
@ -183,7 +183,7 @@ public class KeystoreController extends WalletFormController implements Initiali

        validationSupport.registerValidator(fingerprint, Validator.combine(
                Validator.createEmptyValidator("Master fingerprint is required"),
-                (Control c, String newValue) -> ValidationResult.fromErrorIf( c, "Master fingerprint is invalid", (newValue.length() != 8 || !Utils.isHex(newValue)))
+                (Control c, String newValue) -> ValidationResult.fromErrorIf( c, "Master fingerprint is invalid", (newValue == null || newValue.length() != 8 || !Utils.isHex(newValue)))
        ));

        validationSupport.setValidationDecorator(new StyleClassValidationDecoration());
--- a/src/main/java/com/sparrowwallet/sparrow/wallet/ReceiveController.java
+++ b/src/main/java/com/sparrowwallet/sparrow/wallet/ReceiveController.java
@ -114,7 +114,7 @@ public class ReceiveController extends WalletFormController implements Initializ
        scriptPubKeyArea.appendScript(nodeEntry.getOutputScript(), null, null);

        outputDescriptor.clear();
-        outputDescriptor.appendText(nodeEntry.getOutputDescriptor());
+        outputDescriptor.append(nodeEntry.getOutputDescriptor(), "descriptor-text");

        updateDisplayAddress(AppController.getDevices());
    }
--- a/src/main/java/com/sparrowwallet/sparrow/wallet/SettingsController.java
+++ b/src/main/java/com/sparrowwallet/sparrow/wallet/SettingsController.java
@ -88,7 +88,7 @@ public class SettingsController extends WalletFormController implements Initiali
    @Override
    public void initializeView() {
        keystoreTabs = new TabPane();
-        keystoreTabsPane.getChildren().add(Borders.wrap(keystoreTabs).etchedBorder().outerPadding(10, 5, 0 ,0).innerPadding(0).raised().buildAll());
+        keystoreTabsPane.getChildren().add(keystoreTabs);

        policyType.getSelectionModel().selectedItemProperty().addListener((observable, oldValue, policyType) -> {
            walletForm.getWallet().setPolicyType(policyType);
--- a/src/main/resources/com/sparrowwallet/sparrow/app.fxml
+++ b/src/main/resources/com/sparrowwallet/sparrow/app.fxml
@ -7,6 +7,7 @@
 <?import javafx.scene.shape.Rectangle?>
 <?import com.sparrowwallet.sparrow.control.UnlabeledToggleSwitch?>
 <?import com.sparrowwallet.drongo.BitcoinUnit?>
+<?import com.sparrowwallet.sparrow.Theme?>

 <VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="200" minWidth="350" prefHeight="770.0" prefWidth="1000.0" fx:controller="com.sparrowwallet.sparrow.AppController" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1">
    <children>
@ -39,6 +40,9 @@
                <fx:define>
                    <ToggleGroup fx:id="bitcoinUnit"/>
                </fx:define>
+                <fx:define>
+                    <ToggleGroup fx:id="theme"/>
+                </fx:define>
                <Menu mnemonicParsing="false" text="View">
                    <items>
                        <Menu mnemonicParsing="false" text="Bitcoin Unit">
@ -60,6 +64,20 @@
                                </RadioMenuItem>
                            </items>
                        </Menu>
+                        <Menu mnemonicParsing="false" text="Theme">
+                            <items>
+                                <RadioMenuItem mnemonicParsing="false" text="Light" toggleGroup="$theme" onAction="#setTheme">
+                                    <userData>
+                                        <Theme fx:constant="LIGHT" />
+                                    </userData>
+                                </RadioMenuItem>
+                                <RadioMenuItem mnemonicParsing="false" text="Dark" toggleGroup="$theme" onAction="#setTheme">
+                                    <userData>
+                                        <Theme fx:constant="DARK" />
+                                    </userData>
+                                </RadioMenuItem>
+                            </items>
+                        </Menu>
                        <CheckMenuItem fx:id="showTxHex" mnemonicParsing="false" text="Show Transaction Hex" onAction="#showTxHex"/>
                    </items>
                </Menu>
--- a/src/main/resources/com/sparrowwallet/sparrow/darktheme.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/darktheme.css
@ -0,0 +1,146 @@
+.root {
+    -fx-accent: #1e88cf;
+    -fx-focus-color: -fx-accent;
+    -fx-base: #373e43;
+    -fx-control-inner-background: derive(-fx-base, 35%);
+    -fx-control-inner-background-alt: -fx-control-inner-background ;
+}
+
+.label{
+    -fx-text-fill: lightgray;
+}
+
+.text-field {
+    -fx-prompt-text-fill: gray;
+}
+
+.titulo{
+    -fx-font-weight: bold;
+    -fx-font-size: 18px;
+}
+
+.button{
+    -fx-focus-traversable: false;
+}
+
+.button:hover{
+    -fx-text-fill: white;
+}
+
+.separator *.line {
+    -fx-background-color: #3C3C3C;
+    -fx-border-style: solid;
+    -fx-border-width: 1px;
+}
+
+.scroll-bar{
+    -fx-background-color: derive(-fx-base,45%)
+}
+
+.button:default {
+    -fx-base: -fx-accent ;
+}
+
+.table-view{
+    /*-fx-background-color: derive(-fx-base, 10%);*/
+    -fx-selection-bar-non-focused: derive(-fx-base, 50%);
+}
+
+.table-view .column-header .label{
+    -fx-alignment: CENTER_LEFT;
+    -fx-font-weight: none;
+}
+
+.list-cell:even,
+.list-cell:odd,
+.table-row-cell:even,
+.table-row-cell:odd{
+    -fx-control-inner-background: derive(-fx-base, 15%);
+}
+
+.list-cell:empty,
+.table-row-cell:empty {
+    -fx-background-color: transparent;
+}
+
+.list-cell,
+.table-row-cell{
+    -fx-border-color: transparent;
+    -fx-table-cell-border-color:transparent;
+}
+
+.status-bar {
+    -fx-background-color: black, -fx-body-color;
+}
+
+.chart .default-color0.chart-series-line {
+    -fx-stroke: rgba(125, 128, 139, 0.6);
+}
+
+.chart .chart-bar {
+    -fx-bar-fill: rgba(135, 138, 149, 0.5);
+}
+
+#inputsPie .default-color0.chart-pie {
+    -fx-pie-color: #e06c75;
+}
+
+#outputsPie .default-color3.chart-pie {
+    -fx-pie-color: #e06c75
+}
+
+.root .etched-raised-border {
+    -fx-border-color: #ffffff, #000000;
+    -fx-border-style: solid, solid;
+    -fx-border-width: 1px, 1px;
+}
+
+.root .line-border {
+    -fx-border-color: #000000;
+    -fx-border-style: solid;
+    -fx-border-width: 1px;
+}
+
+.root .duplicate-warning {
+    -fx-text-fill: #e06c75;
+}
+
+.root .unused-check {
+    -fx-text-fill: #98c379;
+}
+
+.root .script-nest { -fx-fill: #565c64 }
+.root .script-opcode { -fx-fill: #56b6c2 }
+.root .script-hash { -fx-fill: #d19a66 }
+.root .script-signature { -fx-fill: #98c379 }
+.root .script-pubkey { -fx-fill: #c678dd }
+.root .script-redeem { -fx-fill: #e06c75 }
+.root .script-other { -fx-fill: #b6bdca }
+
+.root #txhex {
+    color-0: #e06c75;
+    color-1: #e5c07b;
+    color-2: #d19a66;
+    color-3: #98c379;
+    color-4: #61afef;
+    color-5: #56b6c2;
+    color-6: #c678dd;
+    color-7: #be5046;
+    color-8: #000000;
+    color-grey: #565c64;
+}
+
+.root .success {
+    -fx-text-fill: #98c379;
+}
+
+.root .failure {
+    -fx-text-fill: #e06c75;
+}
+
+.root .titled-description-pane > .title {
+    -fx-background-color: derive(-fx-base, 10%);
+    -fx-padding: 0;
+    -fx-border-color: derive(-fx-base, -2%);
+    /*-fx-border-width: 1;*/
+}
--- a/src/main/resources/com/sparrowwallet/sparrow/descriptor.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/descriptor.css
@ -1,3 +1,3 @@
-.descriptor-text { -fx-fill: #000000 }
+.descriptor-text { -fx-fill: -fx-text-inner-color }
 .descriptor-error { -fx-fill: #ca1243 }

--- a/src/main/resources/com/sparrowwallet/sparrow/general.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/general.css
@ -126,4 +126,28 @@

 .default-button {
    -fx-base: -fx-default-button;
-}
+}
+
+.etched-raised-border {
+    -fx-border-color: #ffffff, #a9a9a9;
+    -fx-border-style: solid, solid;
+    -fx-border-width: 1px, 1px;
+}
+
+.line-border {
+    -fx-border-color: #a9a9a9;
+    -fx-border-style: solid;
+    -fx-border-width: 1px;
+}
+
+.success {
+    -fx-text-fill: rgb(80, 161, 79);
+}
+
+.failure {
+    -fx-text-fill: rgb(202, 18, 67);
+}
+
+.root .header-panel {
+    -fx-background-color: -fx-box-border, derive(-fx-background, 10%);
+}
--- a/src/main/resources/com/sparrowwallet/sparrow/keystoreimport/keystoreimport.fxml
+++ b/src/main/resources/com/sparrowwallet/sparrow/keystoreimport/keystoreimport.fxml
@ -9,7 +9,7 @@
 <?import com.sparrowwallet.drongo.wallet.KeystoreSource?>

 <?import javafx.geometry.Insets?>
-<BorderPane stylesheets="@../general.css, @keystoreimport.css" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="com.sparrowwallet.sparrow.keystoreimport.KeystoreImportController">
+<BorderPane stylesheets="@../general.css, @keystoreimport.css" styleClass="line-border" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="com.sparrowwallet.sparrow.keystoreimport.KeystoreImportController">
    <padding>
        <Insets top="0" left="0" right="0" bottom="0" />
    </padding>
--- a/src/main/resources/com/sparrowwallet/sparrow/preferences/preferences.fxml
+++ b/src/main/resources/com/sparrowwallet/sparrow/preferences/preferences.fxml
@ -9,7 +9,7 @@
 <?import javafx.geometry.Insets?>
 <?import com.sparrowwallet.sparrow.preferences.PreferenceGroup?>
 <?import org.controlsfx.glyphfont.Glyph?>
-<BorderPane stylesheets="@../general.css, @preferences.css" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="com.sparrowwallet.sparrow.preferences.PreferencesController">
+<BorderPane stylesheets="@../general.css, @preferences.css" styleClass="line-border" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="com.sparrowwallet.sparrow.preferences.PreferencesController">
    <left>
        <VBox styleClass="list-menu">
            <ToggleButton VBox.vgrow="ALWAYS" text="General" wrapText="true" textAlignment="CENTER" contentDisplay="TOP" styleClass="list-item" maxHeight="Infinity" toggleGroup="$preferencesMenu">
--- a/src/main/resources/com/sparrowwallet/sparrow/script.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/script.css
@ -31,6 +31,7 @@
    -fx-font-size: 13px;
    -fx-font-family: 'Roboto Mono';
    -fx-padding: 4;
+    -fx-fill: -fx-text-inner-color;
 }

 .virtualized-scroll-pane {
--- a/src/main/resources/com/sparrowwallet/sparrow/transaction/headers.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/transaction/headers.css
@ -1,24 +1,24 @@
-.version { -fx-fill: #986801 }
-.segwit-marker { -fx-fill: #000000 }
-.segwit-flag { -fx-fill: #4078f2 }
-
-.num-inputs { -fx-fill: #ca1243 }
-.input-hash { -fx-fill: #0184bc }
-.input-index { -fx-fill: #0184bc }
-.input-sigscript-length { -fx-fill: #0184bc }
-.input-sigscript { -fx-fill: #0184bc }
-.input-sequence { -fx-fill: #0184bc }
-
-.num-outputs { -fx-fill: #ca1243 }
-.output-value { -fx-fill: #50a14f }
-.output-pubkeyscript-length { -fx-fill: #50a14f }
-.output-pubkeyscript { -fx-fill: #50a14f }
-
-.witness-count { -fx-fill: #ca1243 }
-.witness-length { -fx-fill: #a626a4 }
-.witness-data { -fx-fill: #a626a4 }
-
-.locktime { -fx-fill: #986801 }
+.version { -fx-fill: color-7 }
+.segwit-marker { -fx-fill: color-8 }
+.segwit-flag { -fx-fill: color-5 }
+
+.num-inputs { -fx-fill: color-0 }
+.input-hash { -fx-fill: color-4 }
+.input-index { -fx-fill: color-4 }
+.input-sigscript-length { -fx-fill: color-4 }
+.input-sigscript { -fx-fill: color-4 }
+.input-sequence { -fx-fill: color-4 }
+
+.num-outputs { -fx-fill: color-0 }
+.output-value { -fx-fill: color-3 }
+.output-pubkeyscript-length { -fx-fill: color-3 }
+.output-pubkeyscript { -fx-fill: color-3 }
+
+.witness-count { -fx-fill: color-0 }
+.witness-length { -fx-fill: color-6 }
+.witness-data { -fx-fill: color-6 }
+
+.locktime { -fx-fill: color-7 }

 #locktimeCurrentHeight {
    -fx-padding: 0 0 0 12;
--- a/src/main/resources/com/sparrowwallet/sparrow/transaction/input.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/transaction/input.css
@ -1,27 +1,27 @@
-.version { -fx-fill: #e5e5e6 }
-.segwit-marker { -fx-fill: #e5e5e6 }
-.segwit-flag { -fx-fill: #e5e5e6 }
+.version { -fx-fill: color-grey }
+.segwit-marker { -fx-fill: color-grey }
+.segwit-flag { -fx-fill: color-grey }

-.num-inputs { -fx-fill: #e5e5e6 }
-.input-other { -fx-fill: #e5e5e6 }
+.num-inputs { -fx-fill: color-grey }
+.input-other { -fx-fill: color-grey }

-.input-hash { -fx-fill: #0184bc  }
-.input-index { -fx-fill: #000000 }
-.input-sigscript-length { -fx-fill: #a626a4 }
-.input-sigscript { -fx-fill: #50a14f }
-.input-sequence { -fx-fill: #986801 }
+.input-hash { -fx-fill: color-4  }
+.input-index { -fx-fill: color-8 }
+.input-sigscript-length { -fx-fill: color-6 }
+.input-sigscript { -fx-fill: color-3 }
+.input-sequence { -fx-fill: color-7 }

-.num-outputs { -fx-fill: #e5e5e6 }
-.output-value { -fx-fill: #e5e5e6 }
-.output-pubkeyscript-length { -fx-fill: #e5e5e6 }
-.output-pubkeyscript { -fx-fill: #e5e5e6 }
+.num-outputs { -fx-fill: color-grey }
+.output-value { -fx-fill: color-grey }
+.output-pubkeyscript-length { -fx-fill: color-grey }
+.output-pubkeyscript { -fx-fill: color-grey }

-.witness-other { -fx-fill: #e5e5e6 }
+.witness-other { -fx-fill: color-grey }

-.witness-count { -fx-fill: #ca1243 }
-.witness-length { -fx-fill: #986801 }
-.witness-data { -fx-fill: #a626a4 }
+.witness-count { -fx-fill: color-0 }
+.witness-length { -fx-fill: color-7 }
+.witness-data { -fx-fill: color-6 }

-.locktime { -fx-fill: #e5e5e6 }
+.locktime { -fx-fill: color-grey }


--- a/src/main/resources/com/sparrowwallet/sparrow/transaction/inputs.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/transaction/inputs.css
@ -1,24 +1,24 @@
-.version { -fx-fill: #e5e5e6 }
-.segwit-marker { -fx-fill: #e5e5e6 }
-.segwit-flag { -fx-fill: #e5e5e6 }
+.version { -fx-fill: color-grey }
+.segwit-marker { -fx-fill: color-grey }
+.segwit-flag { -fx-fill: color-grey }

-.num-inputs { -fx-fill: #ca1243 }
-.input-hash { -fx-fill: #0184bc }
-.input-index { -fx-fill: #000000 }
-.input-sigscript-length { -fx-fill: #a626a4 }
-.input-sigscript { -fx-fill: #50a14f }
-.input-sequence { -fx-fill: #986801 }
+.num-inputs { -fx-fill: color-0 }
+.input-hash { -fx-fill: color-4 }
+.input-index { -fx-fill: color-8 }
+.input-sigscript-length { -fx-fill: color-6 }
+.input-sigscript { -fx-fill: color-3 }
+.input-sequence { -fx-fill: color-7 }

-.num-outputs { -fx-fill: #e5e5e6 }
-.output-value { -fx-fill: #e5e5e6 }
-.output-pubkeyscript-length { -fx-fill: #e5e5e6 }
-.output-pubkeyscript { -fx-fill: #e5e5e6 }
+.num-outputs { -fx-fill: color-grey }
+.output-value { -fx-fill: color-grey }
+.output-pubkeyscript-length { -fx-fill: color-grey }
+.output-pubkeyscript { -fx-fill: color-grey }

-.witness-count { -fx-fill: #ca1243 }
-.witness-length { -fx-fill: #986801 }
-.witness-data { -fx-fill: #a626a4 }
+.witness-count { -fx-fill: color-0 }
+.witness-length { -fx-fill: color-7 }
+.witness-data { -fx-fill: color-6 }

-.locktime { -fx-fill: #e5e5e6 }
+.locktime { -fx-fill: color-grey }

 .chart-legend-item {
    -fx-font-size: 13px;
--- a/src/main/resources/com/sparrowwallet/sparrow/transaction/output.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/transaction/output.css
@ -1,26 +1,26 @@
-.version { -fx-fill: #e5e5e6 }
-.segwit-marker { -fx-fill: #e5e5e6 }
-.segwit-flag { -fx-fill: #e5e5e6 }
+.version { -fx-fill: color-grey }
+.segwit-marker { -fx-fill: color-grey }
+.segwit-flag { -fx-fill: color-grey }

-.num-inputs { -fx-fill: #e5e5e6 }
-.input-hash { -fx-fill: #e5e5e6  }
-.input-index { -fx-fill: #e5e5e6 }
-.input-sigscript-length { -fx-fill: #e5e5e6 }
-.input-sigscript { -fx-fill: #e5e5e6 }
-.input-sequence { -fx-fill: #e5e5e6 }
+.num-inputs { -fx-fill: color-grey }
+.input-hash { -fx-fill: color-grey  }
+.input-index { -fx-fill: color-grey }
+.input-sigscript-length { -fx-fill: color-grey }
+.input-sigscript { -fx-fill: color-grey }
+.input-sequence { -fx-fill: color-grey }

-.num-outputs { -fx-fill: #e5e5e6 }
-.output-other { -fx-fill: #e5e5e6 }
+.num-outputs { -fx-fill: color-grey }
+.output-other { -fx-fill: color-grey }

-.output-value { -fx-fill: #000000 }
-.output-pubkeyscript-length { -fx-fill: #a626a4 }
-.output-pubkeyscript { -fx-fill: #50a14f }
+.output-value { -fx-fill: color-8 }
+.output-pubkeyscript-length { -fx-fill: color-6 }
+.output-pubkeyscript { -fx-fill: color-3 }

-.witness-count { -fx-fill: #e5e5e6 }
-.witness-length { -fx-fill: #e5e5e6 }
-.witness-data { -fx-fill: #e5e5e6 }
+.witness-count { -fx-fill: color-grey }
+.witness-length { -fx-fill: color-grey }
+.witness-data { -fx-fill: color-grey }

-.locktime { -fx-fill: #e5e5e6 }
+.locktime { -fx-fill: color-grey }

 #spentField .input-container {
    -fx-alignment: center-left;
--- a/src/main/resources/com/sparrowwallet/sparrow/transaction/outputs.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/transaction/outputs.css
@ -1,24 +1,24 @@
-.version { -fx-fill: #e5e5e6 }
-.segwit-marker { -fx-fill: #e5e5e6 }
-.segwit-flag { -fx-fill: #e5e5e6 }
+.version { -fx-fill: color-grey }
+.segwit-marker { -fx-fill: color-grey }
+.segwit-flag { -fx-fill: color-grey }

-.num-inputs { -fx-fill: #e5e5e6 }
-.input-hash { -fx-fill: #e5e5e6 }
-.input-index { -fx-fill: #e5e5e6 }
-.input-sigscript-length { -fx-fill: #e5e5e6 }
-.input-sigscript { -fx-fill: #e5e5e6 }
-.input-sequence { -fx-fill: #e5e5e6 }
+.num-inputs { -fx-fill: color-grey }
+.input-hash { -fx-fill: color-grey }
+.input-index { -fx-fill: color-grey }
+.input-sigscript-length { -fx-fill: color-grey }
+.input-sigscript { -fx-fill: color-grey }
+.input-sequence { -fx-fill: color-grey }

-.num-outputs { -fx-fill: #ca1243 }
-.output-value { -fx-fill: #000000 }
-.output-pubkeyscript-length { -fx-fill: #a626a4 }
-.output-pubkeyscript { -fx-fill: #50a14f }
+.num-outputs { -fx-fill: color-0 }
+.output-value { -fx-fill: color-8 }
+.output-pubkeyscript-length { -fx-fill: color-6 }
+.output-pubkeyscript { -fx-fill: color-3 }

-.witness-count { -fx-fill: #e5e5e6 }
-.witness-length { -fx-fill: #e5e5e6 }
-.witness-data { -fx-fill: #e5e5e6 }
+.witness-count { -fx-fill: color-grey }
+.witness-length { -fx-fill: color-grey }
+.witness-data { -fx-fill: color-grey }

-.locktime { -fx-fill: #e5e5e6 }
+.locktime { -fx-fill: color-grey }

 .chart-legend-item {
    -fx-font-size: 13;
--- a/src/main/resources/com/sparrowwallet/sparrow/transaction/transaction.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/transaction/transaction.css
@ -1,8 +1,18 @@
 #txhex {
-    -fx-background-color: #ffffff;
+    -fx-background-color: -fx-control-inner-background;
    -fx-font-size: 13px;
    -fx-font-family: 'Roboto Mono';
    -fx-padding: 2;
+    color-0: #ca1243;
+    color-1: #d75f00;
+    color-2: #c18401;
+    color-3: #50a14f;
+    color-4: #0184bc;
+    color-5: #4078f2;
+    color-6: #a626a4;
+    color-7: #986801;
+    color-8: #000000;
+    color-grey: #e5e5e6;
 }

 .tx-pane {
--- a/src/main/resources/com/sparrowwallet/sparrow/wallet/advanced.fxml
+++ b/src/main/resources/com/sparrowwallet/sparrow/wallet/advanced.fxml
@ -11,7 +11,7 @@
 <?import com.sparrowwallet.sparrow.control.HelpLabel?>
 <?import javafx.geometry.Insets?>

-<BorderPane stylesheets="@../general.css" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="com.sparrowwallet.sparrow.wallet.AdvancedController">
+<BorderPane stylesheets="@../general.css" styleClass="line-border" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml" fx:controller="com.sparrowwallet.sparrow.wallet.AdvancedController">
    <center>
        <GridPane hgap="10.0" vgap="10.0">
        <padding>
--- a/src/main/resources/com/sparrowwallet/sparrow/wallet/receive.fxml
+++ b/src/main/resources/com/sparrowwallet/sparrow/wallet/receive.fxml
@ -18,7 +18,7 @@
 <?import com.sparrowwallet.sparrow.control.CopyableTextField?>
 <?import com.sparrowwallet.sparrow.control.ScriptArea?>

-<BorderPane stylesheets="@receive.css, @wallet.css, @../script.css, @../general.css" styleClass="wallet-pane" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.sparrowwallet.sparrow.wallet.ReceiveController">
+<BorderPane stylesheets="@receive.css, @wallet.css, @../script.css, @../descriptor.css, @../general.css" styleClass="wallet-pane" xmlns="http://javafx.com/javafx/10.0.2-internal" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.sparrowwallet.sparrow.wallet.ReceiveController">
    <center>

        <GridPane styleClass="receive-form" hgap="10.0" vgap="10.0">
--- a/src/main/resources/com/sparrowwallet/sparrow/wallet/settings.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/wallet/settings.css
@ -10,4 +10,9 @@
    -fx-alignment: center-left;
 }

+.keystore-padding-border {
+    -fx-border-color: #00000000;
+    -fx-border-style: none;
+    -fx-border-width: 10 5 0 0;
+}

--- a/src/main/resources/com/sparrowwallet/sparrow/wallet/settings.fxml
+++ b/src/main/resources/com/sparrowwallet/sparrow/wallet/settings.fxml
@ -85,7 +85,11 @@

            <Form GridPane.columnIndex="0" GridPane.columnSpan="2" GridPane.rowIndex="2">
                <Fieldset inputGrow="SOMETIMES" text="Keystores">
-                    <StackPane fx:id="keystoreTabsPane"  />
+                        <StackPane styleClass="keystore-padding-border">
+                            <StackPane styleClass="etched-raised-border">
+                                <StackPane fx:id="keystoreTabsPane"/>
+                            </StackPane>
+                        </StackPane>
                </Fieldset>
            </Form>
        </GridPane>
--- a/src/main/resources/com/sparrowwallet/sparrow/wallet/wallet.css
+++ b/src/main/resources/com/sparrowwallet/sparrow/wallet/wallet.css
@ -35,33 +35,29 @@
 }

 .hashindex-row {
-    -fx-text-fill: #696c77;
+    -fx-opacity: 0.7;
 }

 .hashindex-row.spent {
-    -fx-text-fill: #a0a1a7;
+    -fx-opacity: 0.4;
 }

 .transaction-row.confirming {
-    -fx-text-fill: #696c77;
+    -fx-opacity: 0.7;
 }

 .utxo-row.unspendable {
-    -fx-text-fill: #a0a1a7;
+    -fx-opacity: 0.4;
 }

 .tree-table-row-cell:selected .utxo-row.unspendable {
-    -fx-text-fill: #696c77;
+    -fx-opacity: 0.7;
 }

 .tree-table-view:focused:row-selection .tree-table-row-cell:selected .utxo-row.unspendable {
    -fx-text-fill: derive(white, -15%);
 }

-.tree-table-row-cell:selected .hashindex-row, .tree-table-row-cell:selected .transaction-row {
-    -fx-text-fill: white;
-}
-
 .label-cell .text-field {
    -fx-padding: 0;
 }