Add themes

Update UI

pom.xml

@@ -6,7 +6,7 @@
 
     <groupId>loper</groupId>
     <artifactId>LogiLedus</artifactId>
-    <version>1.0-SNAPSHOT</version>
+    <version>1.1-SNAPSHOT</version>
 
     <!-- <url></url> -->
     <description>

src/main/java/logiledus/About/AboutWindow.java

@@ -5,6 +5,7 @@ import javafx.scene.Parent;
 import javafx.scene.Scene;
 import javafx.scene.image.Image;
 import javafx.stage.Stage;
+import logiledus.Mediator;
 
 import java.io.IOException;
 import java.util.Locale;
@@ -35,8 +36,9 @@ public class AboutWindow {
                     new Image(getClass().getResourceAsStream("/ico/appIcon_64.png")),
                     new Image(getClass().getResourceAsStream("/ico/appIcon_128.png"))
             );
-            stageAbout.setScene(new Scene(parentAbout, 500, 500));
-
+            Scene scene = new Scene(parentAbout, 500, 500);
+            scene.getStylesheets().add(Mediator.getInstance().getPreferences().getTheme());
+            stageAbout.setScene(scene);
             stageAbout.show();
 
         } catch (IOException ignored){}

src/main/java/logiledus/AppPreferences.java

@@ -14,12 +14,6 @@ public class AppPreferences {
     public void setUseTray(boolean value){ preferences.putBoolean("USE_TRAY", value); }
     public boolean getUseTray(){ return preferences.getBoolean("USE_TRAY", true); }
 
-/*
-    public void setPath(String path){
-        preferences.put("PATH", path);
-    }
-    public String getPath(){
-        return preferences.get("PATH", "/");
-    }
-*/
+    public void setTheme(String value){ preferences.put("THEME", value); }
+    public String getTheme(){ return preferences.get("THEME", "/light.css"); }
 }

src/main/java/logiledus/MainFx.java

@@ -16,7 +16,7 @@ import java.util.Locale;
 import java.util.ResourceBundle;
 
 public class MainFx extends Application {
-    public static final String appVersion = "v1.0";
+    public static final String appVersion = "v1.1";
 
     private static boolean traySupport = true;
 
@@ -38,9 +38,6 @@ public class MainFx extends Application {
             SwingUtilities.invokeLater(this::addAppToTray);
         }
         //--------------------------------------------------------
-        Mediator.getInstance().setHostServices(getHostServices());
-        Mediator.getInstance().setPreferences(appPreferences);
-
         FXMLLoader loader = new FXMLLoader(getClass().getResource("/Main.fxml"));
 
         Locale locale = new Locale(Locale.getDefault().getISO3Language());
@@ -78,7 +75,12 @@ public class MainFx extends Application {
         primaryStage.setMinWidth(1215);
         primaryStage.setMinHeight(550);
         Scene mainScene = new Scene(root, 1215, 525);
-        mainScene.getStylesheets().add("/light.css");
+        mainScene.getStylesheets().add(appPreferences.getTheme());
+
+        Mediator.getInstance().setHostServices(getHostServices());
+        Mediator.getInstance().setPreferences(appPreferences);
+        Mediator.getInstance().setScene(mainScene);
+
         primaryStage.setScene(mainScene);
         primaryStage.show();
 

src/main/java/logiledus/Mediator.java

@@ -1,16 +1,19 @@
 package logiledus;
 
 import javafx.application.HostServices;
+import javafx.scene.Scene;
 
 public class Mediator{
 
     private HostServices hostServices;
     private AppPreferences preferences;
+    private Scene scene;
 
     public static Mediator getInstance(){ return MediatorHolder.INSTANCE; }
 
     public void setHostServices(HostServices hostServices){ this.hostServices = hostServices; }
     public void setPreferences(AppPreferences preferences){ this.preferences = preferences; }
+    public void setScene(Scene scene){ this.scene = scene; }
 
     private static class MediatorHolder{
         private static final Mediator INSTANCE = new Mediator();
@@ -18,4 +21,9 @@ public class Mediator{
 
     public HostServices getHostServices() { return hostServices; }
     public AppPreferences getPreferences() { return preferences; }
+
+    public void setTheme(String themeString){
+        scene.getStylesheets().remove(0);
+        scene.getStylesheets().add(themeString);
+    }
 }

src/main/java/logiledus/Settings/SettingsController.java

@@ -16,16 +16,26 @@ public class SettingsController implements Initializable {
     private Button cancelBtn, okBtn;
 
     @FXML
-    private CheckBox trayCB;
+    private CheckBox trayCB, drkThemeCB;
 
     @Override
     public void initialize(URL url, ResourceBundle resourceBundle) {
         trayCB.setSelected(Mediator.getInstance().getPreferences().getUseTray());
+        if (Mediator.getInstance().getPreferences().getTheme().equals("/dark.css"))
+            drkThemeCB.setSelected(true);
 
         cancelBtn.setOnAction(actionEvent -> ((Stage) cancelBtn.getScene().getWindow()).close());
 
         okBtn.setOnAction(actionEvent -> {
             Mediator.getInstance().getPreferences().setUseTray(trayCB.isSelected());
+            if (drkThemeCB.isSelected()) {
+                Mediator.getInstance().getPreferences().setTheme("/dark.css");
+                Mediator.getInstance().setTheme("/dark.css");
+            }
+            else {
+                Mediator.getInstance().getPreferences().setTheme("/light.css");
+                Mediator.getInstance().setTheme("/light.css");
+            }
             ((Stage) cancelBtn.getScene().getWindow()).close();
         });
 

src/main/java/logiledus/Settings/SettingsWindow.java

@@ -5,6 +5,7 @@ import javafx.scene.Parent;
 import javafx.scene.Scene;
 import javafx.scene.image.Image;
 import javafx.stage.Stage;
+import logiledus.Mediator;
 
 import java.io.IOException;
 import java.util.Locale;
@@ -35,7 +36,9 @@ public class SettingsWindow {
                     new Image(getClass().getResourceAsStream("/ico/appIcon_64.png")),
                     new Image(getClass().getResourceAsStream("/ico/appIcon_128.png"))
             );
-            stageAbout.setScene(new Scene(parentAbout, 500, 500));
+            Scene scene = new Scene(parentAbout, 500, 500);
+            scene.getStylesheets().add(Mediator.getInstance().getPreferences().getTheme());
+            stageAbout.setScene(scene);
 
             stageAbout.show();
 

src/main/resources/EffectsPane.fxml

@@ -1,16 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
 <?import javafx.geometry.Insets?>
-<?import javafx.scene.control.ColorPicker?>
-<?import javafx.scene.control.Label?>
-<?import javafx.scene.control.MenuButton?>
-<?import javafx.scene.control.RadioMenuItem?>
-<?import javafx.scene.control.Separator?>
-<?import javafx.scene.control.Slider?>
-<?import javafx.scene.control.ToggleGroup?>
+<?import javafx.scene.control.*?>
 <?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.VBox?>
-
 <VBox spacing="5.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1" fx:controller="logiledus.Controllers.EffectsController">
       <padding>
          <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />

src/main/resources/Main.fxml

@@ -9,6 +9,7 @@
 <?import javafx.scene.control.ToolBar?>
 <?import javafx.scene.control.Tooltip?>
 <?import javafx.scene.layout.BorderPane?>
+<?import javafx.scene.layout.HBox?>
 <?import javafx.scene.layout.Pane?>
 <?import javafx.scene.layout.VBox?>
 <?import javafx.scene.shape.SVGPath?>
@@ -33,7 +34,7 @@
                <children>
             <TabPane fx:id="MainTabPane" side="LEFT" tabClosingPolicy="UNAVAILABLE" VBox.vgrow="ALWAYS">
               <tabs>
-                <Tab fx:id="KeyLedTab">
+                <Tab fx:id="KeyLedTab" closable="false">
                      <content>
                              <fx:include fx:id="KeysLeds" source="KeysLedsPane.fxml" VBox.vgrow="ALWAYS" />
                      </content>
@@ -41,7 +42,7 @@
                         <SVGPath content="M12,6A6,6 0 0,1 18,12C18,14.22 16.79,16.16 15,17.2V19A1,1 0 0,1 14,20H10A1,1 0 0,1 9,19V17.2C7.21,16.16 6,14.22 6,12A6,6 0 0,1 12,6M14,21V22A1,1 0 0,1 13,23H11A1,1 0 0,1 10,22V21H14M20,11H23V13H20V11M1,11H4V13H1V11M13,1V4H11V1H13M4.92,3.5L7.05,5.64L5.63,7.05L3.5,4.93L4.92,3.5M16.95,5.63L19.07,3.5L20.5,4.93L18.37,7.05L16.95,5.63Z" />
                      </graphic>
                 </Tab>
-                <Tab fx:id="EffectsTab">
+                <Tab fx:id="EffectsTab" closable="false">
                      <content>
                         <ScrollPane fitToWidth="true">
                             <fx:include fx:id="Effects" source="EffectsPane.fxml" VBox.vgrow="ALWAYS" />
@@ -51,7 +52,7 @@
                         <SVGPath content="M7.5,5.6L5,7L6.4,4.5L5,2L7.5,3.4L10,2L8.6,4.5L10,7L7.5,5.6M19.5,15.4L22,14L20.6,16.5L22,19L19.5,17.6L17,19L18.4,16.5L17,14L19.5,15.4M22,2L20.6,4.5L22,7L19.5,5.6L17,7L18.4,4.5L17,2L19.5,3.4L22,2M13.34,12.78L15.78,10.34L13.66,8.22L11.22,10.66L13.34,12.78M14.37,7.29L16.71,9.63C17.1,10 17.1,10.65 16.71,11.04L5.04,22.71C4.65,23.1 4,23.1 3.63,22.71L1.29,20.37C0.9,20 0.9,19.35 1.29,18.96L12.96,7.29C13.35,6.9 14,6.9 14.37,7.29Z" />
                      </graphic>
                 </Tab>
-                  <Tab fx:id="GameModeTab">
+                  <Tab fx:id="GameModeTab" closable="false">
                      <content>
                         <ScrollPane fitToWidth="true" prefHeight="200.0" prefWidth="200.0">
                           <content>
@@ -71,6 +72,8 @@
    <top>
       <ToolBar styleClass="header" BorderPane.alignment="CENTER">
         <items>
+            <HBox spacing="5.0" styleClass="header-box">
+               <children>
                         <Button fx:id="applyBtn" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="36.0" prefWidth="42.0">
                      <tooltip>
                         <Tooltip text="%btn_apply" />
@@ -78,8 +81,10 @@
                      <graphic>
                         <SVGPath content="M14,10H2V12H14V10M14,6H2V8H14V6M2,16H10V14H2V16M21.5,11.5L23,13L16,20L11.5,15.5L13,14L16,17L21.5,11.5Z" />
                      </graphic>
+                     <HBox.margin>
+                        <Insets right="10.0" />
+                     </HBox.margin>
                   </Button>
-            <Pane prefWidth="10.0" />
                   <Button fx:id="openBtn" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="36.0" prefWidth="42.0">
                      <graphic>
                         <SVGPath content="M19,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4H10L12,6H19A2,2 0 0,1 21,8H21L4,8V18L6.14,10H23.21L20.93,18.5C20.7,19.37 19.92,20 19,20Z" />
@@ -104,7 +109,6 @@
                         <Tooltip text="%btn_save_as" />
                      </tooltip>
                   </Button>
-            <Pane prefWidth="10.0" />
                   <Button fx:id="settingsBtn" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="36.0" prefWidth="42.0">
                      <graphic>
                         <SVGPath content="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
@@ -112,8 +116,10 @@
                      <tooltip>
                         <Tooltip text="%btn_settings" />
                      </tooltip>
+                     <HBox.margin>
+                        <Insets left="10.0" right="10.0" />
+                     </HBox.margin>
                   </Button>
-            <Pane prefWidth="10.0" />
                   <Button fx:id="aboutBtn" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" prefHeight="36.0" prefWidth="42.0">
                      <graphic>
                         <SVGPath content="M13.5,4A1.5,1.5 0 0,0 12,5.5A1.5,1.5 0 0,0 13.5,7A1.5,1.5 0 0,0 15,5.5A1.5,1.5 0 0,0 13.5,4M13.14,8.77C11.95,8.87 8.7,11.46 8.7,11.46C8.5,11.61 8.56,11.6 8.72,11.88C8.88,12.15 8.86,12.17 9.05,12.04C9.25,11.91 9.58,11.7 10.13,11.36C12.25,10 10.47,13.14 9.56,18.43C9.2,21.05 11.56,19.7 12.17,19.3C12.77,18.91 14.38,17.8 14.54,17.69C14.76,17.54 14.6,17.42 14.43,17.17C14.31,17 14.19,17.12 14.19,17.12C13.54,17.55 12.35,18.45 12.19,17.88C12,17.31 13.22,13.4 13.89,10.71C14,10.07 14.3,8.67 13.14,8.77Z" />
@@ -122,6 +128,8 @@
                         <Tooltip text="%menu_item_about" />
                      </tooltip>
                   </Button>
+               </children>
+            </HBox>
         </items>
       </ToolBar>
    </top>

src/main/resources/SettingsLayout.fxml

@@ -17,9 +17,10 @@
       </ButtonBar>
    </bottom>
    <center>
-      <VBox BorderPane.alignment="CENTER">
+      <VBox spacing="5.0" BorderPane.alignment="CENTER">
          <children>
             <CheckBox fx:id="trayCB" mnemonicParsing="false" text="%setting_tray_support" />
+            <CheckBox fx:id="drkThemeCB" mnemonicParsing="false" text="%setting_use_dark_theme" />
          </children>
       </VBox>
    </center>

src/main/resources/dark.css

@@ -0,0 +1,299 @@
+.root{
+    -fx-background: #2b2b2b;
+}
+
+.tool-bar{
+    -fx-background-color: #2b2b2b;
+}
+/* -======================== Buttons =====================- */
+.button SVGPath{
+    -fx-fill: #ebebeb;
+}
+.button, .toggle-button, .menu-button {
+    -fx-background-color: #3c3f41;
+    -fx-background-insets: 0 0 0 0, 0, 1, 2;
+    -fx-background-radius: 2;
+    -fx-border-color: #47ca60;
+    -fx-border-radius: 2;
+    -fx-border-width: 2;
+    -fx-text-fill: #ebebeb;
+    //-fx-effect: dropshadow(three-pass-box, #dadada, 2, 0, 0, 0);
+}
+.menu-button:hover, .button:hover, .choice-box:hover, .menu-button:focused:hover, .button:focused:hover, .choice-box:focused:hover, .toggle-button:hover, .toggle-button:focused:hover{
+    -fx-background-color: #3c3f41;
+    -fx-background-insets: 0 0 0 0, 0, 1, 2;
+    -fx-background-radius: 2;
+    -fx-border-color: #4a81dd;
+    -fx-border-radius: 2;
+    -fx-border-width: 2;
+    -fx-text-fill: #ebebeb;
+    //-fx-effect: dropshadow(three-pass-box, #4a81dd, 2, 0, 0, 0);
+}
+.menu-button:focused, .button:focused, .choice-box:focused, .toggle-button:focused{
+    -fx-background-color: #4b4e51;
+    -fx-background-insets: 0 0 0 0, 0, 1, 2;
+    -fx-background-radius: 2;
+    -fx-border-color: #4c7352;
+    -fx-border-radius: 2;
+    -fx-border-width: 2;
+    -fx-text-fill: #ebebeb;
+    //-fx-effect: dropshadow(three-pass-box, #dadada, 2, 0, 0, 0);
+}
+
+.menu-button:pressed, .button:pressed, .menu-button:pressed:hover, .button:pressed:hover, .toggle-button:pressed, .toggle-button:pressed:hover{
+    -fx-background-color: #3c3f41;
+    -fx-background-insets: 0 0 0 0, 0, 1, 2;
+    -fx-background-radius: 2;
+    -fx-border-color: #e82382;
+    -fx-border-radius: 2;
+    -fx-border-width: 2;
+    -fx-text-fill: #ebebeb;
+    //-fx-effect: dropshadow(three-pass-box, #e82382, 2, 0, 0, 0);
+}
+/* -======================== Buttons keys =====================- */
+.toggle-button:selected, .toggle-button:selected:hover{
+    -fx-background-color: #214131;
+    -fx-background-insets: 0 0 0 0, 0, 1, 2;
+    -fx-background-radius: 8;
+    -fx-border-color: #ccfed1;
+    -fx-border-radius: 8;
+    -fx-border-width: 1;
+    -fx-text-fill: #ebebeb;
+    //-fx-effect: dropshadow(three-pass-box, #dadada, 2, 0, 0, 0);
+}
+
+.button_keycap, .toggle-button_keycap {
+    -fx-background-color: #3c3f41;
+    -fx-background-radius: 8;
+    -fx-background-insets: 0 0 0 0, 0, 1, 2;
+    -fx-border-color: #cfcfcf;
+    -fx-border-radius: 8;
+    -fx-border-width: 1;
+    -fx-text-fill: #ebebeb;
+    -fx-effect: dropshadow(three-pass-box, #8f8f8f, 1, 0, 0, 0);
+}
+.button_keycap:hover, .button_keycap:focused:hover, .toggle-button_keycap:hover, .toggle-button_keycap:focused:hover{
+    -fx-background-color: #3c3f41;
+    -fx-background-insets: 0 0 0 0, 0, 1, 2;
+    -fx-border-color: #4a81dd;
+    -fx-border-radius: 8;
+    -fx-background-radius: 8;
+    -fx-border-width: 1;
+    -fx-text-fill: #ebebeb;
+    -fx-effect: dropshadow(three-pass-box, #4a81dd, 2, 0, 0, 0);
+}
+.button_keycap:focused, .toggle-button_keycap:focused{
+    -fx-background-color: #dadada;
+    -fx-background-insets: 0 0 0 0, 0, 1, 2;
+    -fx-border-color: #8f8f8f;
+    -fx-border-radius: 8;
+    -fx-background-radius: 8;
+    -fx-border-width: 1;
+    -fx-text-fill: #ebebeb;
+    -fx-effect: dropshadow(three-pass-box, #8f8f8f, 1, 0, 0, 0);
+}
+
+.button_keycap:pressed, .button_keycap:pressed:hover, .toggle-button_keycap:pressed, .toggle-button_keycap:pressed:hover{
+    -fx-background-color: #3c3f41;
+    -fx-background-insets: 0 0 0 0, 0, 1, 2;
+    -fx-border-color: #e82382;
+    -fx-border-radius: 8;
+    -fx-background-radius: 8;
+    -fx-border-width: 1;
+    -fx-text-fill: #ebebeb;
+    -fx-effect: dropshadow(three-pass-box, #e82382, 2, 0, 0, 0);
+}
+
+.toggle-button_keycap:selected, .toggle-button_keycap:selected:hover{
+    -fx-background-color: #214131;
+    -fx-background-insets: 0 0 0 0, 0, 1, 2;
+    -fx-border-color: #ccfed1;
+    -fx-border-radius: 8;
+    -fx-background-radius: 8;
+    -fx-border-width: 1;
+    -fx-text-fill: #ebebeb;
+    -fx-effect: none;
+}
+
+.always_off_button:disabled, .always_off_button:disabled:selected {
+    -fx-opacity: 1.0;
+    -fx-background-color: #412441;
+    -fx-background-insets: 0 0 0 0, 0, 1, 2;
+    -fx-border-color: #f1cbf1;
+    -fx-border-radius: 8;
+    -fx-background-radius: 8;
+    -fx-border-width: 1;
+    -fx-text-fill: #ebebeb;
+    -fx-effect: dropshadow(three-pass-box, #f1cbf1, 1, 0, 0, 0);
+}
+/* -======================== TextArea =====================- */
+.text-area{
+    -fx-background-color: transparent;
+    -fx-control-inner-background: #3c3f41;
+    -fx-border-color: #06b9bb;
+    -fx-border-radius: 3;
+    -fx-border-width: 1;
+    -fx-text-fill: #ebebeb;
+}
+
+.progress-bar {
+    -fx-background-color: transparent;
+    -fx-box-border: transparent;
+}
+.progress-bar > .track {
+    -fx-background-color: transparent;
+    -fx-box-border: transparent;
+}
+.progress-bar > .bar {
+    -fx-background-color: linear-gradient(to right, #00bce4, #ff5f53);
+    -fx-background-radius: 2;
+    -fx-background-insets: 1 1 2 1;
+    -fx-padding: 0.23em;
+}
+
+.dialog-pane {
+    -fx-background-color: #3c3f41;
+}
+.dialog-pane > .button-bar > .container{
+    -fx-background-color: #2b2b2b;
+}
+
+.dialog-pane > .label{
+    -fx-padding: 10 5 10 5;
+}
+
+/* -======================== ToolBar =========================- */
+/*
+.tool-bar{
+    -fx-background-color: transparent;
+}
+*/
+/* -======================== Choice box =========================- */
+.choice-box {
+    -fx-background-color: #3c3f41;
+    -fx-border-color: #3c3f41;
+    -fx-border-radius: 3;
+    -fx-border-width: 2;
+    -fx-mark-color: #eea11e;
+    -fx-effect: dropshadow(three-pass-box, #b4b4b4, 2, 0, 0, 0);
+}
+.choice-box > .label {
+    -fx-text-fill: #ebebeb;
+}
+
+.choice-box:pressed, .choice-box:pressed:hover{
+    -fx-background-color: #3c3f41;
+    -fx-border-color: #eea11e;
+    -fx-border-radius: 3;
+    -fx-border-width: 2;
+    -fx-text-fill: #ebebeb;
+    -fx-effect: dropshadow(three-pass-box, #eea11e, 2, 0, 0, 0);
+}
+
+// Background color of the whole context menu
+.choice-box .context-menu {
+    -fx-background-color: #3c3f41;
+}
+
+// Focused item background color in the list
+.choice-box .context-menu .menu-item:focused {
+    -fx-background-color: #eea11e;
+
+}
+.choice-box .context-menu .menu-item:focused .label {
+    -fx-text-fill: #ebebeb;
+}
+
+/* -======================== TAB PANE =========================- */
+.tab-pane .tab SVGPath{
+    -fx-fill: #ebebeb;
+}
+.tab-pane .tab:selected SVGPath, .tab-pane .tab:selected:hover SVGPath{
+    -fx-fill: #ebebeb;
+}
+.tab-pane .tab:hover SVGPath{
+    -fx-fill: #d0d0d0;
+}
+.tab-pane .tab{
+    -fx-background-color: #3c3f41; /* #2b2b2b; */
+    -fx-focus-color: transparent;
+    -fx-faint-focus-color: transparent;
+    -fx-border-radius: 0 0 0 0;
+    -fx-border-width: 0 0 3 0;
+    -fx-border-color: #2b2b2b;
+}
+
+.tab-pane .tab:selected{
+    -fx-background-color: #3c3f41;/*#2b2b2b; */
+    -fx-focus-color: transparent;
+    -fx-faint-focus-color: transparent;
+    -fx-border-radius: 0 0 0 0;
+    -fx-border-width: 0 0 3 0;
+    -fx-border-color: #40b9bb; /* #289de8; */
+}
+
+.tab-pane > .tab-header-area {
+    -fx-background-insets: 0.0;
+    -fx-padding: 5 5 5 5;
+}
+
+.tab-pane > .tab-header-area > .tab-header-background
+{
+   -fx-background-color: #2b2b2b;
+
+}
+.tab-pane > .tab-header-area > .headers-region > .tab {
+    -fx-padding: 10;
+}
+/* -========================== Context menu =====================- */
+.menu-button .label {
+  -fx-text-fill: #ebebeb;
+}
+
+.menu-button .arrow {
+    -fx-background-color: #ebebeb;
+}
+
+.context-menu {
+  -fx-background-color: #3c3f41;
+  -fx-cursor: hand;
+}
+.context-menu .menu-item .label {
+  -fx-text-fill: #ebebeb;
+}
+.context-menu .menu-item:focused .label {
+  -fx-text-fill: white;
+}
+/* -========================== Text Field =====================- */
+.text-field {
+    -fx-border-color: #289de8;
+    -fx-border-width: 0 0 1 0;
+    -fx-background-color: transparent;
+    -fx-text-fill: #ebebeb;
+}
+.text-field:focused {
+    -fx-border-color: #e82382;
+    -fx-border-width: 0 0 1 0;
+    -fx-background-color: transparent;
+    -fx-text-fill: #e82382;
+}
+/* -========================== footer pane =====================-  */
+.footer{
+    -fx-background-color: #3c3f41;
+    -fx-border-color: #ebebeb;
+    -fx-border-width: 1 0 0 0;
+}
+/* -========================== header pane =====================-  */
+.header {
+   -fx-background-image: url("pttrn_drk.png");
+   -fx-background-position: center;
+   -fx-background-repeat: repeat;
+   -fx-border-color: #b5b5b5;
+   -fx-border-width: 0 0 1 0;
+}
+.header-box {
+    -fx-background-color: #3c3f41;
+    -fx-background-insets: 0 0 0 0, 0, 1, 2;
+    -fx-background-radius: 2;
+    -fx-padding: 3.5;
+}

src/main/resources/light.css

@@ -46,18 +46,18 @@
     -fx-text-fill: #2c2c2c;
     //-fx-effect: dropshadow(three-pass-box, #e82382, 2, 0, 0, 0);
 }
-
+/* -======================== Buttons keys =====================- */
 .toggle-button:selected, .toggle-button:selected:hover{
     -fx-background-color: #e1feeb;
     -fx-background-insets: 0 0 0 0, 0, 1, 2;
-    -fx-background-radius: 2;
+    -fx-background-radius: 8;
     -fx-border-color: #ccfed1;
-    -fx-border-radius: 2;
-    -fx-border-width: 2;
+    -fx-border-radius: 8;
+    -fx-border-width: 1;
     -fx-text-fill: #2c2c2c;
-    //-fx-effect: dropshadow(three-pass-box, #dadada, 2, 0, 0, 0);
+    -fx-effect: dropshadow(three-pass-box, #dadada, 2, 0, 0, 0);
 }
-/* -======================== Buttons keys =====================- */
+
 .button_keycap, .toggle-button_keycap {
     -fx-background-color: #fefefe;
     -fx-background-radius: 8;
@@ -108,7 +108,7 @@
     -fx-background-radius: 8;
     -fx-border-width: 1;
     -fx-text-fill: #2c2c2c;
-    -fx-effect: none;
+    -fx-effect: dropshadow(three-pass-box, #e82382, 2, 0, 0, 0);
 }
 
 .always_off_button:disabled, .always_off_button:disabled:selected {
@@ -128,7 +128,7 @@
     -fx-control-inner-background: #fefefe;
     -fx-border-color: #06b9bb;
     -fx-border-radius: 3;
-    -fx-border-width: 2;
+    -fx-border-width: 1;
     -fx-text-fill: #2c2c2c;
 }
 
@@ -215,16 +215,16 @@
     -fx-focus-color: transparent;
     -fx-faint-focus-color: transparent;
     -fx-border-radius: 0 0 0 0;
-    -fx-border-width: 3 0 0 0;
+    -fx-border-width: 0 0 3 0;
     -fx-border-color: #fefefe;
 }
 
 .tab-pane .tab:selected{
-    -fx-background-color: #ebebeb;
+    -fx-background-color: #fefefe;
     -fx-focus-color: transparent;
     -fx-faint-focus-color: transparent;
     -fx-border-radius: 0 0 0 0;
-    -fx-border-width: 3 0 0 0;
+    -fx-border-width: 0 0 3 0;
     -fx-border-color: #40b9bb; /* #289de8; */
 }
 
@@ -235,7 +235,7 @@
 
 .tab-pane > .tab-header-area > .tab-header-background
 {
-   -fx-background-color: #fefefe;
+   -fx-background-color: #ebebeb;
 
 }
 .tab-pane > .tab-header-area > .headers-region > .tab {
@@ -279,3 +279,10 @@
    -fx-border-color: #b5b5b5;
    -fx-border-width: 0 0 1 0;
 }
+
+.header-box {
+    -fx-background-color: #ebebeb;
+    -fx-background-insets: 0 0 0 0, 0, 1, 2;
+    -fx-background-radius: 2;
+    -fx-padding: 3.5;
+}

src/main/resources/locale.properties

@@ -705,3 +705,4 @@ setting_tray_support=Minimize to tray
 setting_save_and_close=Save and close
 setting_cancel=Cancel
 open=Open
+setting_use_dark_theme=Use dark theme

src/main/resources/locale_rus.properties

@@ -31,3 +31,4 @@ setting_tray_support=\u0421\u0432\u043E\u0440\u0430\u0447\u0438\u0432\u0430\u044
 setting_cancel=\u041E\u0442\u043C\u0435\u043D\u0438\u0442\u044C
 setting_save_and_close=\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C \u0438 \u0437\u0430\u043A\u0440\u044B\u0442\u044C
 open=\u041E\u0442\u043A\u0440\u044B\u0442\u044C
+setting_use_dark_theme=\u0418\u0441\u043F\u043E\u043B\u044C\u0437\u043E\u0432\u0430\u0442\u044C \u0442\u0451\u043C\u043D\u0443\u044E \u0442\u0435\u043C\u0443