Merge pull request #190 from AY2223S1-CS2103T-F11-1/implement-color-t…

…hemes Create Light Theme
AY2223S1-CS2103T-F11-1 · Oct 28, 2022 · c7a23f8 · c7a23f8
2 parents 846bcf2 + 773aa4e
commit c7a23f8
Show file tree

Hide file tree

Showing 6 changed files with 453 additions and 38 deletions.
diff --git a/src/main/java/seedu/address/ui/MainWindow.java b/src/main/java/seedu/address/ui/MainWindow.java
@@ -1,9 +1,13 @@
 package seedu.address.ui;
 
+import static javafx.application.Application.setUserAgentStylesheet;
+
+import java.net.URL;
 import java.util.logging.Logger;
 
 import javafx.event.ActionEvent;
 import javafx.fxml.FXML;
+import javafx.scene.Scene;
 import javafx.scene.control.MenuItem;
 import javafx.scene.control.TextInputControl;
 import javafx.scene.input.KeyCombination;
@@ -54,6 +58,18 @@ public class MainWindow extends UiPart<Stage> {
     @FXML
     private StackPane statusbarPlaceholder;
 
+    @FXML
+    private URL lightTheme;
+
+    @FXML
+    private URL darkTheme;
+
+    @FXML
+    private URL extensions;
+
+    @FXML
+    private Scene mainScene;
+
     /**
      * Creates a {@code MainWindow} with the given {@code Stage} and {@code Logic}.
      */
@@ -182,6 +198,24 @@ private void handleExit() {
         primaryStage.hide();
     }
 
+    @FXML
+    private void handleLightThemeSwitch() {
+        mainScene.getStylesheets().clear();
+        setUserAgentStylesheet(null);
+
+        mainScene.getStylesheets().add("file:" + lightTheme.getPath());
+        mainScene.getStylesheets().add("file:" + extensions.getPath());
+    }
+
+    @FXML
+    private void handleDarkThemeSwitch() {
+        mainScene.getStylesheets().clear();
+        setUserAgentStylesheet(null);
+
+        mainScene.getStylesheets().add("file:" + darkTheme.getPath());
+        mainScene.getStylesheets().add("file:" + extensions.getPath());
+    }
+
     public PersonListPanel getPersonListPanel() {
         return personListPanel;
     }

diff --git a/src/main/resources/view/CommandBox.fxml b/src/main/resources/view/CommandBox.fxml
@@ -4,6 +4,6 @@
 <?import javafx.scene.layout.StackPane?>
 
 <StackPane styleClass="stack-pane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
-  <TextField fx:id="commandTextField" onAction="#handleCommandEntered" promptText="Enter command here..."/>
+  <TextField styleClass="text-field" fx:id="commandTextField" onAction="#handleCommandEntered" promptText="Enter command here..."/>
 </StackPane>
 
diff --git a/src/main/resources/view/DarkTheme.css b/src/main/resources/view/DarkTheme.css
@@ -1,6 +1,6 @@
 .background {
-    -fx-background-color: derive(#1d1d1d, 20%);
-    background-color: #383838; /* Used in the default.html file */
+    -fx-background-color: derive(-fx-dark-background-primary, 20%);
+    background-color: -fx-dark-default; /* Used in the default.html file */
 }
 
 .label {
@@ -27,6 +27,8 @@
 .text-field {
     -fx-font-size: 12pt;
     -fx-font-family: "Segoe UI Semibold";
+    -fx-text-fill: white;
+    -fx-prompt-text-fill: white;
 }
 
 .tab-pane {
@@ -40,9 +42,9 @@
 }
 
 .table-view {
-    -fx-base: #1d1d1d;
-    -fx-control-inner-background: #1d1d1d;
-    -fx-background-color: #1d1d1d;
+    -fx-base: -fx-dark-background-primary;
+    -fx-control-inner-background: -fx-dark-background-primary;
+    -fx-background-color: -fx-dark-background-primary;
     -fx-table-cell-border-color: transparent;
     -fx-table-header-border-color: transparent;
     -fx-padding: 5;
@@ -77,20 +79,20 @@
 }
 
 .split-pane:horizontal .split-pane-divider {
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(-fx-dark-background-primary, 20%);
     -fx-border-color: transparent transparent transparent #4d4d4d;
 }
 
 .split-pane {
     -fx-border-radius: 1;
     -fx-border-width: 1;
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(-fx-dark-background-primary, 20%);
 }
 
 .list-view {
     -fx-background-insets: 0;
     -fx-padding: 10;
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(-fx-dark-background-primary, 20%);
 }
 
 .list-cell {
@@ -115,7 +117,7 @@
 }
 
 .list-cell:filled:selected #cardPane {
-    -fx-border-color: #3e7b91;
+    -fx-border-color: -fx-dark-primary;
     -fx-border-width: 1;
 }
 
@@ -136,17 +138,17 @@
 }
 
 .stack-pane {
-     -fx-background-color: derive(#1d1d1d, 20%);
+     -fx-background-color: derive(-fx-dark-background-primary, 20%);
 }
 
 .pane-with-border {
-     -fx-background-color: derive(#1d1d1d, 20%);
-     -fx-border-color: derive(#1d1d1d, 10%);
+     -fx-background-color: derive(-fx-dark-background-primary, 20%);
+     -fx-border-color: derive(-fx-dark-background-primary, 10%);
      -fx-border-top-width: 1px;
 }
 
 .status-bar {
-    -fx-background-color: derive(#1d1d1d, 30%);
+    -fx-background-color: derive(-fx-dark-background-primary, 30%);
 }
 
 .result-display {
@@ -168,8 +170,8 @@
 }
 
 .status-bar-with-border {
-    -fx-background-color: derive(#1d1d1d, 30%);
-    -fx-border-color: derive(#1d1d1d, 25%);
+    -fx-background-color: derive(-fx-dark-background-primary, 30%);
+    -fx-border-color: derive(-fx-dark-background-primary, 25%);
     -fx-border-width: 1px;
 }
 
@@ -178,25 +180,25 @@
 }
 
 .grid-pane {
-    -fx-background-color: derive(#1d1d1d, 30%);
-    -fx-border-color: derive(#1d1d1d, 30%);
+    -fx-background-color: derive(-fx-dark-background-primary, 30%);
+    -fx-border-color: derive(-fx-dark-background-primary, 30%);
     -fx-border-width: 1px;
 }
 
 .grid-pane .stack-pane {
-    -fx-background-color: derive(#1d1d1d, 30%);
+    -fx-background-color: derive(-fx-dark-background-primary, 30%);
 }
 
 .context-menu {
-    -fx-background-color: derive(#1d1d1d, 50%);
+    -fx-background-color: derive(-fx-dark-background-primary, 50%);
 }
 
 .context-menu .label {
     -fx-text-fill: white;
 }
 
 .menu-bar {
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(-fx-dark-background-primary, 20%);
 }
 
 .menu-bar .label {
@@ -220,7 +222,7 @@
     -fx-border-color: #e2e2e2;
     -fx-border-width: 2;
     -fx-background-radius: 0;
-    -fx-background-color: #1d1d1d;
+    -fx-background-color: -fx-dark-background-primary;
     -fx-font-family: "Segoe UI", Helvetica, Arial, sans-serif;
     -fx-font-size: 11pt;
     -fx-text-fill: #d8d8d8;
@@ -233,7 +235,7 @@
 
 .button:pressed, .button:default:hover:pressed {
   -fx-background-color: white;
-  -fx-text-fill: #1d1d1d;
+  -fx-text-fill: -fx-dark-background-primary;
 }
 
 .button:focused {
@@ -246,7 +248,7 @@
 
 .button:disabled, .button:default:disabled {
     -fx-opacity: 0.4;
-    -fx-background-color: #1d1d1d;
+    -fx-background-color: -fx-dark-background-primary;
     -fx-text-fill: white;
 }
 
@@ -260,11 +262,11 @@
 }
 
 .dialog-pane {
-    -fx-background-color: #1d1d1d;
+    -fx-background-color: -fx-dark-background-primary;
 }
 
 .dialog-pane > *.button-bar > *.container {
-    -fx-background-color: #1d1d1d;
+    -fx-background-color: -fx-dark-background-primary;
 }
 
 .dialog-pane > *.label.content {
@@ -274,7 +276,7 @@
 }
 
 .dialog-pane:header *.header-panel {
-    -fx-background-color: derive(#1d1d1d, 25%);
+    -fx-background-color: derive(-fx-dark-background-primary, 25%);
 }
 
 .dialog-pane:header *.header-panel *.label {
@@ -285,11 +287,11 @@
 }
 
 .scroll-bar {
-    -fx-background-color: derive(#1d1d1d, 20%);
+    -fx-background-color: derive(-fx-dark-background-primary, 20%);
 }
 
 .scroll-bar .thumb {
-    -fx-background-color: derive(#1d1d1d, 50%);
+    -fx-background-color: derive(-fx-dark-background-primary, 50%);
     -fx-background-insets: 3;
 }
 
@@ -321,9 +323,9 @@
 }
 
 #commandTextField {
-    -fx-background-color: transparent #383838 transparent #383838;
+    -fx-background-color: transparent -fx-dark-default transparent -fx-dark-default;
     -fx-background-insets: 0;
-    -fx-border-color: #383838 #383838 #ffffff #383838;
+    -fx-border-color: -fx-dark-default -fx-dark-default #ffffff -fx-dark-default;
     -fx-border-insets: 0;
     -fx-border-width: 1;
     -fx-font-family: "Segoe UI Light";
@@ -336,7 +338,7 @@
 }
 
 #resultDisplay .content {
-    -fx-background-color: transparent, #383838, transparent, #383838;
+    -fx-background-color: transparent, -fx-dark-default, transparent, -fx-dark-default;
     -fx-background-radius: 0;
 }
 
@@ -347,7 +349,7 @@
 
 #tags .label {
     -fx-text-fill: white;
-    -fx-background-color: #3e7b91;
+    -fx-background-color: -fx-dark-primary;
     -fx-padding: 1 3 1 3;
     -fx-border-radius: 2;
     -fx-background-radius: 2;
@@ -356,7 +358,7 @@
 
 #status .label {
     -fx-text-fill: black;
-    -fx-background-color: #3e7b91;
+    -fx-background-color: -fx-dark-primary;
     -fx-padding: 1 3 1 3;
     -fx-border-radius: 2;
     -fx-background-radius: 2;

diff --git a/src/main/resources/view/Extensions.css b/src/main/resources/view/Extensions.css
@@ -1,11 +1,19 @@
+.root {
+    -fx-dark-default: #383838;
+    -fx-dark-background-primary: #1d1d1d;
+    -fx-dark-primary: #3e7b91;
+    -fx-light-default: #e0e0e0;
+    -fx-light-background-primary: #e8e8e8;
+    -fx-light-primary: #d3ccea;
+}
 
 .error {
     -fx-text-fill: #d06651 !important; /* The error class should always override the default text-fill style */
 }
 
 .list-cell:empty {
     /* Empty cells will not have alternating colours */
-    -fx-background: #383838;
+    -fx-background-color: transparent;
 }
 
 .tag-selector {