Add light theme

This commit is contained in:
Oystein Kristoffer Tveit 2021-02-23 17:51:28 +01:00
parent 10612480b9
commit a299221be4
3 changed files with 237 additions and 1 deletions

View File

@ -48,7 +48,7 @@ public class Main extends Application {
private void applyCSS() { private void applyCSS() {
scene.getStylesheets().add( scene.getStylesheets().add(
getClass().getResource("/styling/app.css").toExternalForm()); getClass().getResource("/styling/themes/monokai.css").toExternalForm());
} }
/** /**

View File

@ -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;
}