From a299221be43f8fe0dcf6870e9611b09b91389bd2 Mon Sep 17 00:00:00 2001 From: h7x4 Date: Tue, 23 Feb 2021 17:51:28 +0100 Subject: [PATCH] Add light theme --- src/main/java/app/Main.java | 2 +- .../styling/{app.css => themes/monokai.css} | 0 .../styling/themes/solarized-light.css | 236 ++++++++++++++++++ 3 files changed, 237 insertions(+), 1 deletion(-) rename src/main/resources/styling/{app.css => themes/monokai.css} (100%) create mode 100644 src/main/resources/styling/themes/solarized-light.css diff --git a/src/main/java/app/Main.java b/src/main/java/app/Main.java index cfe61cd..c3bdf6e 100644 --- a/src/main/java/app/Main.java +++ b/src/main/java/app/Main.java @@ -48,7 +48,7 @@ public class Main extends Application { private void applyCSS() { scene.getStylesheets().add( - getClass().getResource("/styling/app.css").toExternalForm()); + getClass().getResource("/styling/themes/monokai.css").toExternalForm()); } /** diff --git a/src/main/resources/styling/app.css b/src/main/resources/styling/themes/monokai.css similarity index 100% rename from src/main/resources/styling/app.css rename to src/main/resources/styling/themes/monokai.css diff --git a/src/main/resources/styling/themes/solarized-light.css b/src/main/resources/styling/themes/solarized-light.css new file mode 100644 index 0000000..3f2714c --- /dev/null +++ b/src/main/resources/styling/themes/solarized-light.css @@ -0,0 +1,236 @@ + +* { + -main-fg-color: #002b36; + + -main-bg-color: #eee8d5; + -light-bg-color: #dfd6e3; + -dark-bg-color: #93a1a1; + -shadow-bg-color: #c5bec9; + + -main-red-color: #dc322f; + -main-green-color: #859900; + -main-yellow-color: #b58900; + -main-blue-color: #268bd2; + -main-magenta-color: #d33682; + -main-cyan-color: #2aa198; + + -banana-focus-color: #fffb00; +} + +.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 > * > .arrow { + -fx-background-color: -main-fg-color; +} + +.menu-item:focused { + -fx-background-color: -banana-focus-color; + -fx-text-fill: -dark-bg-color; +} + +.menu-item:focused .label { + -fx-text-fill: -dark-bg-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: -banana-focus-color; + -fx-text-fill: -dark-bg-color; +} + +.tree-cell > .tree-disclosure-node > .arrow { + -fx-background-color: -main-fg-color; +} + +.tree-view:focused .tree-cell:focused > .tree-disclosure-node > .arrow { + -fx-background-color: -dark-bg-color; +} + +.tree-cell:filled:selected{ + -fx-background-color: transparent; + -fx-border-color: -banana-focus-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