Merge pull request #3891 from JabRef/darkTheme

Dark theme
JabRef · Apr 7, 2018 · 439530a · 439530a
2 parents 8d61241 + d9bccf8
commit 439530a
Show file tree

Hide file tree

Showing 9 changed files with 398 additions and 282 deletions.
diff --git a/src/main/java/org/jabref/gui/Main.css → src/main/java/org/jabref/gui/Base.css b/src/main/java/org/jabref/gui/Main.css → src/main/java/org/jabref/gui/Base.css
diff --git a/src/main/java/org/jabref/gui/Dark.css b/src/main/java/org/jabref/gui/Dark.css
@@ -0,0 +1,52 @@
+.root {
+    -jr-theme: #2c9490;
+    -jr-accent: #255652;
+    -jr-selected: -jr-accent;
+    -jr-hover: #fff1;
+
+
+    -jr-red: #b71c1f;
+    -jr-light-red: #db1d2b;
+    -jr-green: #1cb631;
+    -jr-light-green: #28d93c;
+    -jr-blue: #2c2cb7;
+    -jr-light-blue: #3a3ad9;
+    -jr-purple: #b72486;
+    -jr-light-purple: #d927a8;
+    -jr-yellow: #b5b021;
+    -jr-orange: #b77620;
+
+    -jr-base: #141824;
+
+    -jr-background-alt: #151924;
+    -jr-menu-background: #141824;
+    -jr-toolbar: -jr-menu-background;
+    -jr-sidepane-background: #212330;
+    -jr-search-background: #2c2e3b;
+
+    -jr-sidepane-header-background: -jr-background-alt;
+    -jr-group-hits-bg: -jr-background-alt;
+    -jr-group-hits-fg: -fx-light-text-color;
+    -fx-control-inner-background: #272b38;
+
+    -fx-control-inner-background-alt: -fx-control-inner-background;
+
+    -fx-dark-text-color: black;
+    -fx-mid-text-color: #7d8591;
+    -fx-light-text-color: #9aa3af;
+    -jr-separator: #333744;
+    -fx-outer-border: #424758;
+
+    -jr-icon: -fx-light-text-color;
+    -jr-icon-active: derive(-fx-light-text-color, 50%);
+    -jr-icon-background-active: -jr-hover;
+    -jr-icon-background-armed: #fff2;
+
+    -jr-menu-foreground: -fx-light-text-color;
+    -jr-menu-item-foreground: -fx-light-text-color;
+    -jr-menu-forground-active: derive(-fx-light-text-color, 50%);
+
+    -fx-focused-text-base-color: -fx-dark-text-color;
+
+    -jr-tooltip-fg: derive(-fx-light-text-color, 50%);
+}
diff --git a/src/main/java/org/jabref/gui/actions/ActionFactory.java b/src/main/java/org/jabref/gui/actions/ActionFactory.java
@@ -57,7 +57,7 @@ public Menu createSubMenu(Action action, MenuItem... children) {
 
     public Button createIconButton(Action action, Command command) {
         Button button = ActionUtils.createButton(new JabRefAction(action, command, keyBindingRepository), ActionUtils.ActionTextBehavior.HIDE);
-        button.getStyleClass().add("flatButton");
+        button.getStyleClass().setAll("flatButton");
 
         // For some reason the graphic is not set correctly, so let's fix this
         button.graphicProperty().unbind();

diff --git a/src/main/java/org/jabref/gui/entryeditor/EntryEditor.css b/src/main/java/org/jabref/gui/entryeditor/EntryEditor.css
@@ -1,21 +1,11 @@
-.text-area {
-    /*-fx-text-fill: text-area-foreground;*/
-    /*-fx-control-inner-background: text-area-background;*/
-}
-
-.text-area *.text {
-    -fx-alignment: center-left;
-}
-
 .editorPane {
     -fx-hgap: 10;
     -fx-vgap: 6;
-    /*-fx-background-color: -jr-white;*/
+    -fx-background-color: -fx-control-inner-background;
     -fx-padding: 5 5 5 15;
 }
 
 .date-picker > .date-picker-display-node {
-    /*-fx-text-fill: text-area-foreground;*/
     -fx-text-origin: baseline;
 }
 
@@ -24,14 +14,9 @@
 }
 
 .combo-box > *.text {
-    /*-fx-text-fill: text-area-foreground;*/
     -fx-text-origin: baseline;
 }
 
-.list-cell:odd {
-    /*-fx-background: text-area-background;*/
-}
-
 /* Selected rows */
 .list-view:focused > .virtual-flow > .clipped-container > .sheet > .list-cell:filled:selected,
 .tree-view:focused > .virtual-flow > .clipped-container > .sheet > .tree-cell:filled:selected,
@@ -64,14 +49,15 @@
     -fx-padding: 0.1em;
     -fx-font-size: 1.166667em;
     -fx-font-weight: bold;
-    -fx-text-fill: -jr-icon;
+    -fx-text-fill: -jr-theme-text;
 }
 
 #typeLabel:hover {
     -fx-padding: 0.1em;
     -fx-font-size: 1.166667em;
     -fx-font-weight: bold;
-    -fx-text-fill: derive(-jr-icon, -30%);
+    -fx-background-color: -jr-icon-background-active;
+
 }
 
 .flatButton.narrow {
@@ -86,39 +72,26 @@
     -fx-padding: -0.2em 0.1em 0.1em 0.1em;
 }
 
-/*.flatButton .glyph-icon, .flatButtonNoSpaceTop .glyph-icon, .flatButtonNoSpaceBottom .glyph-icon {*/
-    /*-fx-fill: -jr-icon;*/
-/*}*/
-
-/*.flatButton .glyph-icon:hover, .flatButtonNoSpaceTop .glyph-icon:hover, .flatButtonNoSpaceBottom .glyph-icon:hover {*/
-    /*-fx-fill: derive(-jr-icon, -30%);*/
-    /*-fx-effect: dropshadow(one-pass-box, -jr-icon, 5, 0, 1, 1);*/
-/*}*/
-
 .editorPane .glyph-icon {
     -glyph-size: 16px;
 }
 
 
 .tool-bar {
-    /*-fx-background-color: -jr-toolbar;*/
+    -fx-background-color: -jr-background-alt;
     -fx-background-insets: 0;
-    /*-fx-border-color: -jr-gray-1;*/
-    /*-fx-border-width: 1 1 1 1;*/
-    /*-fx-border-radius: 2 2 2 2;*/
-    /*-fx-background-radius: 2 2 2 2;*/
-    /*-fx-text-fill: -jr-icon;*/
-    /*-fx-fill: -jr-icon;*/
 }
 
 
 .tool-bar > .container > .separator {
-    /*-fx-background-color: -jr-separator;*/
+    -fx-background-color: -jr-separator;
 }
 
 .tool-bar .glyph-icon {
     -glyph-size: 16px;
     -fx-font-size: 2em;
+    -fx-fill: -jr-theme-text;
+    -fx-text-fill: -jr-theme-text;
 }
 
 .warning-icon {
@@ -137,3 +110,7 @@
 .tooltip-error {
     -fx-background-color: -jr-error;
 }
+
+.code-area .text {
+    -fx-fill: -fx-text-background-color;
+}
diff --git a/src/main/java/org/jabref/gui/errorconsole/ErrorConsole.css b/src/main/java/org/jabref/gui/errorconsole/ErrorConsole.css
@@ -1,35 +1,28 @@
 .list-content {
-	-fx-padding: 10.0px;
-}
-
-.list-cell:default {
-	-fx-background-color: white;
+	-fx-padding: 10px;
 }
 
 .info-section {
-	-fx-padding: 10.0px;
+	-fx-padding: 10px;
+    -fx-background-color: -fx-background;
 }
 
-.info-section .icon {
-	-fx-font-size: 48.0;
+.info-section .glyph-icon {
+	-fx-font-size: 24.0;
+    -fx-fill: -jr-icon
 }
 
-.exception{
-    -fx-text-fill: -fx-negative;
+.exception .glyph-icon {
+    -fx-font-size: 18.0;
+    -fx-fill: -jr-error;
 }
 
-.exception .icon {
-	-fx-fill: -fx-negative;
-}
-
-.log {
-    -fx-text-fill: -fx-info;
-}
 
-.log .icon {
-	-fx-fill: -fx-info;
+.log .glyph-icon {
+    -fx-font-size: 18.0;
+    -fx-fill: -jr-info;
 }
 
 .custom-buttons {
-	-fx-padding: 5.0px;
+	-fx-padding: 5px;
 }
diff --git a/src/main/java/org/jabref/gui/groups/GroupTree.css b/src/main/java/org/jabref/gui/groups/GroupTree.css
@@ -4,7 +4,6 @@
 }
 
 .tree-table-cell {
-    /*-fx-font-size: 105%;*/
     -fx-padding: 0.35em 0em 0.25em 0em;
 }
 
@@ -14,13 +13,17 @@
 }
 
 .numberColumn > .hits {
-    /*-fx-font-size: 85%;*/
+    -fx-font-size: 85%;
     -fx-background-color: -jr-group-hits-bg;
     -fx-padding: 0.1em 0.4em 0.1em 0.4em;
     -fx-background-insets: 0;
     -fx-background-radius: 0.8em;
 }
 
+.numberColumn > .hits .text {
+    -fx-fill: -jr-group-hits-fg;
+}
+
 .numberColumn > .hits:any-selected {
     -fx-background-color: derive(-jr-green, 70%);
 }
@@ -61,7 +64,7 @@
 
 .tree-table-row-cell:root {
     -fx-border-width: 0 0 1 0;
-    -fx-border-color: -fx-outer-border;
+    -fx-border-color: -jr-separator;
 }
 
 .tree-table-row-cell:root > .tree-table-cell {
@@ -76,10 +79,6 @@
     -fx-padding: 0.45em 0.2em 0.45em 0.2em;
 }
 
-/*.tree-table-row-cell:selected > .tree-table-cell > .tree-disclosure-node > .arrow {*/
-    /*-fx-background-color: -jr-white;*/
-/*}*/
-
 .tree-table-row-cell:empty {
     -fx-background-color: transparent; /* hide cells which are not bound to a group */
 }
@@ -90,6 +89,7 @@
 }
 
 .tree-table-row-cell > .tree-table-cell > .tree-disclosure-node > .arrow {
+    -fx-background-color: -fx-mid-text-color;
     -fx-max-height: 0.5em;
     -fx-max-width: 0.5em;
     -fx-padding: 0.333333em 0.229em 0.333333em 0.229em; /* 4 */
@@ -105,12 +105,12 @@
 }
 
 #barBottom {
-    -fx-border-color: -fx-outer-border;
-    -fx-border-width: 0 0 1 0;
+    -fx-background-color: -jr-sidepane-header-background;
+    -fx-border-color: -jr-separator;
+    -fx-border-width: 1 0 0 0;
     -fx-padding: 0em 1em 0em 1em;
 }
 
 #barBottom .glyph-icon {
-    -fx-fill: -jr-icon;
     -fx-font-size: 2em;
 }
diff --git a/src/main/java/org/jabref/gui/icon/IconTheme.java b/src/main/java/org/jabref/gui/icon/IconTheme.java
@@ -288,7 +288,7 @@ public enum JabRefIcons implements JabRefIcon {
         BLOG(MaterialDesignIcon.RSS), /* css: rss */
         GLOBAL_SEARCH(MaterialDesignIcon.EARTH), /* css: earth */
         DATE_PICKER(MaterialDesignIcon.CALENDAR), /* css: calendar */
-        DEFAULT_GROUP_ICON_COLORED(MaterialDesignIcon.MENU_RIGHT),
+        DEFAULT_GROUP_ICON_COLORED(MaterialDesignIcon.PLAY),
         DEFAULT_GROUP_ICON(MaterialDesignIcon.LABEL_OUTLINE),
         ALL_ENTRIES_GROUP_ICON(DefaultGroupsFactory.ALL_ENTRIES_GROUP_DEFAULT_ICON),
         IMPORT_EXPORT(MaterialDesignIcon.SWAP_VERTICAL),

diff --git a/src/main/java/org/jabref/gui/maintable/MainTable.css b/src/main/java/org/jabref/gui/maintable/MainTable.css
@@ -1,53 +1,3 @@
-.table-view {
-    -fx-border-width: 0;
-    -fx-padding: 0;
-    -fx-border-insets: 0;
-    -fx-table-cell-border-color: transparent;
-    /*-fx-background-color: -jr-foreground;*/
-}
-
-.table-view .column-header-background {
-    -fx-background-color: -fx-control-inner-background;
-    -fx-border-width: 0 0 1 0;
-    -fx-border-color: -fx-background;
-}
-
-.table-view .column-header-background:hover {
-    -fx-background-color: derive(-fx-control-inner-background, -10%);
-}
-
-
-.table-view .column-header,
-.table-view .filler {
-    -fx-background-color: transparent, -fx-control-inner-background;
-    -fx-background-insets: 0, 0 0.02em 0 0.02em;
-    -fx-font-weight: bold;
-    -fx-size: 3em;
-    -fx-border-width: 0 0 1 0;
-    /*-fx-border-color: -jr-separator;*/
-}
-
-.table-view .column-header > .label {
-    -fx-padding: 0 1em 0 1em;
-    -fx-alignment: center-left;
-    -fx-text-fill: -jr-theme;
-}
-
-.table-view .column-header .glyph-icon {
-    -fx-alignment: baseline-center;
-    -fx-text-fill: -jr-icon;
-    -fx-fill: -jr-icon;
-}
-
-.table-cell {
-    -fx-padding: 0.5em 1em 0.5em 1em;
-    -fx-cell-size: 4.0em;
-}
-
-/*.table-row-cell:odd {*/
-    /*-fx-background: derive(-jr-foreground, -2%);*/
-/*}*/
-
 .column-icon {
     -fx-alignment: baseline-center;
     -fx-padding: 0;