Dark Mode

gse-app/src/main/java/com/powsybl/gse/app/GseAppBar.java

@@ -14,11 +14,13 @@
 import javafx.geometry.Pos;
 import javafx.scene.Node;
 import javafx.scene.control.Button;
+import javafx.scene.control.Tooltip;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.Pane;
 import javafx.scene.layout.Priority;
 import javafx.scene.layout.Region;
 import javafx.scene.text.Text;
+import org.controlsfx.control.ToggleSwitch;
 
 import java.util.ResourceBundle;
 
@@ -35,6 +37,8 @@ public class GseAppBar extends HBox {
 
     private final Button helpButton;
 
+    private final ToggleSwitch styleSwitch;
+
     private UserSessionPane userSessionPane;
 
     public GseAppBar(GseContext context, BrandingConfig brandingConfig) {
@@ -49,6 +53,10 @@ public GseAppBar(GseContext context, BrandingConfig brandingConfig) {
         createButton.getStyleClass().add("gse-app-bar-text");
         openButton = createButton(RESOURCE_BUNDLE.getString("Open"), null);
         openButton.getStyleClass().add("gse-app-bar-text");
+        styleSwitch = new ToggleSwitch();
+        Tooltip tooltipStyleSwitch = new Tooltip(RESOURCE_BUNDLE.getString("StyleModeDark"));
+        styleSwitch.setTooltip(tooltipStyleSwitch);
+        styleSwitch.getStyleClass().add("gse-app-bar-text");
 
         Text questionGlyph = Glyph.createAwesomeFont('\uf059');
         questionGlyph.getStyleClass().add("gse-app-bar-icon");
@@ -58,7 +66,7 @@ public GseAppBar(GseContext context, BrandingConfig brandingConfig) {
         Pane gluePanel = new Pane();
         setHgrow(gluePanel, Priority.ALWAYS);
 
-        getChildren().addAll(logo, createButton, openButton, gluePanel);
+        getChildren().addAll(logo, createButton, openButton, gluePanel, styleSwitch);
         GseAuthenticator.find().ifPresent(authenticator -> {
             userSessionPane = new UserSessionPane(context, authenticator);
             getChildren().add(userSessionPane);
@@ -80,6 +88,10 @@ public Button getOpenButton() {
         return openButton;
     }
 
+    public ToggleSwitch getToggleSwitch() {
+        return styleSwitch;
+    }
+
     public Button getHelpButton() {
         return helpButton;
     }

gse-app/src/main/java/com/powsybl/gse/app/GsePane.java

@@ -332,12 +332,19 @@ private GseAppBar createAppBar() {
             contextMenu.getItems().add(documentationMenuItem);
         });
 
-        MenuItem aboutMenuItem = new MenuItem(RESOURCE_BUNDLE.getString("About") + "...");
+        MenuItem aboutMenuItem = new MenuItem(RESOURCE_BUNDLE.getString("About"));
         aboutMenuItem.setOnAction(event -> showAbout());
         MenuItem shortcutMenuItem = new MenuItem(RESOURCE_BUNDLE.getString("Shortcuts") + "...");
         shortcutMenuItem.setOnAction(event -> showShortcuts());
         contextMenu.getItems().addAll(aboutMenuItem, shortcutMenuItem);
 
+        appBar.getToggleSwitch().selectedProperty().addListener((observable, oldValue, newValue) -> {
+            if (newValue) {
+                this.getScene().getStylesheets().add("/css/gse-dark-theme.css");
+            } else {
+                this.getScene().getStylesheets().remove("/css/gse-dark-theme.css");
+            }
+        });
         appBar.getHelpButton().setOnAction(event -> contextMenu.show(appBar.getHelpButton(), Side.BOTTOM, 0, 0));
 
         return appBar;

gse-app/src/main/resources/css/gse-dark-theme.css

@@ -0,0 +1,70 @@
+.root {
+    -fx-accent: #1e74c6;
+    -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 ;
+    -gse-app-bar-background-color: #3C3C3C;
+}
+
+.label{
+    -fx-text-fill: white;
+}
+
+.text-field {
+    -fx-prompt-text-fill: white;
+}
+
+.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-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;
+}

gse-app/src/main/resources/lang/GseAppBar.properties

@@ -1,3 +1,4 @@
 Create=Create
 Open=Open
 SignOut=Sign out
+StyleModeDark=Dark Mode

gse-app/src/main/resources/lang/GseAppBar_fr.properties

@@ -1,3 +1,4 @@
-Create=Cr�er
+Create=Cr\u00E9er
 Open=Ouvrir
-SignOut=D�connexion
+SignOut=D\u00E9connexion
+StyleModeDark=Mode Sombre