Add dark mode (#301)

airsquared · airsquared · commit d00acff541af · 2021-09-05T18:12:05.000-07:00
(Automatic switching between dark and light mode not supported yet)
diff --git a/.idea/compiler.xml b/.idea/compiler.xml
diff --git a/.idea/runConfigurations/Main__Linux_.xml b/.idea/runConfigurations/Main__Linux_.xml
diff --git a/.idea/runConfigurations/Main__Windows_.xml b/.idea/runConfigurations/Main__Windows_.xml
diff --git a/.idea/runConfigurations/Main__macOS_.xml b/.idea/runConfigurations/Main__macOS_.xml
diff --git a/build.gradle b/build.gradle
@@ -65,9 +65,16 @@ javafx {
     modules = [ 'javafx.controls', 'javafx.fxml' ]
 }
 
+String addExports = '--add-exports=javafx.graphics/com.sun.javafx.css=airsquared.blobsaver'
+
+compileJava {
+    options.compilerArgs.add addExports
+}
+
 application {
     mainModule = "airsquared.blobsaver"
     mainClass = "airsquared.blobsaver.app.Main"
+    applicationDefaultJvmArgs.add addExports
 }
 
 private String getJarDirectory() {
@@ -85,14 +92,14 @@ run {
 test {
     useJUnitPlatform()
     systemProperty "jar.directory", getJarDirectory()
-    jvmArgs = ['--add-exports=javafx.graphics/com.sun.glass.ui=org.testfx.monocle']
+    jvmArgs '--add-exports=javafx.graphics/com.sun.glass.ui=org.testfx.monocle', addExports
 }
 
 jlink {
     addOptions '--strip-debug', '--compress', '2', '--no-header-files', '--no-man-pages', '--strip-native-commands',
             '--dedup-legal-notices=error-if-not-same-content'
     launcher {
-        jvmArgs = [ '-Djar.directory={{BIN_DIR}}' ]
+        jvmArgs = [ '-Djar.directory={{BIN_DIR}}', addExports ]
         noConsole = true
     }
     jpackage {
diff --git a/src/main/java/airsquared/blobsaver/app/Controller.java b/src/main/java/airsquared/blobsaver/app/Controller.java
@@ -44,12 +44,13 @@
 import java.util.Locale;
 import java.util.concurrent.TimeUnit;
 
-@SuppressWarnings({"TextBlockMigration"})
+@SuppressWarnings("TextBlockMigration")
 public class Controller {
 
 
     @FXML private MenuBar menuBar;
     @FXML private MenuItem checkForUpdatesMenu, clearAllDataMenu, deleteDeviceMenu, backgroundSettingsMenu;
+    @FXML private RadioMenuItem darkDisabled, darkSync, darkEnabled;
 
     @FXML private ChoiceBox<String> deviceTypeChoiceBox, deviceModelChoiceBox;
 
@@ -77,6 +78,11 @@ public void initialize() {
         backgroundSettingsMenu.textProperty().bind(Bindings.when(backgroundSettingsButton.selectedProperty())
                 .then("Hide Background Settings").otherwise("Show Background Settings"));
         backgroundSettingsMenu.setOnAction(e -> backgroundSettingsButton.fire());
+        switch (Prefs.getDarkMode()) {
+            case DISABLED -> darkDisabled.setSelected(true);
+            case SYNC_WITH_OS -> darkSync.setSelected(true);
+            case ENABLED -> darkEnabled.setSelected(true);
+        }
     }
 
     public void newGithubIssue() { Utils.newGithubIssue(); }
@@ -253,6 +259,28 @@ public void showOlderDevicesHandler(Event evt) {
         Devices.updateLists();
     }
 
+    @SuppressWarnings("unused")
+    public void darkModeHandler(ObservableValue<?> a, RadioMenuItem old, RadioMenuItem darkMode) {
+        switch ((Prefs.DarkMode) darkMode.getUserData()) {
+            case ENABLED -> updateDarkMode(true);
+            case DISABLED -> updateDarkMode(false);
+            case SYNC_WITH_OS -> System.err.println("Sync with OS not implemented yet"); // register listener for os here
+        }
+        Prefs.setDarkMode((Prefs.DarkMode) darkMode.getUserData());
+    }
+
+    @SuppressWarnings("ConstantConditions")
+    private void updateDarkMode(boolean enable) {
+        if (enable) {
+            // eventually replace with https://github.com/openjdk/jfx/pull/511 once released
+            com.sun.javafx.css.StyleManager.getInstance().addUserAgentStylesheet(Controller.class.getResource("modena_dark.css").toExternalForm());
+            savedDevicesVBox.setStyle("-fx-background-color: -fx-background");
+        } else {
+            com.sun.javafx.css.StyleManager.getInstance().removeUserAgentStylesheet(Controller.class.getResource("modena_dark.css").toExternalForm());
+            savedDevicesVBox.setStyle("-fx-background-color: white");
+        }
+    }
+
     public void disableAnalyticsHandler(Event evt) {
         Prefs.setDisableAnalytics(((CheckMenuItem) evt.getSource()).isSelected());
     }
diff --git a/src/main/java/airsquared/blobsaver/app/Main.java b/src/main/java/airsquared/blobsaver/app/Main.java
@@ -100,6 +100,7 @@ public JavaFxApplication() {
         }
 
         @Override
+        @SuppressWarnings("ConstantConditions")
         public void start(Stage primaryStage) {
             Main.primaryStage = primaryStage;
             Parent root = null;
@@ -113,7 +114,7 @@ public void start(Stage primaryStage) {
             primaryStage.setScene(new Scene(root));
             if (isWindows()) {
                 primaryStage.getIcons().clear();
-                primaryStage.getIcons().add(new Image(getClass().getResourceAsStream("blob_emoji.png")));
+                primaryStage.getIcons().add(new Image(Main.class.getResourceAsStream("blob_emoji.png")));
             }
             primaryStage.setResizable(false);
             Utils.checkForUpdates(false);
diff --git a/src/main/java/airsquared/blobsaver/app/Prefs.java b/src/main/java/airsquared/blobsaver/app/Prefs.java
@@ -131,6 +131,16 @@ public static boolean getShowOldDevices() {
         return appPrefs.getBoolean("Show Old Devices", false);
     }
 
+    public enum DarkMode {DISABLED, SYNC_WITH_OS, ENABLED}
+
+    public static DarkMode getDarkMode() {
+        return DarkMode.valueOf(appPrefs.get("Dark Mode", "DISABLED"));
+    }
+
+    public static void setDarkMode(DarkMode darkMode) {
+        appPrefs.put("Dark Mode", darkMode.name());
+    }
+
     private static Stream<SavedDevice> savedDevices() {
         try {
             return Arrays.stream(savedDevicesPrefs.childrenNames()).map(SavedDevice::new);
diff --git a/src/main/java/airsquared/blobsaver/app/Utils.java b/src/main/java/airsquared/blobsaver/app/Utils.java
@@ -290,12 +290,13 @@ static void forEachButton(Alert alert, Consumer<? super Node> action) {
     static File showFilePickerDialog(Window window, File initialDirectory) {
         DirectoryChooser dirChooser = new DirectoryChooser();
         dirChooser.setTitle("Choose a folder to save Blobs in");
-        if (initialDirectory.exists()) {
-            dirChooser.setInitialDirectory(initialDirectory);
-        } else if (initialDirectory.getParentFile().exists()) {
-            dirChooser.setInitialDirectory(initialDirectory.getParentFile());
-        } else {
-            dirChooser.setInitialDirectory(new File(System.getProperty("user.home")));
+        for (int i = 0; i < 20; i++) { // limit loop iterations to 20
+            if (initialDirectory == null || initialDirectory.isDirectory()) {
+                dirChooser.setInitialDirectory(initialDirectory);
+                break;
+            } else {
+                initialDirectory = initialDirectory.getParentFile();
+            }
         }
         return dirChooser.showDialog(window);
     }
diff --git a/src/main/resources/airsquared/blobsaver/app/app.css b/src/main/resources/airsquared/blobsaver/app/app.css
@@ -24,7 +24,3 @@
   -fx-max-width: Infinity;
   -fx-pref-width: Infinity;
 }
-
-#savedDevicesVBox {
-  -fx-background-color: white;
-}
diff --git a/src/main/resources/airsquared/blobsaver/app/blobsaver.fxml b/src/main/resources/airsquared/blobsaver/app/blobsaver.fxml
@@ -18,9 +18,7 @@
   ~ along with blobsaver.  If not, see <https://www.gnu.org/licenses/>.
   -->
 
-<?import airsquared.blobsaver.app.Controller?>
-<?import airsquared.blobsaver.app.Devices?>
-<?import airsquared.blobsaver.app.Prefs?>
+<?import airsquared.blobsaver.app.*?>
 <?import javafx.geometry.*?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
@@ -47,6 +45,20 @@
                           text="Uninstall..."/>
             </Menu>
             <Menu mnemonicParsing="false" text="View">
+                <Menu mnemonicParsing="false" text="Dark Mode">
+                    <fx:define>
+                        <ToggleGroup fx:id="darkModeGroup" onSelectedToggleChange="#darkModeHandler"/>
+                        <Prefs.DarkMode fx:value="DISABLED" fx:id="DARK_DISABLED"/>
+                        <Prefs.DarkMode fx:value="SYNC_WITH_OS" fx:id="DARK_SYNC_WITH_OS"/>
+                        <Prefs.DarkMode fx:value="ENABLED" fx:id="DARK_ENABLED"/>
+                    </fx:define>
+                    <RadioMenuItem mnemonicParsing="false" text="Disabled" toggleGroup="$darkModeGroup"
+                                   fx:id="darkDisabled" userData="$DARK_DISABLED"/>
+                    <RadioMenuItem mnemonicParsing="false" text="Sync With OS" toggleGroup="$darkModeGroup"
+                                   fx:id="darkSync" userData="$DARK_SYNC_WITH_OS"/>
+                    <RadioMenuItem mnemonicParsing="false" text="Enabled" toggleGroup="$darkModeGroup"
+                                   fx:id="darkEnabled" userData="$DARK_ENABLED"/>
+                </Menu>
                 <CheckMenuItem mnemonicParsing="false" text="Show Older Devices" onAction="#showOlderDevicesHandler">
                     <selected>
                         <Prefs fx:factory="getShowOldDevices"/>
diff --git a/src/main/resources/airsquared/blobsaver/app/modena_dark.css b/src/main/resources/airsquared/blobsaver/app/modena_dark.css
@@ -0,0 +1,78 @@
+/*
+ * Initially sourced from: https://github.com/joffrey-bion/javafx-themes/blob/master/css/modena_dark.css
+ * (heavily modified)
+ */
+
+
+/* Redefine base colors */
+.root {
+    -fx-base: rgb(51, 50, 49);
+    -fx-background: rgb(50, 50, 50);
+
+    /* make controls (buttons, thumb, etc.) slightly lighter */
+    -fx-color: derive(-fx-base, 25%);
+
+    /* text fields and table rows background */
+    /*-fx-control-inner-background: rgb(20, 20, 20);*/
+    -fx-control-inner-background: rgb(70, 70, 70);
+    /* version of -fx-control-inner-background for alternative rows */
+    -fx-control-inner-background-alt: derive(-fx-control-inner-background, 2%);
+
+    /* text colors depending on background's brightness */
+    -fx-light-text-color: rgb(220, 220, 220);
+    -fx-mid-text-color: rgb(100, 100, 100);
+    -fx-dark-text-color: rgb(20, 20, 20);
+
+    /* A bright blue for highlighting/accenting objects.  For example: selected
+     * text; selected items in menus, lists, trees, and tables; progress bars */
+    -fx-accent: rgb(0, 140, 173);
+
+    /*-fx-default-button: #64d8ed;*/
+
+    /* color of non-focused yet selected elements */
+    -fx-selection-bar-non-focused: rgb(50, 50, 50);
+}
+
+.button:default {
+    -fx-mid-text-color: -fx-dark-text-color;
+    -fx-color: -fx-base;
+}
+
+/*noinspection CssInvalidPseudoSelector,CssInvalidFunction*/
+.dialog-pane:header .header-panel {
+    -fx-background-color: -fx-box-border, linear-gradient(-fx-background, derive(-fx-background, -30%));
+}
+
+.menu-bar {
+    -fx-background-color: derive(-fx-color, -30%);
+}
+
+/* Fix derived prompt color for text fields */
+.text-input {
+    -fx-prompt-text-fill: derive(-fx-control-inner-background, +50%);
+}
+
+/* Keep prompt invisible when focused (above color fix overrides it) */
+.text-input:focused {
+    -fx-prompt-text-fill: transparent;
+}
+
+/* Fix scroll bar buttons arrows colors */
+.scroll-bar > .increment-button > .increment-arrow,
+.scroll-bar > .decrement-button > .decrement-arrow {
+    -fx-background-color: -fx-mark-highlight-color, rgb(220, 220, 220);
+}
+
+.scroll-bar > .increment-button:hover > .increment-arrow,
+.scroll-bar > .decrement-button:hover > .decrement-arrow {
+    -fx-background-color: -fx-mark-highlight-color, rgb(240, 240, 240);
+}
+
+.scroll-bar > .increment-button:pressed > .increment-arrow,
+.scroll-bar > .decrement-button:pressed > .decrement-arrow {
+    -fx-background-color: -fx-mark-highlight-color, rgb(255, 255, 255);
+}
+
+.choice-box > .open-button > .arrow {
+    -fx-background-color: -fx-mark-highlight-color, rgb(220, 220, 220);
+}

Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,3 @@`
`24`	`24`	`-fx-max-width: Infinity;`
`25`	`25`	`-fx-pref-width: Infinity;`
`26`	`26`	`}`
`27`		`-`
`28`		`-#savedDevicesVBox {`
`29`		`- -fx-background-color: white;`
`30`		`-}`