Add light theme
This commit is contained in:
parent
10612480b9
commit
a299221be4
|
|
@ -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());
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue