diff --git a/README.md b/README.md
index 93b6db0..e64e6ec 100644
--- a/README.md
+++ b/README.md
@@ -34,4 +34,5 @@ Probably tastes better than any Apple editor and NetBeans combined.
- [FXMisc/RichTextFX](https://github.com/FXMisc/RichTextFX) -> Library for handling rich text and line numbers
- [richtextfx-demos](https://github.com/FXMisc/RichTextFX/blob/master/richtextfx-demos/README.md) -> Examples and demos of how to use RichTextFX, including [Java Keywords Demo](https://github.com/FXMisc/RichTextFX/blob/master/richtextfx-demos/src/main/java/org/fxmisc/richtext/demo/JavaKeywordsAsyncDemo.java)
- [Pixabay/311788](https://pixabay.com/vectors/bananas-fruits-pair-yellow-bananas-311788/) -> Banana logo
-- [Guava Event Bus](https://github.com/google/guava/wiki/EventBusExplained) -> Library for handling communication between controllers
\ No newline at end of file
+- [Guava Event Bus](https://github.com/google/guava/wiki/EventBusExplained) -> Library for handling communication between controllers
+- [JFX Moderna](https://github.com/openjdk/jfx/blob/master/modules/javafx.controls/src/main/resources/com/sun/javafx/scene/control/skin/modena/modena.css) - CSS reference
\ No newline at end of file
diff --git a/src/main/java/app/Main.java b/src/main/java/app/Main.java
index f2ee58e..0b38f26 100644
--- a/src/main/java/app/Main.java
+++ b/src/main/java/app/Main.java
@@ -42,6 +42,9 @@ public class Main extends Application {
}
Scene scene = new Scene(document);
+
+ scene.getStylesheets().add(getClass().getResource("/styling/app.css").toExternalForm());
+
window.setScene(scene);
window.show();
}
diff --git a/src/main/resources/fxml/components/Filetree.fxml b/src/main/resources/fxml/components/Filetree.fxml
index 5847a77..b02c3a5 100644
--- a/src/main/resources/fxml/components/Filetree.fxml
+++ b/src/main/resources/fxml/components/Filetree.fxml
@@ -6,11 +6,11 @@
+ fx:controller="app.controllers.FiletreeController"
+ fitToWidth="true"
+ fitToHeight="true">
+ fx:id="filetree"/>
\ No newline at end of file
diff --git a/src/main/resources/fxml/components/Modeline.fxml b/src/main/resources/fxml/components/Modeline.fxml
index 896c2c9..74649de 100644
--- a/src/main/resources/fxml/components/Modeline.fxml
+++ b/src/main/resources/fxml/components/Modeline.fxml
@@ -5,10 +5,11 @@
+ fx:controller="app.controllers.ModelineController"
+ alignment="CENTER_LEFT">
diff --git a/src/main/resources/styling/app.css b/src/main/resources/styling/app.css
new file mode 100644
index 0000000..d44ac07
--- /dev/null
+++ b/src/main/resources/styling/app.css
@@ -0,0 +1,216 @@
+
+* {
+ -main-fg-color: #f8f8f2;
+
+ -light-bg-color: #75715e;
+ -main-bg-color: #272822;
+ -dark-bg-color: #1a1b17;
+ -shadow-bg-color: #0d0e0b;
+
+ -main-red-color: #f92672;
+ -main-green-color: #a6e22e;
+ -main-yellow-color: #f4bf75;
+ -main-blue-color: #66d9ef;
+ -main-magenta-color: #ae81ff;
+ -main-cyan-color: #a1efe4;
+}
+
+.root {
+ /* -fx-font-family: "Roboto"; */
+ -fx-background-color: -dark-bg-color;
+}
+
+/* --------------------------------- Colors --------------------------------- */
+
+.red-text {
+ -fx-text-fill: -main-red-color
+}
+
+.green-text {
+ -fx-text-fill: -main-red-color
+}
+
+.yellow-text {
+ -fx-text-fill: -main-red-color
+}
+
+.blue-text {
+ -fx-text-fill: -main-red-color
+}
+
+.magenta-text {
+ -fx-text-fill: -main-red-color
+}
+
+.cyan-text {
+ -fx-text-fill: -main-red-color
+}
+
+.gray-text {
+ -fx-text-fill: -light-bg-color
+}
+
+/* --------------------------------- Menubar -------------------------------- */
+
+.menu-bar {
+ -fx-padding: 0 20;
+}
+
+.context-menu {
+ /* -fx-skin: "com.sun.javafx.scene.control.skin.ContextMenuSkin"; */
+ -fx-background-color: -dark-bg-color;
+ -fx-padding: 2 2;
+
+}
+
+.menu-bar, .menu-item-separator{
+ -fx-background-color: -dark-bg-color;
+ -fx-text-fill: -main-fg-color;
+}
+
+.menu, .menu-item{
+ -fx-background-color: -main-bg-color;
+ -fx-text-fill: -main-fg-color;
+}
+
+.menu-item:focused {
+ -fx-background-color: -main-blue-color;
+}
+
+/* Menuitems visible in top of window */
+
+.menu-bar > * > .menu {
+ -fx-background-color: -dark-bg-color;
+}
+
+.menu-bar > * > .menu:hover {
+ -fx-background-color: -main-bg-color;
+}
+
+/* -------------------------------- SplitPane ------------------------------- */
+
+.split-pane:horizontal {
+ -fx-padding: 10 20 0 20;
+ -fx-background-insets: 10 0 0 0;
+ -fx-background-color: -dark-bg-color;
+}
+
+.split-pane:horizontal > .split-pane-divider {
+ -fx-background-color: -dark-bg-color;
+ -fx-padding: 0 5;
+}
+
+/* ------------------------------- ScrollPane ------------------------------- */
+
+/* https://stackoverflow.com/questions/41804373/javafx-scrollpane-styling */
+
+.scroll-pane {
+ -fx-background-color: -dark-bg-color;
+}
+
+.scroll-bar:horizontal, .scroll-bar:vertical{
+ -fx-background-color: -dark-bg-color;
+}
+
+.increment-button, .decrement-button {
+ -fx-background-color: transparent;
+ -fx-border-color: transparent;
+}
+
+.scroll-bar:horizontal .track,
+.scroll-bar:vertical .track{
+ -fx-background-color: transparent;
+ -fx-border-color: transparent;
+ -fx-background-radius: 0em;
+}
+
+.scroll-bar:horizontal .thumb,
+.scroll-bar:vertical .thumb {
+ -fx-background-color: white;
+ -fx-background-radius: 5em;
+}
+
+* > .corner {
+ -fx-background-color: -dark-bg-color;
+}
+
+.scroll-pane > .viewport {
+ -fx-background-color: transparent;
+ -fx-effect: innershadow(gaussian, -shadow-bg-color, 10, 0.2, -2, 0);
+}
+
+.scroll-pane {
+ -fx-background-color: transparent;
+}
+
+/* -------------------------------- Filetree -------------------------------- */
+
+.tree-view {
+ -fx-background-color: -main-bg-color;
+ -fx-border-style: none;
+ -fx-background-radius: 20px;
+}
+
+.tree-view .tree-cell {
+ -fx-background-color: transparent;
+ -fx-text-fill: -main-fg-color;
+}
+
+.tree-view:focused .tree-cell:focused {
+ -fx-background-color: -main-blue-color;
+}
+
+.tree-cell:filled:selected{
+ -fx-background-color: transparent;
+ -fx-border-color: -main-blue-color;
+ -fx-border-width: 3;
+}
+
+/* --------------------------------- Editor --------------------------------- */
+
+.code-area .text {
+ -fx-fill: -main-fg-color;
+}
+
+.code-area {
+ -fx-font-family: "Fira Code";
+ -fx-font-size: 16;
+ -fx-color: -main-fg-color;
+ -fx-text-fill: -main-fg-color;
+ -fx-background-color: -main-bg-color;
+ -fx-background-radius: 20px;
+ -fx-effect: innershadow(gaussian, -shadow-bg-color, 10, 0.2, -2, 0);
+}
+
+.caret {
+ -fx-stroke: -main-fg-color;
+}
+
+.lineno {
+ -fx-background-color: -light-bg-color;
+ -fx-text-fill: -main-fg-color;
+ -fx-font-size: 16;
+ -fx-padding: 0 15 0 5;
+ -fx-background-insets: 0 10 0 0;
+}
+
+/* -------------------------------- Modeline -------------------------------- */
+
+#modeline {
+ -fx-padding: 0 20;
+}
+
+#modeline .label {
+ -fx-font-size:15;
+ -fx-border-insets: 0 10;
+ -fx-background-insets: 0 10;
+ -fx-padding: 2 20;
+ -fx-background-radius: 10px;
+ -fx-background-color: -light-bg-color;
+}
+
+/* ---------------------------------- Misc ---------------------------------- */
+
+.label {
+ -fx-text-fill: -main-fg-color;
+}
\ No newline at end of file