redesign. add: themes and text size

app/src/main/java/org/toop/app/App.java

@@ -2,7 +2,7 @@ package org.toop.app;
 
 import org.toop.app.layer.Layer;
 import org.toop.app.layer.layers.MainLayer;
-import org.toop.app.layer.layers.QuitLayer;
+import org.toop.app.layer.layers.QuitPopup;
 import org.toop.framework.asset.ResourceManager;
 import org.toop.framework.asset.resources.CssAsset;
 import org.toop.framework.audio.events.AudioEvents;
@@ -19,7 +19,9 @@ import java.util.Stack;
 
 public final class App extends Application {
 	private static Stage stage;
+	private static Scene scene;
 	private static StackPane root;
+
 	private static Stack<Layer> stack;
     private static int height;
     private static int width;
@@ -32,17 +34,8 @@ public final class App extends Application {
 
 	@Override
 	public void start(Stage stage) throws Exception {
-
-        App.stage = stage;
         final StackPane root = new StackPane();
-        App.root = root;
-        App.stack = new Stack<>();
-
-        AppSettings settings = new AppSettings();
-        settings.applySettings();
-
 		final Scene scene = new Scene(root);
-		scene.getStylesheets().add(ResourceManager.<CssAsset>get("app.css").getUrl());
 
 		stage.setTitle(AppContext.getString("appTitle"));
 		stage.setWidth(1080);
@@ -62,7 +55,9 @@ public final class App extends Application {
 		stage.show();
 
 		App.stage = stage;
+		App.scene = scene;
 		App.root = root;
+
 		App.stack = new Stack<>();
 
 		App.width = (int) stage.getWidth();
@@ -70,6 +65,9 @@ public final class App extends Application {
 
 		App.isQuitting = false;
 
+		final AppSettings settings = new AppSettings();
+		settings.applySettings();
+
 		new EventFlow().addPostEvent(new AudioEvents.StartBackgroundMusic()).asyncPostEvent();
 		activate(new MainLayer());
 	}
@@ -102,7 +100,7 @@ public final class App extends Application {
 	}
 
 	public static void quitPopup() {
-		push(new QuitLayer());
+		push(new QuitPopup());
 		isQuitting = true;
 	}
 
@@ -127,6 +125,19 @@ public final class App extends Application {
 		reloadAll();
 	}
 
+	public static void setStyle(String theme, String layoutSize) {
+		final int stylesCount = scene.getStylesheets().size();
+
+		for (int i = 0; i < stylesCount; i++) {
+			scene.getStylesheets().removeLast();
+		}
+
+		scene.getStylesheets().add(ResourceManager.<CssAsset>get(theme + ".css").getUrl());
+		scene.getStylesheets().add(ResourceManager.<CssAsset>get(layoutSize + ".css").getUrl());
+
+		reloadAll();
+	}
+
 	public static int getWidth() {
 		return width;
 	}

app/src/main/java/org/toop/app/layer/Container.java

@@ -1,163 +1,11 @@
 package org.toop.app.layer;
 
-import org.toop.framework.audio.events.AudioEvents;
-import org.toop.framework.eventbus.EventFlow;
-
-import javafx.beans.property.BooleanProperty;
-import javafx.beans.property.SimpleBooleanProperty;
-import javafx.geometry.Orientation;
 import javafx.scene.Node;
-import javafx.scene.control.*;
 import javafx.scene.layout.Region;
-import javafx.scene.text.Text;
-import javafx.scene.text.TextFlow;
-
-import java.util.function.Consumer;
 
 public abstract class Container {
 	public abstract Region getContainer();
 
-	public abstract void addNode(Node node);
-
+	public abstract void addNodes(Node... nodes);
 	public abstract void addContainer(Container container, boolean fill);
-
-	public Text addText(String cssClass, String x, boolean wrap) {
-		final Text element = new Text(x);
-		element.getStyleClass().add(cssClass);
-
-		if (wrap) {
-			addNode(new TextFlow(element));
-		} else {
-			addNode(element);
-		}
-
-		return element;
-	}
-
-	public Text addText(String x, boolean wrap) {
-		return addText("text", x, wrap);
-	}
-
-	public Label addButton(String cssClass, String x, Runnable runnable) {
-		final Label element = new Label(x);
-		element.getStyleClass().add(cssClass);
-
-		element.setOnMouseClicked(_ -> {
-			new EventFlow().addPostEvent(new AudioEvents.ClickButton()).asyncPostEvent();
-			runnable.run();
-		});
-
-		addNode(element);
-		return element;
-	}
-
-	public Label addButton(String x, Runnable runnable) {
-		return addButton("button", x, runnable);
-	}
-
-	public Label addToggle(String cssClass, String x1, String x2, boolean toggled, Consumer<Boolean> consumer) {
-		final Label element = new Label(toggled ? x2 : x1);
-		element.getStyleClass().add(cssClass);
-
-		final BooleanProperty checked = new SimpleBooleanProperty(toggled);
-
-		element.setOnMouseClicked(_ -> {
-			new EventFlow().addPostEvent(new AudioEvents.ClickButton()).asyncPostEvent();
-			checked.set(!checked.get());
-
-			if (checked.get()) {
-				element.setText(x1);
-			} else {
-				element.setText(x2);
-			}
-
-			consumer.accept(checked.get());
-		});
-
-		addNode(element);
-		return element;
-	}
-
-	public Label addToggle(String x1, String x2, boolean toggled, Consumer<Boolean> consumer) {
-		return addToggle("toggle", x1, x2, toggled, consumer);
-	}
-
-	public Slider addSlider(String cssClass, int max, int initial, Consumer<Integer> consumer) {
-		final Slider element = new Slider(0, max, initial);
-		element.getStyleClass().add(cssClass);
-
-		element.setMinorTickCount(0);
-		element.setMajorTickUnit(1);
-		element.setBlockIncrement(1);
-
-		element.setSnapToTicks(true);
-		element.setShowTickLabels(true);
-
-		element.setOnMouseClicked(_ -> {
-			new EventFlow().addPostEvent(new AudioEvents.ClickButton()).asyncPostEvent();
-		});
-
-		element.valueProperty().addListener((_, _, newValue) -> {
-			consumer.accept(newValue.intValue());
-		});
-
-		addNode(element);
-		return element;
-	}
-
-	public Slider addSlider(int max, int initial, Consumer<Integer> consumer) {
-		return addSlider("slider", max, initial, consumer);
-	}
-
-	public TextField addInput(String cssClass, String input, Consumer<String> consumer) {
-		final TextField element = new TextField(input);
-		element.getStyleClass().add(cssClass);
-
-		element.setOnMouseClicked(_ -> {
-			new EventFlow().addPostEvent(new AudioEvents.ClickButton()).asyncPostEvent();
-		});
-
-		element.textProperty().addListener((_, _, newValue) -> {
-			consumer.accept(newValue);
-		});
-
-		addNode(element);
-		return element;
-	}
-
-	public TextField addInput(String input, Consumer<String> consumer) {
-		return addInput("input", input, consumer);
-	}
-
-	public <T> ChoiceBox<T> addChoiceBox(String cssClass, Consumer<T> consumer) {
-		final ChoiceBox<T> element = new ChoiceBox<>();
-		element.getStyleClass().add(cssClass);
-
-		element.setOnMouseClicked(_ -> {
-			new EventFlow().addPostEvent(new AudioEvents.ClickButton()).asyncPostEvent();
-		});
-
-		element.valueProperty().addListener((_, _, newValue) -> {
-			consumer.accept(newValue);
-		});
-
-		addNode(element);
-		return element;
-	}
-
-	public <T> ChoiceBox<T> addChoiceBox(Consumer<T> consumer) {
-		return addChoiceBox("choicebox", consumer);
-	}
-
-	public Separator addSeparator(String cssClass, boolean horizontal) {
-		final Separator element = new Separator(horizontal ? Orientation.HORIZONTAL : Orientation.VERTICAL);
-		element.getStyleClass().add(cssClass);
-
-		addNode(element);
-		return element;
-	}
-
-	public Separator addSeparator(boolean horizontal) {
-		return addSeparator("separator", horizontal);
-	}
 }

app/src/main/java/org/toop/app/layer/Layer.java

@@ -2,8 +2,6 @@ package org.toop.app.layer;
 
 import org.toop.app.App;
 import org.toop.app.canvas.GameCanvas;
-import org.toop.framework.asset.ResourceManager;
-import org.toop.framework.asset.resources.CssAsset;
 
 import javafx.geometry.Pos;
 import javafx.scene.layout.Region;
@@ -13,12 +11,11 @@ public abstract class Layer {
 	protected StackPane layer;
 	protected Region background;
 
-	protected Layer(String cssFile) {
+	protected Layer(String... backgroundStyles) {
 		layer = new StackPane();
-		layer.getStylesheets().add(ResourceManager.<CssAsset>get(cssFile).getUrl());
 
 		background = new Region();
-		background.getStyleClass().add("background");
+		background.getStyleClass().addAll(backgroundStyles);
 		background.setPrefSize(Double.MAX_VALUE, Double.MAX_VALUE);
 
 		layer.getChildren().addLast(background);

app/src/main/java/org/toop/app/layer/NodeBuilder.java

@@ -0,0 +1,131 @@
+package org.toop.app.layer;
+
+import org.toop.framework.audio.events.AudioEvents;
+import org.toop.framework.eventbus.EventFlow;
+
+import javafx.beans.property.BooleanProperty;
+import javafx.beans.property.SimpleBooleanProperty;
+import javafx.geometry.Orientation;
+import javafx.scene.Node;
+import javafx.scene.control.*;
+import javafx.scene.text.Text;
+
+import java.util.function.Consumer;
+
+public final class NodeBuilder {
+	public static void addCss(Node node, String... cssClasses) {
+		node.getStyleClass().addAll(cssClasses);
+	}
+
+	public static void setCss(Node node, String... cssClasses) {
+		node.getStyleClass().removeAll();
+		node.getStyleClass().addAll(cssClasses);
+	}
+
+	public static Text header(String x) {
+		final Text element = new Text(x);
+		setCss(element, "text-primary", "text-header");
+
+		return element;
+	}
+
+	public static Text text(String x) {
+		final Text element = new Text(x);
+		setCss(element, "text-secondary", "text-normal");
+
+		return element;
+	}
+
+	public static Label button(String x, Runnable runnable) {
+		final Label element = new Label(x);
+		setCss(element, "button", "text-normal");
+
+		element.setOnMouseClicked(_ -> {
+			new EventFlow().addPostEvent(new AudioEvents.ClickButton()).asyncPostEvent();
+			runnable.run();
+		});
+
+		return element;
+	}
+
+	public static Label toggle(String x1, String x2, boolean toggled, Consumer<Boolean> consumer) {
+		final Label element = new Label(toggled ? x2 : x1);
+		setCss(element, "toggle", "text-normal");
+
+		final BooleanProperty checked = new SimpleBooleanProperty(toggled);
+
+		element.setOnMouseClicked(_ -> {
+			new EventFlow().addPostEvent(new AudioEvents.ClickButton()).asyncPostEvent();
+			checked.set(!checked.get());
+
+			if (checked.get()) {
+				element.setText(x1);
+			} else {
+				element.setText(x2);
+			}
+
+			consumer.accept(checked.get());
+		});
+
+		return element;
+	}
+
+	public static Slider slider(int max, int initial, Consumer<Integer> consumer) {
+		final Slider element = new Slider(0, max, initial);
+		setCss(element, "bg-slider-track");
+
+		element.setMinorTickCount(0);
+		element.setMajorTickUnit(1);
+		element.setBlockIncrement(1);
+
+		element.setSnapToTicks(true);
+		element.setShowTickLabels(true);
+
+		element.setOnMouseClicked(_ -> {
+			new EventFlow().addPostEvent(new AudioEvents.ClickButton()).asyncPostEvent();
+		});
+
+		element.valueProperty().addListener((_, _, newValue) -> {
+			consumer.accept(newValue.intValue());
+		});
+
+		return element;
+	}
+
+	public static TextField input(String x, Consumer<String> consumer) {
+		final TextField element = new TextField(x);
+		setCss(element, "input", "text-normal");
+
+		element.setOnMouseClicked(_ -> {
+			new EventFlow().addPostEvent(new AudioEvents.ClickButton()).asyncPostEvent();
+		});
+
+		element.textProperty().addListener((_, _, newValue) -> {
+			consumer.accept(newValue);
+		});
+
+		return element;
+	}
+
+	public static <T> ChoiceBox<T> choiceBox(Consumer<T> consumer) {
+		final ChoiceBox<T> element = new ChoiceBox<>();
+		setCss(element, "choice-box", "text-normal");
+
+		element.setOnMouseClicked(_ -> {
+			new EventFlow().addPostEvent(new AudioEvents.ClickButton()).asyncPostEvent();
+		});
+
+		element.valueProperty().addListener((_, _, newValue) -> {
+			consumer.accept(newValue);
+		});
+
+		return element;
+	}
+
+	public static Separator separator() {
+		final Separator element = new Separator(Orientation.HORIZONTAL);
+		setCss(element, "separator");
+
+		return element;
+	}
+}

app/src/main/java/org/toop/app/layer/Popup.java

@@ -0,0 +1,19 @@
+package org.toop.app.layer;
+
+import org.toop.app.App;
+
+public abstract class Popup extends Layer {
+	protected Popup(boolean popOnBackground, String... backgroundStyles) {
+		super(backgroundStyles);
+
+		if (popOnBackground) {
+			background.setOnMouseClicked(_ -> {
+				App.pop();
+			});
+		}
+	}
+
+	protected Popup(boolean popOnBackground) {
+		this(popOnBackground, "bg-popup");
+	}
+}

app/src/main/java/org/toop/app/layer/containers/HorizontalContainer.java

@@ -11,13 +11,13 @@ import javafx.scene.layout.Region;
 public final class HorizontalContainer extends Container {
 	private final HBox container;
 
-	public HorizontalContainer(String cssClass, int spacing) {
+	public HorizontalContainer(int spacing, String... cssClasses) {
 		container = new HBox(spacing);
-		container.getStyleClass().add(cssClass);
+		container.getStyleClass().addAll(cssClasses);
 	}
 
 	public HorizontalContainer(int spacing) {
-		this("horizontal_container", spacing);
+		this(spacing, "container");
 	}
 
 	@Override
@@ -26,8 +26,8 @@ public final class HorizontalContainer extends Container {
 	}
 
 	@Override
-	public void addNode(Node node) {
-		container.getChildren().addLast(node);
+	public void addNodes(Node... nodes) {
+		container.getChildren().addAll(nodes);
 	}
 
 	@Override

app/src/main/java/org/toop/app/layer/containers/VerticalContainer.java

@@ -11,13 +11,13 @@ import javafx.scene.layout.VBox;
 public final class VerticalContainer extends Container {
 	private final VBox container;
 
-	public VerticalContainer(String cssClass, int spacing) {
+	public VerticalContainer(int spacing, String... cssClasses) {
 		container = new VBox(spacing);
-		container.getStyleClass().add(cssClass);
+		container.getStyleClass().addAll(cssClasses);
 	}
 
 	public VerticalContainer(int spacing) {
-		this("vertical_container", spacing);
+		this(spacing, "container");
 	}
 
 	@Override
@@ -26,8 +26,8 @@ public final class VerticalContainer extends Container {
 	}
 
 	@Override
-	public void addNode(Node node) {
-		container.getChildren().addLast(node);
+	public void addNodes(Node... nodes) {
+		container.getChildren().addAll(nodes);
 	}
 
 	@Override

app/src/main/java/org/toop/app/layer/layers/CreditsPopup.java

@@ -2,7 +2,8 @@ package org.toop.app.layer.layers;
 
 import org.toop.app.App;
 import org.toop.app.layer.Container;
-import org.toop.app.layer.Layer;
+import org.toop.app.layer.NodeBuilder;
+import org.toop.app.layer.Popup;
 import org.toop.app.layer.containers.HorizontalContainer;
 import org.toop.app.layer.containers.VerticalContainer;
 import org.toop.local.AppContext;
@@ -10,13 +11,14 @@ import org.toop.local.AppContext;
 import javafx.animation.PauseTransition;
 import javafx.animation.TranslateTransition;
 import javafx.geometry.Pos;
+import javafx.scene.text.Text;
 import javafx.util.Duration;
 
-public final class CreditsLayer extends Layer {
+public final class CreditsPopup extends Popup {
 	private final int lineHeight = 100;
 
-	CreditsLayer() {
-		super("credits.css");
+	public CreditsPopup() {
+		super(true, "bg-primary");
 		reload();
 	}
 
@@ -35,22 +37,19 @@ public final class CreditsLayer extends Layer {
 				AppContext.getString("opengl") + ": Omar"
 		};
 
-		final Container creditsContainer = new HorizontalContainer(0);
+		final Text[] creditsHeaders = new Text[credits.length];
 
-		final Container animatedContainer = new VerticalContainer("animated_credits_container", lineHeight);
-		creditsContainer.addContainer(animatedContainer, true);
-
-		for (final String credit : credits) {
-			animatedContainer.addText("credit-text", credit, false);
+		for (int i = 0; i < credits.length; i++) {
+			creditsHeaders[i] = NodeBuilder.header(credits[i]);
 		}
 
-		final Container controlContainer = new VerticalContainer(5);
-		controlContainer.addButton(AppContext.getString("back"), () -> {
-			App.activate(new MainLayer());
-		});
+		final Container creditsContainer = new HorizontalContainer(0);
 
+		final Container animatedContainer = new VerticalContainer(lineHeight);
+		creditsContainer.addContainer(animatedContainer, true);
+
+		animatedContainer.addNodes(creditsHeaders);
 		addContainer(creditsContainer, Pos.CENTER, 0, 0, 50, 100);
-		addContainer(controlContainer, Pos.BOTTOM_LEFT, 2, -2, 0, 0);
 
 		playCredits(animatedContainer, App.getHeight());
 	}

app/src/main/java/org/toop/app/layer/layers/MainLayer.java

@@ -3,16 +3,15 @@ package org.toop.app.layer.layers;
 import org.toop.app.App;
 import org.toop.app.layer.Container;
 import org.toop.app.layer.Layer;
+import org.toop.app.layer.NodeBuilder;
 import org.toop.app.layer.containers.VerticalContainer;
-import org.toop.game.othello.Othello;
-import org.toop.game.tictactoe.TicTacToe;
 import org.toop.local.AppContext;
 
 import javafx.geometry.Pos;
 
 public final class MainLayer extends Layer {
 	public MainLayer() {
-		super("main.css");
+		super("bg-primary");
 		reload();
 	}
 
@@ -20,30 +19,32 @@ public final class MainLayer extends Layer {
 	public void reload() {
 		popAll();
 
-		final Container gamesContainer = new VerticalContainer(5);
-
-		gamesContainer.addButton(AppContext.getString("tictactoe"), () -> {
+		final var tictactoeButton = NodeBuilder.button(AppContext.getString("tictactoe"), () -> {
 			App.activate(new MultiplayerLayer());
 		});
 
-		gamesContainer.addButton(AppContext.getString("othello"), () -> {
+		final var othelloButton = NodeBuilder.button(AppContext.getString("othello"), () -> {
 			App.activate(new MultiplayerLayer());
 		});
 
-		final Container controlContainer = new VerticalContainer(5);
-
-		controlContainer.addButton(AppContext.getString("credits"), () -> {
-			App.activate(new CreditsLayer());
+		final var creditsButton = NodeBuilder.button(AppContext.getString("credits"), () -> {
+			App.push(new CreditsPopup());
 		});
 
-		controlContainer.addButton(AppContext.getString("options"), () -> {
-			App.activate(new OptionsLayer());
+		final var optionsButton = NodeBuilder.button(AppContext.getString("options"), () -> {
+			App.push(new OptionsPopup());
 		});
 
-		controlContainer.addButton(AppContext.getString("quit"), () -> {
+		final var quitButton = NodeBuilder.button(AppContext.getString("quit"), () -> {
 			App.quitPopup();
 		});
 
+		final Container gamesContainer = new VerticalContainer(5);
+		gamesContainer.addNodes(tictactoeButton, othelloButton);
+
+		final Container controlContainer = new VerticalContainer(5);
+		controlContainer.addNodes(creditsButton, optionsButton, quitButton);
+
 		addContainer(gamesContainer, Pos.TOP_LEFT, 2, 2, 20, 0);
 		addContainer(controlContainer, Pos.BOTTOM_LEFT, 2, -2, 20, 0);
 	}

app/src/main/java/org/toop/app/layer/layers/MultiplayerLayer.java

@@ -1,18 +1,18 @@
 package org.toop.app.layer.layers;
 
+import javafx.geometry.Pos;
+import javafx.scene.Node;
 import org.toop.app.App;
 import org.toop.app.GameInformation;
 import org.toop.app.layer.Container;
 import org.toop.app.layer.Layer;
+import org.toop.app.layer.NodeBuilder;
 import org.toop.app.layer.containers.HorizontalContainer;
 import org.toop.app.layer.containers.VerticalContainer;
 import org.toop.app.layer.layers.game.TicTacToeLayer;
 import org.toop.local.AppContext;
 
-import javafx.geometry.Pos;
-
 import java.time.LocalDateTime;
-import java.time.format.DateTimeFormatter;
 
 public final class MultiplayerLayer extends Layer {
 	private boolean isConnectionLocal = true;
@@ -29,7 +29,7 @@ public final class MultiplayerLayer extends Layer {
 	private String serverPort = "";
 
 	public MultiplayerLayer() {
-		super("multiplayer.css");
+		super("bg-primary");
 		reload();
 	}
 
@@ -37,89 +37,127 @@ public final class MultiplayerLayer extends Layer {
 	public void reload() {
 		popAll();
 
-		final Container mainContainer = new VerticalContainer(5);
+		final Container player1Container = new VerticalContainer(20);
+		final Container player2Container = new VerticalContainer(20);
 
-		mainContainer.addToggle(AppContext.getString("local"), AppContext.getString("server"), !isConnectionLocal, (server) -> {
-			isConnectionLocal = !server;
-			reload();
-		});
-
-		final Container playersContainer = new HorizontalContainer(50);
-
-		mainContainer.addContainer(playersContainer, true);
-
-		final Container player1Container = new VerticalContainer("player_container", 5);
-
-		playersContainer.addContainer(player1Container, true);
-
-		playersContainer.addText("VS", false);
-
-		final Container player2Container = new VerticalContainer("player_container", 5);
-
-		playersContainer.addContainer(player2Container, true);
-
-		mainContainer.addButton(isConnectionLocal? AppContext.getString("start") : AppContext.getString("connect"), () -> {
-			App.activate(new TicTacToeLayer(new GameInformation(
-					new String[] { player1Name, player2Name },
-					new boolean[] { isPlayer1Human, isPlayer2Human },
-					new int[] { computer1Difficulty, computer2Difficulty },
-					isConnectionLocal, "127.0.0.1", "7789")));
-                    // serverIP, serverPort)));
-		});
-
-		player1Container.addToggle(AppContext.getString("human"), AppContext.getString("computer"), !isPlayer1Human, (computer) -> {
+		final var isPlayer1HumanToggle = NodeBuilder.toggle(AppContext.getString("human"), AppContext.getString("computer"), !isPlayer1Human, (computer) -> {
 			isPlayer1Human = !computer;
 			reload();
 		});
 
+		player1Container.addNodes(isPlayer1HumanToggle);
+
 		if (isPlayer1Human) {
-			player1Container.addText(AppContext.getString("playerName"), true);
-			player1Container.addInput(player1Name, (name) -> {
+			final var playerNameText = NodeBuilder.text(AppContext.getString("playerName"));
+			final var playerNameInput = NodeBuilder.input(player1Name, (name) -> {
 				player1Name = name;
 			});
+
+			player1Container.addNodes(playerNameText, playerNameInput);
 		} else {
-            player1Name = "PismBot" + LocalDateTime.now().getSecond();
-			player1Container.addText(AppContext.getString("computerDifficulty"), true);
-			player1Container.addSlider(10, computer1Difficulty, (difficulty) ->
+			player1Name = "Pism Bot #" + LocalDateTime.now().getSecond();
+
+			final var computerNameText = NodeBuilder.text(player1Name);
+			final var computerNameSeparator = NodeBuilder.separator();
+
+			final var computerDifficultyText = NodeBuilder.text(AppContext.getString("computerDifficulty"));
+			final var computerDifficultySlider = NodeBuilder.slider(10, computer1Difficulty, (difficulty) ->
 					computer1Difficulty = difficulty);
+
+			player1Container.addNodes(computerNameText, computerNameSeparator,
+					computerDifficultyText, computerDifficultySlider);
 		}
 
 		if (isConnectionLocal) {
-			player2Container.addToggle(AppContext.getString("human"), AppContext.getString("computer"), !isPlayer2Human, (computer) -> {
+			final var isPlayer2HumanToggle = NodeBuilder.toggle(AppContext.getString("human"), AppContext.getString("computer"), !isPlayer2Human, (computer) -> {
 				isPlayer2Human = !computer;
 				reload();
 			});
 
+			player2Container.addNodes(isPlayer2HumanToggle);
+
 			if (isPlayer2Human) {
-				player2Container.addText(AppContext.getString("playerName"), true);
-				player2Container.addInput(player2Name, (name) -> {
+				final var playerNameText = NodeBuilder.text(AppContext.getString("playerName"));
+				final var playerNameInput = NodeBuilder.input(player2Name, (name) -> {
 					player2Name = name;
 				});
+
+				player2Container.addNodes(playerNameText, playerNameInput);
 			} else {
-				player2Container.addText(AppContext.getString("computerDifficulty"), true);
-				player2Container.addSlider(10, computer2Difficulty, (difficulty) ->
+				player2Name = "Pism Bot #" + LocalDateTime.now().getSecond();
+
+				final var computerNameText = NodeBuilder.text(player2Name);
+				final var computerNameSeparator = NodeBuilder.separator();
+
+				final var computerDifficultyText = NodeBuilder.text(AppContext.getString("computerDifficulty"));
+				final var computerDifficultySlider = NodeBuilder.slider(10, computer1Difficulty, (difficulty) ->
 						computer2Difficulty = difficulty);
+
+				player2Container.addNodes(computerNameText, computerNameSeparator,
+						computerDifficultyText, computerDifficultySlider);
 			}
 		} else {
-			player2Container.addText(AppContext.getString("serverIP"), true);
-			player2Container.addInput(serverIP, (ip) -> {
+			final var serverIPText = NodeBuilder.text(AppContext.getString("serverIP"));
+			final var serverIPSeparator = NodeBuilder.separator();
+			final var serverIPInput = NodeBuilder.input(serverIP, (ip) -> {
 				serverIP = ip;
 			});
 
-			player2Container.addSeparator(true);
-
-			player2Container.addText(AppContext.getString("serverPort"), true);
-			player2Container.addInput(serverPort, (port) -> {
+			final var serverPortText = NodeBuilder.text(AppContext.getString("serverPort"));
+			final var serverPortInput = NodeBuilder.input(serverPort, (port) -> {
 				serverPort = port;
 			});
+
+			player2Container.addNodes(serverIPText, serverIPInput, serverIPSeparator,
+					serverPortText, serverPortInput);
 		}
 
-		final Container controlContainer = new VerticalContainer(5);
+		final var versusText = NodeBuilder.text("VS");
 
-		controlContainer.addButton(AppContext.getString("back"), () -> {
+		final var connectionTypeText = NodeBuilder.text("Connection type (translate)");
+		final var connectionTypeToggle = NodeBuilder.toggle(AppContext.getString("local"), AppContext.getString("server"), !isConnectionLocal, (server) -> {
+			isConnectionLocal = !server;
+			reload();
+		});
+
+		final var playButton = NodeBuilder.button(isConnectionLocal ? AppContext.getString("start") : AppContext.getString("connect"), () -> {
+			if (isConnectionLocal) {
+				App.activate(new TicTacToeLayer(new GameInformation(
+						new String[]{player1Name, player2Name},
+						new boolean[]{isPlayer1Human, isPlayer2Human},
+						new int[]{computer1Difficulty, computer2Difficulty},
+						isConnectionLocal, serverIP, serverPort)));
+			} else {
+				App.activate(new TicTacToeLayer(new GameInformation(
+						new String[]{player1Name, player2Name},
+						new boolean[]{isPlayer1Human, isPlayer2Human},
+						new int[]{computer1Difficulty, computer2Difficulty},
+						isConnectionLocal, serverIP, serverPort)));
+
+			}
+		});
+
+		final Container mainContainer = new VerticalContainer(10);
+		final Container playersContainer = new HorizontalContainer(5);
+		final Container connectionTypeContainer = new HorizontalContainer(10);
+
+		mainContainer.addContainer(playersContainer, true);
+		mainContainer.addContainer(connectionTypeContainer, false);
+		mainContainer.addNodes(playButton);
+
+		connectionTypeContainer.addNodes(connectionTypeText, connectionTypeToggle);
+
+		playersContainer.addContainer(player1Container, true);
+		playersContainer.addNodes(versusText);
+		playersContainer.addContainer(player2Container, true);
+
+		final var backButton = NodeBuilder.button(AppContext.getString("back"), () -> {
 			App.activate(new MainLayer());
 		});
 
+		final Container controlContainer = new VerticalContainer(0);
+		controlContainer.addNodes(backButton);
+
 		addContainer(mainContainer, Pos.CENTER, 0, 0, 75, 75);
 		addContainer(controlContainer, Pos.BOTTOM_LEFT, 2, -2, 0, 0);
 	}

app/src/main/java/org/toop/app/layer/layers/OptionsLayer.java

@@ -1,105 +0,0 @@
-package org.toop.app.layer.layers;
-
-import org.toop.app.App;
-import org.toop.app.layer.Container;
-import org.toop.app.layer.Layer;
-import org.toop.app.layer.containers.VerticalContainer;
-import org.toop.framework.asset.resources.SettingsAsset;
-import org.toop.framework.audio.events.AudioEvents;
-import org.toop.framework.eventbus.EventFlow;
-import org.toop.local.AppContext;
-
-import javafx.geometry.Pos;
-import javafx.scene.control.ChoiceBox;
-import org.toop.local.AppSettings;
-
-import java.util.Locale;
-
-public final class OptionsLayer extends Layer {
-    AppSettings appSettings = new AppSettings();
-    SettingsAsset settings = appSettings.getPath();
-
-	private int currentVolume = settings.getVolume();
-	private boolean isWindowed = !(settings.getFullscreen());
-
-	OptionsLayer() {
-		super("options.css");
-		reload();
-	}
-
-	@Override
-	public void reload() {
-		popAll();
-
-		final Container optionsContainer = new VerticalContainer(5);
-		optionsContainer.addText(AppContext.getString("language"), false);
-		addLanguageBox(optionsContainer);
-		optionsContainer.addSeparator(true);
-
-		optionsContainer.addText(AppContext.getString("volume"), false);
-		addVolumeSlider(optionsContainer);
-		optionsContainer.addSeparator(true);
-
-		addFullscreenToggle(optionsContainer);
-
-		final Container mainContainer = new VerticalContainer(50);
-		mainContainer.addText(AppContext.getString("options"), false);
-		mainContainer.addContainer(optionsContainer, true);
-
-		final Container controlContainer = new VerticalContainer(5);
-		controlContainer.addButton(AppContext.getString("back"), () -> {
-			App.activate(new MainLayer());
-		});
-
-		addContainer(mainContainer, Pos.CENTER, 0, 0, 30, 60);
-		addContainer(controlContainer, Pos.BOTTOM_LEFT, 2, -2, 0, 0);
-	}
-
-	private void addLanguageBox(Container container) {
-		assert AppContext.getLocalization() != null;
-
-		final ChoiceBox<Locale> languageBox = container.addChoiceBox((locale) -> {
-			if (locale == AppContext.getLocale()) {
-				return;
-			}
-
-			AppContext.setLocale(locale);
-			settings.setLocale(locale.toString());
-			App.reloadAll();
-		});
-
-		for (final Locale localeFile : AppContext.getLocalization().getAvailableLocales()) {
-			languageBox.getItems().add(localeFile);
-		}
-
-		languageBox.setConverter(new javafx.util.StringConverter<>() {
-			@Override
-			public String toString(Locale locale) {
-				return AppContext.getString(locale.getDisplayName().toLowerCase());
-			}
-
-			@Override
-			public Locale fromString(String string) {
-				return null;
-			}
-		});
-
-		languageBox.setValue(AppContext.getLocale());
-	}
-
-	private void addVolumeSlider(Container container) {
-		container.addSlider(100, currentVolume, (volume) -> {
-			currentVolume = volume;
-            settings.setVolume(volume);
-            new EventFlow().addPostEvent(new AudioEvents.ChangeVolume(volume.doubleValue())).asyncPostEvent();
-		});
-	}
-
-	private void addFullscreenToggle(Container container) {
-		container.addToggle(AppContext.getString("windowed"), AppContext.getString("fullscreen"), !isWindowed, (fullscreen) -> {
-			isWindowed = !fullscreen;
-			App.setFullscreen(fullscreen);
-            settings.setFullscreen(fullscreen);
-        });
-	}
-}

app/src/main/java/org/toop/app/layer/layers/OptionsPopup.java

@@ -0,0 +1,171 @@
+package org.toop.app.layer.layers;
+
+import org.toop.app.App;
+import org.toop.app.layer.Container;
+import org.toop.app.layer.NodeBuilder;
+import org.toop.app.layer.Popup;
+import org.toop.app.layer.containers.VerticalContainer;
+import org.toop.framework.asset.resources.SettingsAsset;
+import org.toop.framework.audio.events.AudioEvents;
+import org.toop.framework.eventbus.EventFlow;
+import org.toop.local.AppContext;
+import org.toop.local.AppSettings;
+
+import javafx.geometry.Pos;
+import javafx.scene.control.ChoiceBox;
+import javafx.scene.control.Label;
+import javafx.scene.control.Slider;
+
+import java.util.Locale;
+
+public final class OptionsPopup extends Popup {
+    AppSettings appSettings = new AppSettings();
+    SettingsAsset settings = appSettings.getPath();
+	private boolean isWindowed = !(settings.getFullscreen());
+
+	public OptionsPopup() {
+		super(true, "bg-primary");
+		reload();
+	}
+
+	@Override
+	public void reload() {
+		popAll();
+
+		final var languageHeader = NodeBuilder.header(AppContext.getString("language"));
+		final var languageSeparator = NodeBuilder.separator();
+
+		final var volumeHeader = NodeBuilder.header(AppContext.getString("volume"));
+		final var volumeSeparator = NodeBuilder.separator();
+
+		final var themeHeader = NodeBuilder.header(AppContext.getString("theme"));
+		final var themeSeparator = NodeBuilder.separator();
+
+		final var layoutSizeHeader = NodeBuilder.header(AppContext.getString("layoutSize"));
+		final var layoutSizeSeparator = NodeBuilder.separator();
+
+		final var optionsContainer = new VerticalContainer(5);
+		optionsContainer.addNodes(languageHeader, languageChoiceBox(), languageSeparator);
+		optionsContainer.addNodes(volumeHeader, volumeSlider(), volumeSeparator);
+		optionsContainer.addNodes(themeHeader, themeChoiceBox(), themeSeparator);
+		optionsContainer.addNodes(layoutSizeHeader, layoutSizeChoiceBox(), layoutSizeSeparator);
+		optionsContainer.addNodes(fullscreenToggle());
+
+		final Container mainContainer = new VerticalContainer(50, "");
+		mainContainer.addContainer(optionsContainer, true);
+
+		final var backButton = NodeBuilder.button(AppContext.getString("back"), () -> {
+			App.pop();
+		});
+
+		final Container controlContainer = new VerticalContainer(5);
+		controlContainer.addNodes(backButton);
+
+		addContainer(mainContainer, Pos.CENTER, 0, 0, 0, 0);
+		addContainer(controlContainer, Pos.BOTTOM_LEFT, 2, -2, 0, 0);
+	}
+
+	private ChoiceBox<Locale> languageChoiceBox() {
+		assert AppContext.getLocalization() != null;
+
+		final ChoiceBox<Locale> languageChoiceBox = NodeBuilder.choiceBox((locale) -> {
+			if (locale == AppContext.getLocale()) {
+				return;
+			}
+
+			settings.setLocale(locale.toString());
+			AppContext.setLocale(locale);
+
+			App.reloadAll();
+		});
+
+		languageChoiceBox.setConverter(new javafx.util.StringConverter<>() {
+			@Override
+			public String toString(Locale locale) {
+				return AppContext.getString(locale.getDisplayName().toLowerCase());
+			}
+
+			@Override
+			public Locale fromString(String string) {
+				return null;
+			}
+		});
+
+		languageChoiceBox.getItems().addAll(AppContext.getLocalization().getAvailableLocales());
+		languageChoiceBox.setValue(AppContext.getLocale());
+
+		return languageChoiceBox;
+	}
+
+	private Slider volumeSlider() {
+		return NodeBuilder.slider(100, settings.getVolume(), (volume) -> {
+			settings.setVolume(volume);
+			new EventFlow().addPostEvent(new AudioEvents.ChangeVolume(volume.doubleValue())).asyncPostEvent();
+		});
+	}
+
+	private Label fullscreenToggle() {
+		return NodeBuilder.toggle(AppContext.getString("windowed"), AppContext.getString("fullscreen"), !isWindowed, (fullscreen) -> {
+			isWindowed = !fullscreen;
+
+            settings.setFullscreen(fullscreen);
+			App.setFullscreen(fullscreen);
+        });
+	}
+
+	private ChoiceBox<String> themeChoiceBox() {
+		final ChoiceBox<String> themeChoiceBox = NodeBuilder.choiceBox((theme) -> {
+			if (theme.equalsIgnoreCase(settings.getTheme())) {
+				return;
+			}
+
+			settings.setTheme(theme);
+			App.setStyle(theme, settings.getLayoutSize());
+		});
+
+		themeChoiceBox.setConverter(new javafx.util.StringConverter<>() {
+			@Override
+			public String toString(String theme) {
+				return AppContext.getString(theme);
+			}
+
+			@Override
+			public String fromString(String string) {
+				return null;
+			}
+		});
+
+		themeChoiceBox.getItems().addAll("dark", "light", "dark-hc", "light-hc");
+		themeChoiceBox.setValue(settings.getTheme());
+
+		return themeChoiceBox;
+	}
+
+	private ChoiceBox<String> layoutSizeChoiceBox() {
+		final ChoiceBox<String> layoutSizeChoiceBox = NodeBuilder.choiceBox((layoutSize) -> {
+			if (layoutSize.equalsIgnoreCase(settings.getLayoutSize())) {
+				return;
+			}
+
+			settings.setLayoutSize(layoutSize);
+			App.setStyle(settings.getTheme(), layoutSize);
+		});
+
+		layoutSizeChoiceBox.setConverter(new javafx.util.StringConverter<>() {
+			@Override
+			public String toString(String layoutSize) {
+				return AppContext.getString(layoutSize);
+			}
+
+			@Override
+			public String fromString(String string) {
+				return null;
+			}
+		});
+
+		layoutSizeChoiceBox.getItems().addAll("small", "medium", "large");
+		layoutSizeChoiceBox.setValue(settings.getLayoutSize());
+
+		return layoutSizeChoiceBox;
+	}
+}

app/src/main/java/org/toop/app/layer/layers/QuitPopup.java

@@ -2,16 +2,17 @@ package org.toop.app.layer.layers;
 
 import org.toop.app.App;
 import org.toop.app.layer.Container;
-import org.toop.app.layer.Layer;
+import org.toop.app.layer.NodeBuilder;
+import org.toop.app.layer.Popup;
 import org.toop.app.layer.containers.HorizontalContainer;
 import org.toop.app.layer.containers.VerticalContainer;
 import org.toop.local.AppContext;
 
 import javafx.geometry.Pos;
 
-public final class QuitLayer extends Layer {
-	public QuitLayer() {
-		super("quit.css");
+public final class QuitPopup extends Popup {
+	public QuitPopup() {
+		super(true);
 		reload();
 	}
 
@@ -19,21 +20,23 @@ public final class QuitLayer extends Layer {
 	public void reload() {
 		popAll();
 
-		final Container mainContainer = new VerticalContainer(30);
-		mainContainer.addText(AppContext.getString("quitSure"), false);
+		final var sureText = NodeBuilder.header(AppContext.getString("quitSure"));
 
-		final Container controlContainer = new HorizontalContainer(30);
-
-		mainContainer.addContainer(controlContainer, false);
-
-		controlContainer.addButton(AppContext.getString("yes"), () -> {
+		final var yesButton = NodeBuilder.button(AppContext.getString("yes"), () -> {
 			App.quit();
 		});
 
-		controlContainer.addButton(AppContext.getString("no"), () -> {
+		final var noButton = NodeBuilder.button(AppContext.getString("no"), () -> {
 			App.pop();
 		});
 
+		final Container controlContainer = new HorizontalContainer(30);
+		controlContainer.addNodes(yesButton, noButton);
+
+		final Container mainContainer = new VerticalContainer(30);
+		mainContainer.addNodes(sureText);
+		mainContainer.addContainer(controlContainer, false);
+
 		addContainer(mainContainer, Pos.CENTER, 0, 0, 30, 30);
 	}
 }

app/src/main/java/org/toop/app/layer/layers/game/TicTacToeLayer.java

@@ -1,10 +1,13 @@
 package org.toop.app.layer.layers.game;
 
+import javafx.geometry.Pos;
+import javafx.scene.paint.Color;
 import org.toop.app.App;
 import org.toop.app.GameInformation;
 import org.toop.app.canvas.TicTacToeCanvas;
 import org.toop.app.layer.Container;
 import org.toop.app.layer.Layer;
+import org.toop.app.layer.NodeBuilder;
 import org.toop.app.layer.containers.VerticalContainer;
 import org.toop.app.layer.layers.MainLayer;
 import org.toop.framework.eventbus.EventFlow;
@@ -14,13 +17,9 @@ import org.toop.game.tictactoe.TicTacToe;
 import org.toop.game.tictactoe.TicTacToeAI;
 import org.toop.local.AppContext;
 
-import javafx.geometry.Pos;
-import javafx.scene.paint.Color;
-
 import java.util.concurrent.BlockingQueue;
 import java.util.concurrent.LinkedBlockingQueue;
 import java.util.concurrent.atomic.AtomicBoolean;
-import java.util.regex.Pattern;
 
 public final class TicTacToeLayer extends Layer {
 	private TicTacToeCanvas canvas;
@@ -37,9 +36,9 @@ public final class TicTacToeLayer extends Layer {
 	private String player2Name = "";
 
 	public TicTacToeLayer(GameInformation information) {
-		super("game.css");
+		super("bg-primary");
 
-		canvas = new TicTacToeCanvas(Color.WHITE, (App.getHeight() / 100) * 75, (App.getHeight() / 100) * 75, (cell) -> {
+		canvas = new TicTacToeCanvas(Color.LIME, (App.getHeight() / 100) * 75, (App.getHeight() / 100) * 75, (cell) -> {
 			try {
 				if (information.isConnectionLocal()) {
 					if (ticTacToe.getCurrentTurn() == 0) {
@@ -95,11 +94,13 @@ public final class TicTacToeLayer extends Layer {
 			}
 		}
 
-		final Container controlContainer = new VerticalContainer(5);
-		controlContainer.addButton(AppContext.getString("back"), () -> {
+		final var backButton = NodeBuilder.button(AppContext.getString("back"), () -> {
 			App.activate(new MainLayer());
 		});
 
+		final Container controlContainer = new VerticalContainer(5);
+		controlContainer.addNodes(backButton);
+
 		addContainer(controlContainer, Pos.BOTTOM_LEFT, 2, -2, 0, 0);
 		addGameCanvas(canvas, Pos.CENTER, 0, 0);
 	}
@@ -163,8 +164,10 @@ public final class TicTacToeLayer extends Layer {
 		public long receivedMove = -1;
 		public boolean firstPlayerIsMe = true;
 	}
+
 	AtomicBoolean firstPlayerIsMe = new AtomicBoolean(true);
 	AtomicBoolean gameHasStarted = new AtomicBoolean(false);
+
 	private void serverGameThread(NetworkEvents.StartClientResponse event) {
 		boolean running = true;
 		final long clientId = event.clientId();
@@ -190,14 +193,14 @@ public final class TicTacToeLayer extends Layer {
 		while (running) {
 			try {
 				Thread.sleep(250);
-            }catch (InterruptedException exception) {}
+			} catch (InterruptedException exception) {
+			}
 			boolean hasStarted = gameHasStarted.get();
 			if (hasStarted) {
 				onlineGameState.firstPlayerIsMe = firstPlayerIsMe.get();
 				if (onlineGameState.firstPlayerIsMe) {
 					currentPlayerMove = 'X';
-                }
-                else {
+				} else {
 					currentPlayerMove = 'O';
 				}
 				if (!information.isPlayerHuman()[0]) {
@@ -209,8 +212,7 @@ public final class TicTacToeLayer extends Layer {
 						new EventFlow().addPostEvent(new NetworkEvents.SendMove(clientId, (short) move.position()))
 								.postEvent();
 					}
-                }
-                else {
+				} else {
 					try {
 						final Game.Move wants = playerMoveQueue.take();
 						final Game.Move[] legalMoves = ticTacToe.getLegalMoves();
@@ -228,6 +230,7 @@ public final class TicTacToeLayer extends Layer {
 			}
 		}
 	}
+
 	private void drawSymbol(Game.Move move) {
 		if (move.value() == 'X') {
 			canvas.drawX(Color.RED, move.position());
@@ -239,8 +242,7 @@ public final class TicTacToeLayer extends Layer {
 	private void handleServerGameStart(NetworkEvents.GameMatchResponse resp) {
 		if (resp.playerToMove().equals(resp.opponent())) {
 			firstPlayerIsMe.set(false);
-        }
-        else{
+		} else {
 			firstPlayerIsMe.set(true);
 		}
 		gameHasStarted.set(true);
@@ -251,8 +253,7 @@ public final class TicTacToeLayer extends Layer {
 		if (resp.player().equals(information.playerName()[0]) && firstPlayerIsMe.get()
 				|| !resp.player().equals(information.playerName()[0]) && !firstPlayerIsMe.get()) {
 			playerChar = 'X';
-        }
-        else{
+		} else {
 			playerChar = 'O';
 		}
 		Game.Move move = new Game.Move(Integer.parseInt(resp.move()), playerChar);
@@ -274,6 +275,7 @@ public final class TicTacToeLayer extends Layer {
 		//new EventFlow().addPostEvent(new NetworkEvents.SendMove(response.clientId(),(short)2))
 		//        .postEvent();
 	}
+
 	private void handleReceivedMessage(NetworkEvents.ReceivedMessage msg) {
 		System.out.println("Received Message: " + msg.message()); //todo add chat window
 	}

app/src/main/java/org/toop/local/AppSettings.java

@@ -23,7 +23,7 @@ public class AppSettings {
         AppContext.setLocale(Locale.of(settingsData.locale));
         App.setFullscreen(settingsData.fullScreen);
         new EventFlow().addPostEvent(new AudioEvents.ChangeVolume(settingsData.volume)).asyncPostEvent();
-
+		App.setStyle(settingsAsset.getTheme(), settingsAsset.getLayoutSize());
     }
 
     public SettingsAsset getPath() {

app/src/main/resources/assets/localization/localization_ar.properties

@@ -7,7 +7,6 @@ connect=\u0627\u062a\u0635\u0644
 credits=\u0627\u0644\u0634\u0643\u0631 \u0648\u0627\u0644\u062a\u0642\u062f\u064a\u0631
 developers=\u0627\u0644\u0645\u0637\u0648\u0631\u0648\u0646
 fullscreen=\u0643\u0627\u0645\u0644 \u0627\u0644\u0634\u0627\u0634\u0629
-hint=\u062a\u0644\u0645\u064a\u062d
 human=\u0627\u0644\u0625\u0646\u0633\u0627\u0646
 language=\u0627\u0644\u0644\u063a\u0629
 local=\u0645\u062d\u0644\u064a
@@ -32,6 +31,16 @@ volume=\u0627\u0644\u0635\u0648\u062a
 windowed=\u0646\u0627\u0641\u0630\u064a
 yes=\u0646\u0639\u0645
 
+small=\u0635\u063A\u064A\u0631
+medium=\u0645\u062A\u0648\u0633\u0637
+large=\u0643\u0628\u064A\u0631
+dark=\u063A\u0627\u0645\u0642
+dark-hc=\u063A\u0627\u0645\u0642 (\u062A\u0646\u0627\u0642\u0636 \u0639\u0627\u0644\u064D)
+light=\u0641\u0627\u062A\u062D
+light-hc=\u0641\u0627\u062A\u062D (\u062A\u0646\u0627\u0642\u0636 \u0639\u0627\u0644\u064D)
+layoutSize=\u062D\u062C\u0645 \u0627\u0644\u062A\u0635\u0645\u064A\u0645
+theme=\u0627\u0644\u0645\u0648\u0636\u0648\u0639
+
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629
 chinese=\u4e2d\u6587 (\u0627\u0644\u0635\u064a\u0646\u064a\u0629)
 dutch=Nederlands (\u0627\u0644\u0647\u0648\u0644\u0646\u062f\u064a\u0629)

app/src/main/resources/assets/localization/localization_de.properties

@@ -7,7 +7,6 @@ connect=Verbinden
 credits=Credits
 developers=Entwickler
 fullscreen=Vollbild
-hint=Hinweis
 human=Mensch
 language=Sprache
 local=Lokal
@@ -32,6 +31,16 @@ volume=Lautst\u00e4rke
 windowed=Fenstermodus
 yes=Ja
 
+small=Klein
+medium=Mittel
+large=Gro\u00DF
+dark=Dunkel
+dark-hc=Dunkel (Hoher Kontrast)
+light=Hell
+light-hc=Hell (Hoher Kontrast)
+layoutSize=Layout-Gr\u00F6\u00DFe
+theme=Thema
+
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (Arabisch)
 chinese=\u4e2d\u6587 (Chinesisch)
 dutch=Nederlands (Niederl\u00e4ndisch)

app/src/main/resources/assets/localization/localization_en.properties

@@ -7,7 +7,6 @@ connect=Connect
 credits=Credits
 developers=Developers
 fullscreen=Fullscreen
-hint=Hint
 human=Human
 language=Language
 local=Local
@@ -32,6 +31,17 @@ volume=Volume
 windowed=Windowed
 yes=Yes
 
+small=Small
+medium=Medium
+large=Large
+
+dark=Dark
+dark-hc=Dark (High Contrast)
+light=Light
+light-hc=Light (High Contrast)
+layoutSize=Layout Size
+theme=Theme
+
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (Arabic)
 chinese=\u4e2d\u6587 (Chinese)
 dutch=Nederlands (Dutch)

app/src/main/resources/assets/localization/localization_es.properties

@@ -7,7 +7,6 @@ connect=Conectar
 credits=Cr\u00e9ditos
 developers=Desarrolladores
 fullscreen=Pantalla completa
-hint=Pista
 human=Humano
 language=Idioma
 local=Local
@@ -32,6 +31,16 @@ volume=Volumen
 windowed=Ventana
 yes=S\u00ed
 
+small=Peque\u00F1o
+medium=Mediano
+large=Grande
+dark=Oscuro
+dark-hc=Oscuro (Alto Contraste)
+light=Claro
+light-hc=Claro (Alto Contraste)
+layoutSize=Tama\u00F1o del dise\u00F1o
+theme=Tema
+
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (Ar\u00e1bigo)
 chinese=\u4e2d\u6587 (Chino)
 dutch=Nederlands (Neerland\u00e9s)

app/src/main/resources/assets/localization/localization_fr.properties

@@ -7,7 +7,6 @@ connect=Connecter
 credits=Cr\u00e9dits
 developers=D\u00e9veloppeurs
 fullscreen=Plein \u00e9cran
-hint=Indice
 human=Humain
 language=Langue
 local=Local
@@ -32,6 +31,16 @@ volume=Volume
 windowed=Fen\u00eatre
 yes=Oui
 
+small=Petit
+medium=Moyen
+large=Grand
+dark=Sombre
+dark-hc=Sombre (Contraste \u00E9lev\u00E9)
+light=Clair
+light-hc=Clair (Contraste \u00E9lev\u00E9)
+layoutSize=Taille de la disposition
+theme=Th\u00E8me
+
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (Arabe)
 chinese=\u4e2d\u6587 (Chinois)
 dutch=Nederlands (N\u00e9erlandais)

app/src/main/resources/assets/localization/localization_hi.properties

@@ -32,6 +32,16 @@ volume=\u0935\u0949\u0932\u094d\u092f\u0947\u092e
 windowed=\u0915\u094d\u0930\u094d\u0939 \u092e\u0947\u0902
 yes=\u0939\u093e\u0907
 
+small=\u091B\u094B\u091F\u093E
+medium=\u092E\u0927\u094D\u092F\u092E
+large=\u092C\u0921\u093C\u093E
+dark=\u0915\u093E\u0932\u093E
+dark-hc=\u0915\u093E\u0932\u093E (\u090A\u091A\u094D\u091A \u0915\u0949\u0928\u094D\u091F\u094D\u0930\u093E\u0938\u094D\u091F)
+light=\u091A\u094D\u092E\u092C\u0940\u0932\u093E
+light-hc=\u091A\u094D\u092E\u092C\u0940\u0932\u093E (\u090A\u091A\u094D\u091A \u0915\u0949\u0928\u094D\u091F\u094D\u0930\u093E\u0938\u094D\u091F)
+layoutSize=\u0930\u0942\u092A\u0930\u0947\u0916 \u0915\u093E \u0906\u0915\u093E\u0930
+theme=\u0925\u0940\u092E
+
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (\u0905\u0930\u092c\u0940)
 chinese=\u4e2d\u6587 (\u091a\u0940\u0928\u0940)
 dutch=Nederlands (\u0921\u091a)

app/src/main/resources/assets/localization/localization_it.properties

@@ -7,7 +7,6 @@ connect=Connetti
 credits=Crediti
 developers=Sviluppatori
 fullscreen=Schermo intero
-hint=Suggerimento
 human=Umano
 language=Lingua
 local=Locale
@@ -32,6 +31,16 @@ volume=Volume
 windowed=Finestra
 yes=S\u00ec
 
+small=Piccolo
+medium=Medio
+large=Grande
+dark=Scuro
+dark-hc=Scuro (Alto Contrasto)
+light=Chiaro
+light-hc=Chiaro (Alto Contrasto)
+layoutSize=Dimensione Layout
+theme=Tema
+
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (Arabo)
 chinese=\u4e2d\u6587 (Cinese)
 dutch=Nederlands (Olandese)

app/src/main/resources/assets/localization/localization_ja.properties

@@ -7,7 +7,6 @@ connect=\u63a5\u7d9a
 credits=\u30af\u30ec\u30b8\u30c3\u30c8
 developers=\u958b\u767a\u8005
 fullscreen=\u5168\u753b\u9762
-hint=\u30d2\u30f3\u30c8
 human=\u4eba\u9593
 language=\u8a00\u8a9e
 local=\u5730\u57df
@@ -32,6 +31,16 @@ volume=\u30dc\u30ea\u30e5\u30fc\u30e0
 windowed=\u30a6\u30a3\u30f3\u30c9\u30a6
 yes=\u306f\u3044
 
+small=\u5C0F
+medium=\u4E2D
+large=\u5927
+dark=\u30C0\u30FC\u30AF
+dark-hc=\u30C0\u30FC\u30AF (\u9AD8\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8)
+light=\u30E9\u30A4\u30C8
+light-hc=\u30E9\u30A4\u30C8 (\u9AD8\u30B3\u30F3\u30C8\u30E9\u30B9\u30C8)
+layoutSize=\u30EC\u30A4\u30A2\u30A6\u30C8\u30B5\u30A4\u30BA
+theme=\u30C6\u30FC\u30DE
+
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (\u30a2\u30e9\u30d3\u30a2\u8a9e)
 chinese=\u4e2d\u6587 (\u4e2d\u6587)
 dutch=Nederlands (\u30aa\u30e9\u30f3\u30c0\u8a9e)

app/src/main/resources/assets/localization/localization_ka.properties

@@ -7,7 +7,6 @@ connect=\u10d7\u10d0\u10db\u10d0\u10d4\u10e0\u10d7\u10d8
 credits=\u10d9\u10d0\u10e0\u10d4\u10d3\u10d0\u10e0\u10d8
 developers=\u10db\u10d0\u10e0\u10e3\u10d1\u10d7\u10d0\u10ea\u10d4\u10da\u10d8
 fullscreen=\u10e1\u10d0\u10e5\u10d8 \u10d8\u10e0\u10e2\u10d8\u10d5\u10d0\u10e0\u10d8
-hint=\u10db\u10d8\u10e0\u10d7\u10d4\u10da\u10d8
 human=\u10db\u10d4\u10db\u10d0\u10dc\u10d8
 language=\u10dc\u10d0\u10db\u10d0
 local=\u10db\u10d4\u10e0\u10d7\u10d4\u10da\u10d0\u10e0\u10d8
@@ -32,6 +31,16 @@ volume=\u10d7\u10d0\u10e7\u10d8
 windowed=\u10e1\u10d0\u10db\u10d7\u10d8
 yes=\u10d3\u10d0
 
+small=\uC791\uC74C
+medium=\uBCF4\uD1B5
+large=\uD070
+dark=\uC5B4\uB460
+dark-hc=\uC5B4\uB460 (\uACE0 \uB300\uBE44)
+light=\uBC1D\uC74C
+light-hc=\uBC1D\uC74C (\uACE0 \uB300\uBE44)
+layoutSize=\uB808\uC774\uC544\uC6C3 \uD06C\uAE30
+theme=\uC8FC\uC81C
+
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (\u10d0\u10e0\u10d0\u10d1\u10d8\u10d1\u10d3\u10d3\u10d4\u10da\u10d8)
 chinese=\u4e2d\u6587 (\u10d9\u10d8\u10e2\u10d8\u10e1\u10d8)
 dutch=Nederlands (\u10db\u10d4\u10d3\u10d0\u10da\u10d0\u10dc\u10d3\u10d8)

app/src/main/resources/assets/localization/localization_ko.properties

@@ -7,7 +7,6 @@ connect=\uc5f0\uacb0
 credits=\uac10\uc0ac
 developers=\uac1c\ubc1c\uc790
 fullscreen=\uc804\uccb4 \ud654\uba74
-hint=\ud78c\ud2b8
 human=\uc778\uac04
 language=\uc5b8\uc5b4
 local=\ub85c\uceec
@@ -32,6 +31,16 @@ volume=\ubcf4\ub7ec\uc6b4
 windowed=\ucc3d \ubaa8\ub4dc
 yes=\ub124
 
+small=\uC791\uC74C
+medium=\uBCF4\uD1B5
+large=\uD070
+dark=\uC5B4\uB460
+dark-hc=\uC5B4\uB460 (\uACE0 \uB300\uBE44)
+light=\uBC1D\uC74C
+light-hc=\uBC1D\uC74C (\uACE0 \uB300\uBE44)
+layoutSize=\uB808\uC774\uC544\uC6C3 \uD06C\uAE30
+theme=\uC8FC\uC81C
+
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (\u0639\u0631\u0628\u064a\u0629)
 chinese=\u4e2d\u6587 (\u4e2d\u6587)
 dutch=Nederlands (\ub3c4\ucc99)

app/src/main/resources/assets/localization/localization_nl.properties

@@ -7,7 +7,6 @@ connect=Verbinden
 credits=Credits
 developers=Ontwikkelaars
 fullscreen=Volledig scherm
-hint=Hint
 human=Mens
 language=Taal
 local=Lokaal
@@ -32,6 +31,16 @@ volume=Volume
 windowed=Venstermodus
 yes=Ja
 
+small=Klein
+medium=Middel
+large=Groot
+dark=Donker
+dark-hc=Donker (Hoog Contrast)
+light=Licht
+light-hc=Licht (Hoog Contrast)
+layoutSize=Lay-outgrootte
+theme=Thema
+
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (Arabisch)
 chinese=\u4e2d\u6587 (Chinees)
 dutch=Nederlands

app/src/main/resources/assets/localization/localization_ru.properties

@@ -7,7 +7,6 @@ connect=\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f
 credits=\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u043d\u043e\u0441\u0442\u0438
 developers=\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438
 fullscreen=\u041f\u043e\u043b\u043d\u043e\u044d\u043a\u0440\u0430\u043d\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c
-hint=\u041f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0430
 human=\u0427\u0435\u043b\u043e\u0432\u0435\u043a
 language=\u042f\u0437\u044b\u043a
 local=\u041b\u043e\u043a\u0430\u043b\u044c\u043d\u044b\u0439
@@ -32,6 +31,16 @@ volume=\u0413\u0440\u0430\u043c\u043c\u043e\u0444\u043e\u043d
 windowed=\u041e\u043a\u043d\u043e
 yes=\u0414\u0430
 
+small=\u043C\u0430\u043B\u0435\u043D\u044C\u043A\u0438\u0439
+medium=\u0441\u0440\u0435\u0434\u043D\u0438\u0439
+large=\u0431\u043E\u043B\u044C\u0448\u043E\u0439
+dark=\u0442\u0451\u043C\u043D\u044B\u0439
+dark-hc=\u0442\u0451\u043C\u043D\u044B\u0439 (\u0432\u044B\u0441\u043E\u043A\u0438\u0439 \u043A\u043E\u043D\u0442\u0440\u0430\u0441\u0442)
+light=\u0441\u0432\u0435\u0442\u043B\u044B\u0439
+light-hc=\u0441\u0432\u0435\u0442\u043B\u044B\u0439 (\u0432\u044B\u0441\u043E\u043A\u0438\u0439 \u043A\u043E\u043D\u0442\u0440\u0430\u0441\u0442)
+layoutSize=\u0440\u0430\u0437\u043C\u0435\u0440 \u043C\u0430\u043A\u0435\u0442\u0430
+theme=\u0442\u0435\u043C\u0430
+
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (\u0410\u0440\u0430\u0431\u0441\u043a\u0438\u0439)
 chinese=\u4e2d\u6587 (\u041a\u0438\u0442\u0430\u0439\u0441\u043a\u0438\u0439)
 dutch=Nederlands (\u041d\u0438\u0434\u0435\u0440\u043b\u0430\u043d\u0434\u0441\u043a\u0438\u0439)

app/src/main/resources/assets/localization/localization_zh.properties

@@ -7,7 +7,6 @@ connect=\u8fde\u63a5
 credits=\u6b23\u8d4f
 developers=\u5f00\u53d1\u8005
 fullscreen=\u5168\u5c4f
-hint=\u63d0\u793a
 human=\u4eba
 language=\u8bed\u8a00
 local=\u672c\u5730
@@ -32,6 +31,16 @@ volume=\u97f3\u91cf
 windowed=\u7a97\u53e3\u6a21\u5f0f
 yes=\u662f
 
+small=\u5C0F
+medium=\u4E2D
+large=\u5927
+dark=\u6697
+dark-hc=\u6697 (\u9AD8\u5BF9\u6BD4)
+light=\u4EAE
+light-hc=\u4EAE (\u9AD8\u5BF9\u6BD4)
+layoutSize=\u5E03\u5C40\u5927\u5C0F
+theme=\u4E3B\u9898
+
 arabic=\u0627\u0644\u0639\u0631\u0628\u064a\u0629 (\u963f\u62c9\u4f2f\u8bed)
 chinese=\u4e2d\u6587
 dutch=Nederlands (\u8377\u5170\u8bed)

app/src/main/resources/assets/style/app.css

@@ -1,244 +0,0 @@
-/* ─────────────────────────────
-   Root Background
-───────────────────────────── */
-.background {
-	/* Layout */
-
-	/* Visual */
-	-fx-background-color: linear-gradient(to bottom right, #3f51b5, #2196f3);
-
-	/* Text */
-
-	/* Effects */
-}
-
-/* ─────────────────────────────
-   Containers
-───────────────────────────── */
-.stack_container,
-.vertical_container,
-.horizontal_container {
-	/* Layout */
-	-fx-padding: 12;
-	-fx-alignment: center;
-
-	/* Visual */
-	-fx-background-color: linear-gradient(to bottom right, #4a4e91, #3a3f76);
-	-fx-background-radius: 8;
-
-	/* Text */
-
-	/* Effects */
-	-fx-effect: dropshadow(gaussian, #00000033, 12, 0.3, 0, 4);
-}
-
-/* ─────────────────────────────
-   Text Elements (Labels, Headings)
-───────────────────────────── */
-.text {
-	/* Layout */
-	-fx-padding: 4 8;
-
-	/* Visual */
-
-	/* Text */
-	-fx-font-family: "Arial";
-	-fx-font-size: 16px;
-	-fx-fill: #ffffff;
-
-	/* Effects */
-}
-
-/* ─────────────────────────────
-   Buttons and Toggles
-───────────────────────────── */
-.button,
-.toggle {
-	/* Layout */
-	-fx-padding: 8 16;
-
-	/* Visual */
-	-fx-background-color: #5c6bc0;
-	-fx-background-radius: 6;
-	-fx-border-color: transparent;
-
-	/* Text */
-	-fx-text-fill: #ffffff;
-
-	/* Effects */
-	-fx-effect: dropshadow(gaussian, #00000033, 2, 0.1, 0, 1);
-	-fx-cursor: hand;
-	-fx-transition: all 0.2s ease-in-out;
-}
-
-.button:hover,
-.toggle:hover {
-	/* Layout */
-
-	/* Visual */
-	-fx-background-color: #7986cb;
-
-	/* Text */
-
-	/* Effects */
-	-fx-scale-x: 1.05;
-	-fx-scale-y: 1.05;
-	-fx-effect: dropshadow(gaussian, #90caf9, 8, 0.3, 0, 0);
-}
-
-/* ─────────────────────────────
-   Input Fields
-───────────────────────────── */
-.input {
-	/* Layout */
-	-fx-padding: 8;
-
-	/* Visual */
-	-fx-background-color: #3f3f5a;
-	-fx-background-radius: 6;
-	-fx-border-color: #9fa8da;
-	-fx-border-radius: 6;
-
-	/* Text */
-	-fx-text-fill: #ffffff;
-
-	/* Effects */
-	-fx-cursor: text;
-}
-
-.input:focused {
-	/* Layout */
-
-	/* Visual */
-	-fx-background-color: #5c6bc0;
-	-fx-border-color: #ffffff;
-	-fx-border-width: 2;
-
-	/* Text */
-
-	/* Effects */
-}
-
-/* ─────────────────────────────
-   Sliders
-───────────────────────────── */
-.slider {
-	/* Layout */
-	-fx-padding: 10;
-
-	/* Visual */
-	-fx-background-color: transparent;
-
-	/* Text */
-
-	/* Effects */
-}
-
-.slider .track {
-	/* Layout */
-
-	/* Visual */
-	-fx-background-color: linear-gradient(to right, #76ff03, #ff5252);
-	-fx-background-radius: 2;
-	-fx-pref-height: 6;
-
-	/* Text */
-
-	/* Effects */
-}
-
-.slider .thumb {
-	/* Layout */
-
-	/* Visual */
-	-fx-background-color: #ffffff;
-	-fx-background-radius: 50%;
-
-	/* Text */
-
-	/* Effects */
-	-fx-effect: dropshadow(gaussian, #0000004d, 4, 0.2, 0, 1);
-	-fx-cursor: hand;
-}
-
-/* ─────────────────────────────
-   ChoiceBox
-───────────────────────────── */
-.choicebox {
-	/* Layout */
-	-fx-alignment: center;
-
-	/* Visual */
-	-fx-background-color: #5c6bc0;
-	-fx-background-radius: 6;
-	-fx-border-color: transparent;
-
-	/* Text */
-
-	/* Effects */
-	-fx-cursor: hand;
-}
-
-.choicebox .label {
-	/* Layout */
-	-fx-padding: 6 12;
-
-	/* Visual */
-
-	/* Text */
-	-fx-text-fill: #ffffff;
-
-	/* Effects */
-}
-
-.choicebox .arrow {
-	/* Layout */
-
-	/* Visual */
-	-fx-background-color: #ffffff;
-
-	/* Text */
-
-	/* Effects */
-}
-
-.choicebox .context-menu {
-	/* Layout */
-
-	/* Visual */
-	-fx-background-color: #3f3f5a;
-	-fx-background-radius: 6;
-
-	/* Text */
-
-	/* Effects */
-}
-
-.choicebox .menu-item:hover {
-	/* Layout */
-
-	/* Visual */
-	-fx-background-color: #7986cb;
-
-	/* Text */
-
-	/* Effects */
-	-fx-cursor: hand;
-}
-
-/* ─────────────────────────────
-   Separator
-───────────────────────────── */
-.separator {
-	/* Layout */
-	-fx-padding: 8 0;
-	-fx-border-insets: 4 0 4 0;
-
-	/* Visual */
-	-fx-border-color: #ffffff55;
-	-fx-border-width: 0 0 1 0;
-
-	/* Text */
-
-	/* Effects */
-}

app/src/main/resources/assets/style/credits.css

@@ -1,12 +0,0 @@
-.credit-text {
-    -fx-fill: #ffffff;
-    -fx-font-size: 24px;
-    -fx-font-family: "Arial";
-    -fx-font-weight: bold;
-    -fx-effect: dropshadow(gaussian, rgba(0,0,0,0.7), 4, 0, 2, 2);
-}
-
-.animated_credits_container {
-	-fx-padding: 10;
-	-fx-alignment: center;
-}

app/src/main/resources/assets/style/dark-hc.css

@@ -0,0 +1,215 @@
+/* ----------------------------
+	.background
+----------------------------- */
+.bg-primary {
+	-fx-background-color: #0a0a0a;
+}
+
+.bg-secondary {
+	-fx-background-color: #1a1a1a;
+}
+
+.bg-popup {
+	-fx-background-color: #0a0a0acc;
+}
+
+/* ----------------------------
+	.button
+----------------------------- */
+.button {
+	/* Layout */
+	-fx-padding: 10 20;
+	-fx-background-radius: 6;
+	-fx-cursor: hand;
+
+	/* Color */
+	-fx-background-color: #1a1a1a;
+	-fx-text-fill: #ffffff;
+	-fx-border-color: #ffffff;
+	-fx-border-width: 1;
+
+	/* Effects */
+	-fx-effect: dropshadow(gaussian, #00000099, 4, 0, 0, 1);
+}
+
+.button:hover {
+	-fx-background-color: #2a2a2a;
+	-fx-border-color: #00ff00;
+}
+
+/* ----------------------------
+	.choice-box
+----------------------------- */
+.choice-box {
+	/* Layout */
+	-fx-padding: 6;
+	-fx-background-radius: 4;
+
+	/* Color */
+	-fx-background-color: #1a1a1a;
+	-fx-border-color: #ffffff;
+	-fx-border-width: 1;
+	-fx-mark-color: #ffffff;
+}
+
+.choice-box:hover {
+	-fx-border-color: #00ff00;
+}
+
+.choice-box:focused {
+	-fx-border-color: #00cc66;
+}
+
+.choice-box .label {
+	-fx-text-fill: #ffffff;
+}
+
+/* ----------------------------
+	.choice-box popup styling
+----------------------------- */
+.choice-box .context-menu {
+	/* Layout */
+	-fx-padding: 4;
+	-fx-background-radius: 4;
+
+	/* Color */
+	-fx-background-color: #1a1a1a;
+	-fx-border-color: #ffffff;
+	-fx-border-width: 1;
+}
+
+.choice-box .menu-item {
+	/* Layout */
+	-fx-padding: 6 12;
+}
+
+.choice-box .menu-item .label {
+	-fx-text-fill: #ffffff;
+}
+
+.choice-box .menu-item:hover {
+	-fx-background-color: #2a2a2a;
+}
+
+.choice-box .menu-item:focused {
+	-fx-background-color: #00ff00;
+	-fx-text-fill: #000000;
+}
+
+/* ----------------------------
+	.container
+----------------------------- */
+.container {
+	/* Layout */
+	-fx-padding: 10;
+	-fx-alignment: center;
+
+	/* Color */
+	-fx-background-color: #1a1a1a;
+}
+
+/* ----------------------------
+	.input
+----------------------------- */
+.input {
+	/* Layout */
+	-fx-padding: 8;
+	-fx-background-radius: 4;
+
+	/* Color */
+	-fx-background-color: #1a1a1a;
+	-fx-text-fill: #ffffff;
+	-fx-border-color: #ffffff;
+	-fx-border-width: 1;
+}
+
+.input:hover {
+	-fx-border-color: #00ff00;
+}
+
+.input:focused {
+	-fx-border-color: #00cc66;
+}
+
+/* ----------------------------
+	.separator
+----------------------------- */
+.separator {
+	/* Layout */
+	-fx-padding: 10 0;
+}
+
+.separator .line {
+	/* Color */
+	-fx-border-color: #ffffff;
+	-fx-border-width: 0 0 1 0;
+}
+
+/* ----------------------------
+	.slider
+----------------------------- */
+.slider {
+	/* Layout */
+	-fx-padding: 6 0;
+
+	/* Color */
+	-fx-background-color: transparent;
+}
+
+.slider .track {
+	/* Color */
+	-fx-background-color: linear-gradient(to left, #00ff00, #ff0000);
+	-fx-background-insets: 0;
+	-fx-background-radius: 2;
+	-fx-pref-height: 4;
+}
+
+.slider .thumb {
+	/* Color */
+	-fx-background-color: #ffffff;
+	-fx-background-radius: 50%;
+
+	/* Effects */
+	-fx-effect: dropshadow(gaussian, #000000aa, 4, 0, 0, 1);
+}
+
+.slider .thumb:hover {
+	-fx-scale-x: 1.2;
+	-fx-scale-y: 1.2;
+}
+
+/* ----------------------------
+	.text-header
+----------------------------- */
+.text-header {
+	-fx-fill: #ffffff;
+	-fx-text-fill: #ffffff;
+}
+
+/* ----------------------------
+	.text-normal
+----------------------------- */
+.text-normal {
+	-fx-fill: #f0f0f0;
+	-fx-text-fill: #f0f0f0;
+}
+
+/* ----------------------------
+	.toggle-button
+----------------------------- */
+.toggle {
+	/* Layout */
+	-fx-padding: 8 16;
+	-fx-background-radius: 6;
+
+	/* Color */
+	-fx-background-color: #1f1f1f;
+	-fx-text-fill: #ffffff;
+	-fx-border-color: #ffffff;
+}
+
+.toggle:hover {
+	-fx-background-color: #00ff00;
+	-fx-text-fill: #000000;
+	-fx-border-color: #00ff00;
+}

app/src/main/resources/assets/style/dark.css

@@ -0,0 +1,215 @@
+/* ----------------------------
+	.background
+----------------------------- */
+.bg-primary {
+	-fx-background-color: #181818;
+}
+
+.bg-secondary {
+	-fx-background-color: #2a2a2a;
+}
+
+.bg-popup {
+	-fx-background-color: #1818187f;
+}
+
+/* ----------------------------
+	.button
+----------------------------- */
+.button {
+	/* Layout */
+	-fx-padding: 10 20;
+	-fx-background-radius: 6;
+	-fx-cursor: hand;
+
+	/* Color */
+	-fx-background-color: #2a2a2a;
+	-fx-text-fill: #f0f0f0;
+	-fx-border-color: #3a3a3a;
+	-fx-border-width: 1;
+
+	/* Effects */
+	-fx-effect: dropshadow(gaussian, #0000004d, 4, 0, 0, 1);
+}
+
+.button:hover {
+	-fx-background-color: #3a3a3a;
+	-fx-border-color: #4caf50;
+}
+
+/* ----------------------------
+	.choice-box
+----------------------------- */
+.choice-box {
+	/* Layout */
+	-fx-padding: 6;
+	-fx-background-radius: 4;
+
+	/* Color */
+	-fx-background-color: #2a2a2a;
+	-fx-border-color: #444444;
+	-fx-border-width: 1;
+	-fx-mark-color: #f0f0f0;
+}
+
+.choice-box:hover {
+	-fx-border-color: #4caf50;
+}
+
+.choice-box:focused {
+	-fx-border-color: #81c784;
+}
+
+.choice-box .label {
+	-fx-text-fill: #f0f0f0;
+}
+
+/* ----------------------------
+	.choice-box popup styling
+----------------------------- */
+.choice-box .context-menu {
+	/* Layout */
+	-fx-padding: 4;
+	-fx-background-radius: 4;
+
+	/* Color */
+	-fx-background-color: #2a2a2a;
+	-fx-border-color: #444444;
+	-fx-border-width: 1;
+}
+
+.choice-box .menu-item {
+	/* Layout */
+	-fx-padding: 6 12;
+}
+
+.choice-box .menu-item .label {
+	-fx-text-fill: #dddddd;
+}
+
+.choice-box .menu-item:hover {
+	-fx-background-color: #3a3a3a;
+}
+
+.choice-box .menu-item:focused {
+	-fx-background-color: #4caf50;
+	-fx-text-fill: #ffffff;
+}
+
+/* ----------------------------
+	.container
+----------------------------- */
+.container {
+	/* Layout */
+	-fx-padding: 10;
+	-fx-alignment: center;
+
+	/* Color */
+	-fx-background-color: #2a2a2a;
+}
+
+/* ----------------------------
+	.input
+----------------------------- */
+.input {
+	/* Layout */
+	-fx-padding: 8;
+	-fx-background-radius: 4;
+
+	/* Color */
+	-fx-background-color: #2a2a2a;
+	-fx-text-fill: #f0f0f0;
+	-fx-border-color: #444444;
+	-fx-border-width: 1;
+}
+
+.input:hover {
+	-fx-border-color: #4caf50;
+}
+
+.input:focused {
+	-fx-border-color: #81c784;
+}
+
+/* ----------------------------
+	.separator
+----------------------------- */
+.separator {
+	/* Layout */
+	-fx-padding: 10 0;
+}
+
+.separator .line {
+	/* Color */
+	-fx-border-color: #3a3a3a;
+	-fx-border-width: 0 0 1 0;
+}
+
+/* ----------------------------
+	.slider
+----------------------------- */
+.slider {
+	/* Layout */
+	-fx-padding: 6 0;
+
+	/* Color */
+	-fx-background-color: transparent;
+}
+
+.slider .track {
+	/* Color */
+	-fx-background-color: linear-gradient(to left, #4caf50, #f44336);
+	-fx-background-insets: 0;
+	-fx-background-radius: 2;
+	-fx-pref-height: 4;
+}
+
+.slider .thumb {
+	/* Color */
+	-fx-background-color: #f0f0f0;
+	-fx-background-radius: 50%;
+
+	/* Effects */
+	-fx-effect: dropshadow(gaussian, #00000066, 4, 0, 0, 1);
+}
+
+.slider .thumb:hover {
+	-fx-scale-x: 1.2;
+	-fx-scale-y: 1.2;
+}
+
+/* ----------------------------
+	.text-header
+----------------------------- */
+.text-header {
+	-fx-fill: #f0f0f0;
+	-fx-text-fill: #f0f0f0;
+}
+
+/* ----------------------------
+	.text-normal
+----------------------------- */
+.text-normal {
+	-fx-fill: #dddddd;
+	-fx-text-fill: #dddddd;
+}
+
+/* ----------------------------
+	.toggle-button
+----------------------------- */
+.toggle {
+	/* Layout */
+	-fx-padding: 8 16;
+	-fx-background-radius: 6;
+
+	/* Color */
+	-fx-background-color: #333333;
+	-fx-text-fill: #cccccc;
+	-fx-border-color: #4a4a4a;
+}
+
+.toggle:hover {
+	-fx-background-color: #4caf50;
+	-fx-text-fill: #ffffff;
+	-fx-border-color: #4caf50;
+}

app/src/main/resources/assets/style/large.css

@@ -0,0 +1,11 @@
+.text-header {
+	-fx-font-family: "Arial";
+	-fx-font-size: 24px;
+	-fx-font-weight: bold;
+}
+
+.text-normal {
+	-fx-font-family: "Arial";
+	-fx-font-size: 20px;
+	-fx-font-weight: normal;
+}

app/src/main/resources/assets/style/light-hc.css

@@ -0,0 +1,215 @@
+/* ----------------------------
+	.background
+----------------------------- */
+.bg-primary {
+	-fx-background-color: #ffffff;
+}
+
+.bg-secondary {
+	-fx-background-color: #f2f2f2;
+}
+
+.bg-popup {
+	-fx-background-color: #ffffffcc;
+}
+
+/* ----------------------------
+	.button
+----------------------------- */
+.button {
+	/* Layout */
+	-fx-padding: 10 20;
+	-fx-background-radius: 6;
+	-fx-cursor: hand;
+
+	/* Color */
+	-fx-background-color: #f2f2f2;
+	-fx-text-fill: #000000;
+	-fx-border-color: #000000;
+	-fx-border-width: 1;
+
+	/* Effects */
+	-fx-effect: dropshadow(gaussian, #00000033, 4, 0, 0, 1);
+}
+
+.button:hover {
+	-fx-background-color: #e0e0e0;
+	-fx-border-color: #008000;
+}
+
+/* ----------------------------
+	.choice-box
+----------------------------- */
+.choice-box {
+	/* Layout */
+	-fx-padding: 6;
+	-fx-background-radius: 4;
+
+	/* Color */
+	-fx-background-color: #ffffff;
+	-fx-border-color: #000000;
+	-fx-border-width: 1;
+	-fx-mark-color: #000000;
+}
+
+.choice-box:hover {
+	-fx-border-color: #008000;
+}
+
+.choice-box:focused {
+	-fx-border-color: #009900;
+}
+
+.choice-box .label {
+	-fx-text-fill: #000000;
+}
+
+/* ----------------------------
+	.choice-box popup styling
+----------------------------- */
+.choice-box .context-menu {
+	/* Layout */
+	-fx-padding: 4;
+	-fx-background-radius: 4;
+
+	/* Color */
+	-fx-background-color: #ffffff;
+	-fx-border-color: #000000;
+	-fx-border-width: 1;
+}
+
+.choice-box .menu-item {
+	/* Layout */
+	-fx-padding: 6 12;
+}
+
+.choice-box .menu-item .label {
+	-fx-text-fill: #000000;
+}
+
+.choice-box .menu-item:hover {
+	-fx-background-color: #e0e0e0;
+}
+
+.choice-box .menu-item:focused {
+	-fx-background-color: #008000;
+	-fx-text-fill: #ffffff;
+}
+
+/* ----------------------------
+	.container
+----------------------------- */
+.container {
+	/* Layout */
+	-fx-padding: 10;
+	-fx-alignment: center;
+
+	/* Color */
+	-fx-background-color: #f9f9f9;
+}
+
+/* ----------------------------
+	.input
+----------------------------- */
+.input {
+	/* Layout */
+	-fx-padding: 8;
+	-fx-background-radius: 4;
+
+	/* Color */
+	-fx-background-color: #ffffff;
+	-fx-text-fill: #000000;
+	-fx-border-color: #000000;
+	-fx-border-width: 1;
+}
+
+.input:hover {
+	-fx-border-color: #008000;
+}
+
+.input:focused {
+	-fx-border-color: #009900;
+}
+
+/* ----------------------------
+	.separator
+----------------------------- */
+.separator {
+	/* Layout */
+	-fx-padding: 10 0;
+}
+
+.separator .line {
+	/* Color */
+	-fx-border-color: #000000;
+	-fx-border-width: 0 0 1 0;
+}
+
+/* ----------------------------
+	.slider
+----------------------------- */
+.slider {
+	/* Layout */
+	-fx-padding: 6 0;
+
+	/* Color */
+	-fx-background-color: transparent;
+}
+
+.slider .track {
+	/* Color */
+	-fx-background-color: linear-gradient(to left, #00cc00, #cc0000);
+	-fx-background-insets: 0;
+	-fx-background-radius: 2;
+	-fx-pref-height: 4;
+}
+
+.slider .thumb {
+	/* Color */
+	-fx-background-color: #000000;
+	-fx-background-radius: 50%;
+
+	/* Effects */
+	-fx-effect: dropshadow(gaussian, #00000066, 4, 0, 0, 1);
+}
+
+.slider .thumb:hover {
+	-fx-scale-x: 1.2;
+	-fx-scale-y: 1.2;
+}
+
+/* ----------------------------
+	.text-header
+----------------------------- */
+.text-header {
+	-fx-fill: #000000;
+	-fx-text-fill: #000000;
+}
+
+/* ----------------------------
+	.text-normal
+----------------------------- */
+.text-normal {
+	-fx-fill: #111111;
+	-fx-text-fill: #111111;
+}
+
+/* ----------------------------
+	.toggle-button
+----------------------------- */
+.toggle {
+	/* Layout */
+	-fx-padding: 8 16;
+	-fx-background-radius: 6;
+
+	/* Color */
+	-fx-background-color: #e6e6e6;
+	-fx-text-fill: #000000;
+	-fx-border-color: #000000;
+}
+
+.toggle:hover {
+	-fx-background-color: #00cc00;
+	-fx-text-fill: #ffffff;
+	-fx-border-color: #00cc00;
+}

app/src/main/resources/assets/style/light.css

@@ -0,0 +1,215 @@
+/* ----------------------------
+	.background
+----------------------------- */
+.bg-primary {
+	-fx-background-color: #f5f5f5;
+}
+
+.bg-secondary {
+	-fx-background-color: #e0e0e0;
+}
+
+.bg-popup {
+	-fx-background-color: #f5f5f57f;
+}
+
+/* ----------------------------
+	.button
+----------------------------- */
+.button {
+	/* Layout */
+	-fx-padding: 10 20;
+	-fx-background-radius: 6;
+	-fx-cursor: hand;
+
+	/* Color */
+	-fx-background-color: #e0e0e0;
+	-fx-text-fill: #1a1a1a;
+	-fx-border-color: #cccccc;
+	-fx-border-width: 1;
+
+	/* Effects */
+	-fx-effect: dropshadow(gaussian, #00000026, 4, 0, 0, 1);
+}
+
+.button:hover {
+	-fx-background-color: #d5d5d5;
+	-fx-border-color: #4caf50;
+}
+
+/* ----------------------------
+	.choice-box
+----------------------------- */
+.choice-box {
+	/* Layout */
+	-fx-padding: 6;
+	-fx-background-radius: 4;
+
+	/* Color */
+	-fx-background-color: #e0e0e0;
+	-fx-border-color: #cccccc;
+	-fx-border-width: 1;
+	-fx-mark-color: #1a1a1a;
+}
+
+.choice-box:hover {
+	-fx-border-color: #4caf50;
+}
+
+.choice-box:focused {
+	-fx-border-color: #81c784;
+}
+
+.choice-box .label {
+	-fx-text-fill: #1a1a1a;
+}
+
+/* ----------------------------
+	.choice-box popup styling
+----------------------------- */
+.choice-box .context-menu {
+	/* Layout */
+	-fx-padding: 4;
+	-fx-background-radius: 4;
+
+	/* Color */
+	-fx-background-color: #ffffff;
+	-fx-border-color: #cccccc;
+	-fx-border-width: 1;
+}
+
+.choice-box .menu-item {
+	/* Layout */
+	-fx-padding: 6 12;
+}
+
+.choice-box .menu-item .label {
+	-fx-text-fill: #333333;
+}
+
+.choice-box .menu-item:hover {
+	-fx-background-color: #eeeeee;
+}
+
+.choice-box .menu-item:focused {
+	-fx-background-color: #4caf50;
+	-fx-text-fill: #ffffff;
+}
+
+/* ----------------------------
+	.container
+----------------------------- */
+.container {
+	/* Layout */
+	-fx-padding: 10;
+	-fx-alignment: center;
+
+	/* Color */
+	-fx-background-color: #e0e0e0;
+}
+
+/* ----------------------------
+	.input
+----------------------------- */
+.input {
+	/* Layout */
+	-fx-padding: 8;
+	-fx-background-radius: 4;
+
+	/* Color */
+	-fx-background-color: #ffffff;
+	-fx-text-fill: #1a1a1a;
+	-fx-border-color: #cccccc;
+	-fx-border-width: 1;
+}
+
+.input:hover {
+	-fx-border-color: #4caf50;
+}
+
+.input:focused {
+	-fx-border-color: #81c784;
+}
+
+/* ----------------------------
+	.separator
+----------------------------- */
+.separator {
+	/* Layout */
+	-fx-padding: 10 0;
+}
+
+.separator .line {
+	/* Color */
+	-fx-border-color: #cccccc;
+	-fx-border-width: 0 0 1 0;
+}
+
+/* ----------------------------
+	.slider
+----------------------------- */
+.slider {
+	/* Layout */
+	-fx-padding: 6 0;
+
+	/* Color */
+	-fx-background-color: transparent;
+}
+
+.slider .track {
+	/* Color */
+	-fx-background-color: linear-gradient(to left, #4caf50, #f44336);
+	-fx-background-insets: 0;
+	-fx-background-radius: 2;
+	-fx-pref-height: 4;
+}
+
+.slider .thumb {
+	/* Color */
+	-fx-background-color: #1a1a1a;
+	-fx-background-radius: 50%;
+
+	/* Effects */
+	-fx-effect: dropshadow(gaussian, #00000033, 4, 0, 0, 1);
+}
+
+.slider .thumb:hover {
+	-fx-scale-x: 1.2;
+	-fx-scale-y: 1.2;
+}
+
+/* ----------------------------
+	.text-header
+----------------------------- */
+.text-header {
+	-fx-fill: #1a1a1a;
+	-fx-text-fill: #1a1a1a;
+}
+
+/* ----------------------------
+	.text-normal
+----------------------------- */
+.text-normal {
+	-fx-fill: #333333;
+	-fx-text-fill: #333333;
+}
+
+/* ----------------------------
+	.toggle-button
+----------------------------- */
+.toggle {
+	/* Layout */
+	-fx-padding: 8 16;
+	-fx-background-radius: 6;
+
+	/* Color */
+	-fx-background-color: #d0d0d0;
+	-fx-text-fill: #1a1a1a;
+	-fx-border-color: #b0b0b0;
+}
+
+.toggle:hover {
+	-fx-background-color: #4caf50;
+	-fx-text-fill: #ffffff;
+	-fx-border-color: #4caf50;
+}

app/src/main/resources/assets/style/medium.css

@@ -0,0 +1,11 @@
+.text-header {
+	-fx-font-family: "Arial";
+	-fx-font-size: 20px;
+	-fx-font-weight: bold;
+}
+
+.text-normal {
+	-fx-font-family: "Arial";
+	-fx-font-size: 16px;
+	-fx-font-weight: normal;
+}

app/src/main/resources/assets/style/multiplayer.css

@@ -1,6 +0,0 @@
-.player_container {
-	-fx-background-color: linear-gradient(to bottom right, orange, indigo), #1d1d1d;
-    -fx-background-insets: 0, 2;
-    -fx-background-radius: 8;
-    -fx-padding: 10;
-}

app/src/main/resources/assets/style/quit.css

@@ -1,3 +0,0 @@
-.background {
-	-fx-background-color: #0000007f;
-}

app/src/main/resources/assets/style/small.css

@@ -0,0 +1,11 @@
+.text-header {
+	-fx-font-family: "Arial";
+	-fx-font-size: 16px;
+	-fx-font-weight: bold;
+}
+
+.text-normal {
+	-fx-font-family: "Arial";
+	-fx-font-size: 12px;
+	-fx-font-weight: normal;
+}

framework/src/main/java/org/toop/framework/asset/resources/SettingsAsset.java

@@ -24,6 +24,14 @@ public class SettingsAsset extends JsonAsset<Settings> {
         return getContent().fullScreen;
     }
 
+	public String getTheme() {
+		return getContent().theme;
+	}
+
+	public String getLayoutSize() {
+		return getContent().layoutSize;
+	}
+
     public void setVolume(int volume) {
         getContent().volume = volume;
         save();
@@ -38,4 +46,14 @@ public class SettingsAsset extends JsonAsset<Settings> {
         getContent().fullScreen = fullscreen;
         save();
     }
+
+	public void setTheme(String theme) {
+		getContent().theme = theme;
+		save();
+	}
+
+	public void setLayoutSize(String layoutSize) {
+		getContent().layoutSize = layoutSize;
+		save();
+	}
 }

framework/src/main/java/org/toop/framework/settings/Settings.java

@@ -1,9 +1,9 @@
 package org.toop.framework.settings;
 
-import java.util.Locale;
-
 public class Settings {
     public boolean fullScreen = false;
     public String locale = "en";
+	public String theme = "dark";
+	public String layoutSize = "medium";
     public int volume = 15;
 }