added dark theme

main/ui/src/main/java/org/cryptomator/ui/FxApplication.java

@@ -2,7 +2,6 @@ package org.cryptomator.ui;
 
 import javafx.application.Application;
 import javafx.application.Platform;
-import javafx.beans.Observable;
 import javafx.beans.value.ObservableValue;
 import javafx.stage.Stage;
 import org.cryptomator.common.settings.Settings;
@@ -34,7 +33,7 @@ public class FxApplication extends Application {
 
 	public void start() {
 		LOG.trace("FxApplication.start()");
-		
+
 		settings.theme().addListener(this::themeChanged);
 		loadSelectedStyleSheet(settings.theme().get());
 
@@ -66,15 +65,14 @@ public class FxApplication extends Application {
 		switch (theme) {
 			case CUSTOM:
 				// TODO
-				Application.setUserAgentStylesheet(getClass().getResource("/css/win_theme.css").toString());
+				Application.setUserAgentStylesheet(getClass().getResource("/css/mac_theme.css").toString());
 				break;
 			case DARK:
-				// TODO
-				Application.setUserAgentStylesheet(getClass().getResource("/css/mac_theme.css").toString());
+				Application.setUserAgentStylesheet(getClass().getResource("/css/dark_theme.css").toString());
 				break;
 			case LIGHT:
 			default:
-				Application.setUserAgentStylesheet(getClass().getResource("/css/theme.css").toString());
+				Application.setUserAgentStylesheet(getClass().getResource("/css/light_theme.css").toString());
 				break;
 		}
 	}

main/ui/src/main/java/org/cryptomator/ui/preferences/PreferencesModule.java

@@ -28,6 +28,7 @@ abstract class PreferencesModule {
 	@PreferencesScoped
 	static Stage provideStage() {
 		Stage stage = new Stage();
+		stage.setTitle("Preferences");
 		stage.setMinWidth(400);
 		stage.setMinHeight(300);
 		stage.initModality(Modality.APPLICATION_MODAL);

main/ui/src/main/resources/css/dark_theme.css

@@ -0,0 +1,376 @@
+/*******************************************************************************
+ *                                                                             *
+ * Colors                                                                      *
+ *                                                                             *
+ ******************************************************************************/
+
+.root {
+	PRIMARY: #79B01A;
+	PRIMARY_BG: #70A11B;
+	MAIN_BG: #3B3B3B;
+	TEXT_FILL: #F7F7F7;
+	TEXT_FILL_LIGHT: #9E9E9E;
+	CONTROL_BORDER_NORMAL: #626262;
+	CONTROL_BORDER_FOCUSED: #9E9E9E;
+	CONTROL_BG_NORMAL: #222;
+	CONTROL_BG_ARMED: #515151;
+	CONTROL_WHITE_BG_ARMED: #E1E1E1;
+	SCROLL_BAR_THUMB_NORMAL: #626262;
+	SCROLL_BAR_THUMB_HOVER: #7E7E7E;
+
+	-fx-background-color: MAIN_BG;
+    -fx-text-fill: TEXT_FILL;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Labels                                                                      *
+ *                                                                             *
+ ******************************************************************************/
+
+.label {
+	-fx-text-fill: TEXT_FILL;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Main Window                                                                 *
+ *                                                                             *
+ ******************************************************************************/
+
+.main-window .title {
+	-fx-background-color: PRIMARY_BG;
+}
+
+.main-window .title .label {
+	-fx-font-family: 'Dosis';
+	-fx-font-size: 21px;
+	-fx-font-style: normal;
+	-fx-font-weight: 700;
+	-fx-text-fill: white;
+}
+
+.main-window .title .button {
+	-fx-background-color: none;
+}
+
+.main-window .title .button .fa-icon {
+	-fx-fill: white;
+}
+
+.main-window .title .button:armed .fa-icon {
+	-fx-fill: CONTROL_WHITE_BG_ARMED;
+}
+
+.main-window .resizer {
+	-fx-background-color: linear-gradient(to bottom right,
+		transparent 50%,
+		CONTROL_BORDER_NORMAL 51%,
+		CONTROL_BORDER_NORMAL 60%,
+		transparent 61%,
+		transparent 70%,
+		CONTROL_BORDER_NORMAL 71%,
+		CONTROL_BORDER_NORMAL 80%,
+		transparent 81%
+	);
+	-fx-cursor: nw_resize;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * SplitPane                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+.split-pane > .split-pane-divider {
+	-fx-padding: 0px 1px;
+}
+
+.split-pane:horizontal > .split-pane-divider {
+	-fx-background-color: MAIN_BG, CONTROL_BORDER_NORMAL;
+	-fx-background-insets: 0, 0 1 0 0;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Vault List                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+.list-view {
+    -fx-background-color: CONTROL_BG_NORMAL;
+}
+
+.list-cell:selected {
+	-fx-background-color: CONTROL_BG_ARMED;
+}
+
+.list-cell .lock-icon {
+	-fx-fill: TEXT_FILL;
+}
+
+.list-cell .detail-label {
+	-fx-text-fill: TEXT_FILL_LIGHT;
+	-fx-font-size: 0.8em;
+}
+
+.onboarding-overlay-arc {
+	-fx-stroke: TEXT_FILL;
+	-fx-fill: transparent;
+}
+
+.toolbar-container {
+	-fx-border-color: CONTROL_BORDER_NORMAL transparent transparent transparent;
+	-fx-border-width: 1px 0 0 0;
+}
+
+.toolbar-container .button {
+	-fx-pref-height: 30px;
+	-fx-pref-width: 30px;
+	-fx-background-color: transparent;
+	-fx-background-insets: 0;
+	-fx-background-radius: 0;
+	-fx-border-color: transparent CONTROL_BORDER_NORMAL transparent transparent;
+    -fx-border-width: 1;
+}
+
+.toolbar-container .button:armed {
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_ARMED;
+}
+
+.toolbar-container .button .fa-icon {
+	-fx-fill: TEXT_FILL;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ScrollBar                                                                   *
+ *                                                                             *
+ ******************************************************************************/
+
+.scroll-bar > .thumb {
+	-fx-background-color: SCROLL_BAR_THUMB_NORMAL;
+	-fx-background-insets: 1px;
+	-fx-background-radius: 2px;
+}
+
+.scroll-bar > .thumb:hover {
+	-fx-background-color: SCROLL_BAR_THUMB_HOVER;
+}
+
+.scroll-bar:horizontal > .increment-button,
+.scroll-bar:horizontal > .decrement-button {
+	-fx-padding: 3 0 3 0;
+}
+
+.scroll-bar:vertical > .increment-button,
+.scroll-bar:vertical > .decrement-button {
+	-fx-padding: 0 3 0 3;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Tooltip                                                                     *
+ *                                                                             *
+ ******************************************************************************/
+
+.tooltip {
+	-fx-text-fill: TEXT_FILL;
+	-fx-font-size: 0.8em;
+	-fx-background-color: CONTROL_BG_NORMAL;
+	-fx-padding: 0.2em 0.4em 0.2em 0.4em;
+	-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.5), 2, 0, 0, 0);
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Text Fields                                                                 *
+ *                                                                             *
+ ******************************************************************************/
+
+.text-input {
+	-fx-cursor: text;
+	-fx-text-fill: TEXT_FILL;
+	-fx-prompt-text-fill: TEXT_FILL_LIGHT;
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
+	-fx-background-insets: 0, 1px;
+	-fx-background-radius: 4px;
+	-fx-padding: 0.3em 0.5em 0.3em 0.5em;
+}
+
+.text-input:focused {
+	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_NORMAL;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Buttons                                                                     *
+ *                                                                             *
+ ******************************************************************************/
+
+.button {
+	-fx-pref-height: 25px;
+	-fx-text-fill: TEXT_FILL;
+	-fx-alignment: CENTER;
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
+	-fx-background-insets: 0, 1px;
+	-fx-background-radius: 4px;
+	-fx-padding: 0.2em 0.4em 0.2em 0.4em;
+}
+
+.button:focused {
+	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_NORMAL;
+}
+
+.button:armed {
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_ARMED;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Checkbox                                                                    *
+ *                                                                             *
+ ******************************************************************************/
+
+.check-box {
+	-fx-text-fill: TEXT_FILL;
+	-fx-label-padding: 0 0 0 6px;
+}
+
+.check-box > .box {
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
+	-fx-background-insets: 0, 1px;
+	-fx-background-radius: 4px;
+	-fx-padding: 0.3em;
+}
+
+.check-box:focused > .box {
+	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_NORMAL;
+}
+
+.check-box > .box > .mark {
+	-fx-background-color: transparent;
+	-fx-padding: 0.4em;
+	-fx-shape: "M-1,4, L-1,5.5 L3.5,8.5 L9,0 L9,-1 L7,-1 L3,6 L1,4 Z";
+}
+
+.check-box:selected > .box > .mark {
+	-fx-background-color: TEXT_FILL;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * Dropdown                                                                    *
+ *                                                                             *
+ ******************************************************************************/
+
+.choice-box {
+	-fx-text-fill: TEXT_FILL;
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
+	-fx-background-insets: 0, 1px;
+	-fx-background-radius: 4px;
+	-fx-padding: 0.3em 0.5em 0.3em 0.5em;
+}
+
+.choice-box:focused {
+	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_NORMAL;
+}
+
+.choice-box > .open-button {
+	-fx-padding: 0 0 0 0.3em;
+}
+
+.choice-box > .open-button > .arrow {
+	-fx-background-color: transparent, TEXT_FILL;
+	-fx-background-insets: 0 0 -1 0, 0;
+	-fx-padding: 0.15em 0.3em 0.15em 0.3em;
+	-fx-shape: "M 0 0 h 7 l -3.5 4 z";
+}
+
+.choice-box .context-menu {
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
+	-fx-background-insets: 0, 1px;
+	-fx-background-radius: 4px;
+	-fx-padding: 0.2em 0 0.2em 0;
+}
+
+.context-menu {
+	-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.2), 8, 0, 0, 0);
+}
+
+.menu-item {
+	-fx-padding: 0.2em 0.4em 0.2em 0.4em;
+}
+
+.menu-item:focused {
+	-fx-background-color: CONTROL_BG_ARMED;
+}
+
+/*******************************************************************************
+ *                                                                             *
+ * ProgressIndicator                                                           *
+ * Derived from aquafx-project.com, (C) Claudine Zillmann, see NOTICE.md       *
+ *                                                                             *
+ ******************************************************************************/
+
+.progress-indicator {
+	-fx-indeterminate-segment-count: 12;
+	-fx-spin-enabled: true;
+}
+
+.progress-indicator:indeterminate > .spinner {
+	-fx-padding: 0.083333em; 
+}
+
+.progress-indicator:indeterminate .segment {
+	-fx-background-color: rgb(95.0, 95.0, 98.0), rgb(122.0, 122.0, 125.0);
+	-fx-background-insets: 0, 0.5;
+}
+
+.progress-indicator:indeterminate .segment0 {
+	-fx-shape:"m 12.007729,4.9541827 c -0.49762,0.7596865 0.893181,1.6216808 1.327833,0.7666252 L 15.456199,2.0477574 C 15.942094,1.2061627 14.61426,0.43953765 14.128365,1.2811324 z";
+}
+
+.progress-indicator:indeterminate .segment1 {
+	-fx-shape:"m 9.2224559,4.62535 c -0.051108,0.9067177 1.5843581,0.957826 1.5332501,0 l 0,-4.24127319 c 0,-0.9717899 -1.5332501,-0.9717899 -1.5332501,0 z";
+}
+
+.progress-indicator:indeterminate .segment2 {
+	-fx-shape:"M 8.0465401,4.9030617 C 8.5441601,5.6627485 7.1533584,6.5247425 6.7187068,5.6696872 L 4.5980702,1.9966363 C 4.1121752,1.1550418 5.4400085,0.38841683 5.9259035,1.2300114 z";
+}
+
+.progress-indicator:indeterminate .segment3 {
+	-fx-shape:"M 5.7330066,6.5305598 C 6.5579512,6.9103162 5.8366865,8.3790371 5.0144939,7.8850315 L 1.2677551,5.8974832 C 0.409277,5.4420823 1.1277888,4.0876101 1.9862674,4.5430105 z";
+}
+
+.progress-indicator:indeterminate .segment4 {
+	-fx-shape:"m 0.42171041,9.2083842 c -0.90671825,-0.051108 -0.95782608,1.5843588 0,1.5332498 l 4.24127319,0 c 0.9717899,0 0.9717899,-1.5332498 0,-1.5332498 z";
+}
+
+.progress-indicator:indeterminate .segment5 {
+	-fx-shape:"M 5.7330066,13.443113 C 6.5579512,13.063356 5.8366865,11.594635 5.0144939,12.088641 L 1.2677551,14.076189 C 0.409277,14.53159 1.1277888,15.886062 1.9862674,15.430662 z";
+}
+
+.progress-indicator:indeterminate .segment6 {
+	-fx-shape:"M 8.0465401,15.070611 C 8.5441601,14.310924 7.1533584,13.44893 6.7187068,14.303985 l -2.1206366,3.673051 c -0.485895,0.841595 0.8419383,1.60822 1.3278333,0.766625 z";
+}
+
+.progress-indicator:indeterminate .segment7 {
+	-fx-shape:"m 9.2224559,19.539943 c -0.051108,0.906718 1.5843581,0.957826 1.5332501,0 l 0,-4.241273 c 0,-0.97179 -1.5332501,-0.97179 -1.5332501,0 z";
+}
+
+.progress-indicator:indeterminate .segment8 {
+	-fx-shape:"m 12.10997,15.070611 c -0.49762,-0.759687 0.893182,-1.621681 1.327834,-0.766626 l 2.120636,3.673051 c 0.485895,0.841595 -0.841938,1.60822 -1.327833,0.766625 z";
+}
+
+.progress-indicator:indeterminate .segment9 {
+	-fx-shape:"m 14.423504,13.443113 c -0.824945,-0.379757 -0.10368,-1.848478 0.718512,-1.354472 l 3.746739,1.987548 c 0.858478,0.455401 0.139967,1.809873 -0.718512,1.354473 z";
+}
+
+.progress-indicator:indeterminate .segment10 {
+	-fx-shape:"m 15.372451,9.2445322 c -0.906719,-0.051108 -0.957826,1.5843588 0,1.5332498 l 4.241273,0 c 0.97179,0 0.97179,-1.5332498 0,-1.5332498 z";
+}
+
+.progress-indicator:indeterminate .segment11 {
+	-fx-shape:"m 14.321262,6.5816808 c -0.824944,0.3797564 -0.10368,1.8484772 0.718513,1.3544717 L 18.786514,5.9486042 C 19.644992,5.4932031 18.92648,4.1387308 18.068001,4.5941315 z";
+}

main/ui/src/main/resources/css/theme.css

@@ -7,19 +7,31 @@
 .root {
 	PRIMARY: #79B01A;
 	PRIMARY_BG: #70A11B;
-	GRAY_LIGHT_BG: #F7F7F7;
+	MAIN_BG: #F7F7F7;
 	TEXT_FILL: #222;
 	TEXT_FILL_LIGHT: #7E7E7E;
 	CONTROL_BORDER_NORMAL: #CFCFCF;
 	CONTROL_BORDER_FOCUSED: #9E9E9E;
+	CONTROL_BG_NORMAL: #FFF;
 	CONTROL_BG_ARMED: #E1E1E1;
+	CONTROL_WHITE_BG_ARMED: #E1E1E1;
 	SCROLL_BAR_THUMB_NORMAL: #CFCFCF;
 	SCROLL_BAR_THUMB_HOVER: #B1B1B1;
 
-	-fx-background-color: GRAY_LIGHT_BG;
+	-fx-background-color: MAIN_BG;
     -fx-text-fill: TEXT_FILL;
 }
 
+/*******************************************************************************
+ *                                                                             *
+ * Labels                                                                      *
+ *                                                                             *
+ ******************************************************************************/
+
+.label {
+	-fx-text-fill: TEXT_FILL;
+}
+
 /*******************************************************************************
  *                                                                             *
  * Main Window                                                                 *
@@ -47,7 +59,7 @@
 }
 
 .main-window .title .button:armed .fa-icon {
-	-fx-fill: CONTROL_BG_ARMED;
+	-fx-fill: CONTROL_WHITE_BG_ARMED;
 }
 
 .main-window .resizer {
@@ -75,7 +87,7 @@
 }
 
 .split-pane:horizontal > .split-pane-divider {
-	-fx-background-color: GRAY_LIGHT_BG, CONTROL_BORDER_NORMAL;
+	-fx-background-color: MAIN_BG, CONTROL_BORDER_NORMAL;
 	-fx-background-insets: 0, 0 1 0 0;
 }
 
@@ -86,7 +98,7 @@
  ******************************************************************************/
 
 .list-view {
-    -fx-background-color: white;
+    -fx-background-color: CONTROL_BG_NORMAL;
 }
 
 .list-cell:selected {
@@ -97,17 +109,13 @@
 	-fx-fill: TEXT_FILL;
 }
 
-.list-cell .label {
-	-fx-text-fill: TEXT_FILL;
-}
-
 .list-cell .detail-label {
 	-fx-text-fill: TEXT_FILL_LIGHT;
 	-fx-font-size: 0.8em;
 }
 
 .onboarding-overlay-arc {
-	-fx-stroke: black;
+	-fx-stroke: TEXT_FILL;
 	-fx-fill: transparent;
 }
 
@@ -130,6 +138,10 @@
 	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_ARMED;
 }
 
+.toolbar-container .button .fa-icon {
+	-fx-fill: TEXT_FILL;
+}
+
 /*******************************************************************************
  *                                                                             *
  * ScrollBar                                                                   *
@@ -165,7 +177,7 @@
 .tooltip {
 	-fx-text-fill: TEXT_FILL;
 	-fx-font-size: 0.8em;
-	-fx-background-color: white;
+	-fx-background-color: CONTROL_BG_NORMAL;
 	-fx-padding: 0.2em 0.4em 0.2em 0.4em;
 	-fx-effect: dropshadow(three-pass-box, rgba(0,0,0,0.5), 2, 0, 0, 0);
 }
@@ -180,14 +192,14 @@
 	-fx-cursor: text;
 	-fx-text-fill: TEXT_FILL;
 	-fx-prompt-text-fill: TEXT_FILL_LIGHT;
-	-fx-background-color: CONTROL_BORDER_NORMAL, white;
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
 	-fx-background-insets: 0, 1px;
 	-fx-background-radius: 4px;
 	-fx-padding: 0.3em 0.5em 0.3em 0.5em;
 }
 
 .text-input:focused {
-	-fx-background-color: CONTROL_BORDER_FOCUSED, white;
+	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_NORMAL;
 }
 
 /*******************************************************************************
@@ -200,14 +212,14 @@
 	-fx-pref-height: 25px;
 	-fx-text-fill: TEXT_FILL;
 	-fx-alignment: CENTER;
-	-fx-background-color: CONTROL_BORDER_NORMAL, white;
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
 	-fx-background-insets: 0, 1px;
 	-fx-background-radius: 4px;
 	-fx-padding: 0.2em 0.4em 0.2em 0.4em;
 }
 
 .button:focused {
-	-fx-background-color: CONTROL_BORDER_FOCUSED, white;
+	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_NORMAL;
 }
 
 .button:armed {
@@ -226,14 +238,14 @@
 }
 
 .check-box > .box {
-	-fx-background-color: CONTROL_BORDER_NORMAL, white;
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
 	-fx-background-insets: 0, 1px;
 	-fx-background-radius: 4px;
 	-fx-padding: 0.3em;
 }
 
 .check-box:focused > .box {
-	-fx-background-color: CONTROL_BORDER_FOCUSED, white;
+	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_NORMAL;
 }
 
 .check-box > .box > .mark {
@@ -254,14 +266,14 @@
 
 .choice-box {
 	-fx-text-fill: TEXT_FILL;
-	-fx-background-color: CONTROL_BORDER_NORMAL, white;
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
 	-fx-background-insets: 0, 1px;
 	-fx-background-radius: 4px;
 	-fx-padding: 0.3em 0.5em 0.3em 0.5em;
 }
 
 .choice-box:focused {
-	-fx-background-color: CONTROL_BORDER_FOCUSED, white;
+	-fx-background-color: CONTROL_BORDER_FOCUSED, CONTROL_BG_NORMAL;
 }
 
 .choice-box > .open-button {
@@ -276,7 +288,7 @@
 }
 
 .choice-box .context-menu {
-	-fx-background-color: CONTROL_BORDER_NORMAL, white;
+	-fx-background-color: CONTROL_BORDER_NORMAL, CONTROL_BG_NORMAL;
 	-fx-background-insets: 0, 1px;
 	-fx-background-radius: 4px;
 	-fx-padding: 0.2em 0 0.2em 0;
@@ -312,7 +324,7 @@
 
 .progress-indicator:indeterminate .segment {
 	-fx-background-color: rgb(95.0, 95.0, 98.0), rgb(122.0, 122.0, 125.0);
-	-fx-background-insets:0.0, 0.5;
+	-fx-background-insets: 0, 0.5;
 }
 
 .progress-indicator:indeterminate .segment0 {

main/ui/src/main/resources/fxml/vault_list.fxml

@@ -26,7 +26,7 @@
 	<HBox styleClass="toolbar-container" VBox.vgrow="NEVER" alignment="CENTER_LEFT">
 		<Button contentDisplay="GRAPHIC_ONLY" mnemonicParsing="false" onAction="#didClickAddVault">
 			<graphic>
-				<FontAwesomeIconView glyphName="PLUS"/>
+				<FontAwesomeIconView styleClass="fa-icon" glyphName="PLUS"/>
 			</graphic>
 			<tooltip>
 				<Tooltip text="Add Vault"/>
@@ -34,7 +34,7 @@
 		</Button>
 		<Button contentDisplay="GRAPHIC_ONLY" mnemonicParsing="false" onAction="#didClickRemoveVault">
 			<graphic>
-				<FontAwesomeIconView glyphName="MINUS"/>
+				<FontAwesomeIconView styleClass="fa-icon" glyphName="MINUS"/>
 			</graphic>
 			<tooltip>
 				<Tooltip text="Remove Vault"/>