diff --git a/desktop/src/main/java/bisq/desktop/app/BisqApp.java b/desktop/src/main/java/bisq/desktop/app/BisqApp.java index 9add903ad5b..640d34c848f 100644 --- a/desktop/src/main/java/bisq/desktop/app/BisqApp.java +++ b/desktop/src/main/java/bisq/desktop/app/BisqApp.java @@ -30,6 +30,7 @@ import bisq.desktop.main.overlays.windows.SendAlertMessageWindow; import bisq.desktop.main.overlays.windows.ShowWalletDataWindow; import bisq.desktop.util.ImageUtil; +import bisq.desktop.util.CssTheme; import bisq.core.alert.AlertManager; import bisq.core.app.AppOptionKeys; @@ -175,10 +176,7 @@ public void handleUncaughtException(Throwable throwable, boolean doShutDown) { if (scene == null) { log.warn("Scene not available yet, we create a new scene. The bug might be caused by an exception in a constructor or by a circular dependency in Guice. throwable=" + throwable.toString()); scene = new Scene(new StackPane(), 1000, 650); - scene.getStylesheets().setAll( - "/bisq/desktop/theme-light.css", - "/bisq/desktop/bisq.css", - "/bisq/desktop/images.css"); + CssTheme.loadSceneStyles(scene, CssTheme.CSS_THEME_LIGHT); stage.setScene(scene); stage.show(); } @@ -231,23 +229,13 @@ private Scene createAndConfigScene(MainView mainView, Injector injector) { addSceneKeyEventHandler(scene, injector); - loadSceneStyles(scene, injector); - injector.getInstance(Preferences.class).getCssThemeProperty().addListener((ov) -> { - loadSceneStyles(scene, injector); + Preferences preferences = injector.getInstance(Preferences.class); + preferences.getCssThemeProperty().addListener((ov) -> { + CssTheme.loadSceneStyles(scene, preferences.getCssTheme()); }); - return scene; - } + CssTheme.loadSceneStyles(scene, preferences.getCssTheme()); - private void loadSceneStyles(Scene scene, Injector injector) { - Boolean useDarkMode = (injector.getInstance(Preferences.class).getCssTheme() == 1); - String colorSheet = "/bisq/desktop/theme-light.css"; - if (useDarkMode) - colorSheet = "/bisq/desktop/theme-dark.css"; - scene.getStylesheets().setAll( - "/bisq/desktop/bisq.css", - "/bisq/desktop/images.css", - "/bisq/desktop/CandleStickChart.css", - colorSheet); // load theme last to override CSS colors + return scene; } private void setupStage(Scene scene) { diff --git a/desktop/src/main/java/bisq/desktop/bisq.css b/desktop/src/main/java/bisq/desktop/bisq.css index 7d3415a25f6..b6f7790ede6 100644 --- a/desktop/src/main/java/bisq/desktop/bisq.css +++ b/desktop/src/main/java/bisq/desktop/bisq.css @@ -485,20 +485,20 @@ tree-table-view:focused { } .scroll-bar { - -fx-background-color: transparent; + -fx-background-color: -bs-background-color; -fx-background-radius: 0; } .scroll-bar:horizontal .track, .scroll-bar:vertical .track { - -fx-background-color: transparent; - -fx-border-color: transparent; + -fx-background-color: -bs-background-color; + -fx-border-color: -bs-background-color; -fx-background-radius: 0; } .scroll-bar:vertical .track-background, .scroll-bar:horizontal .track-background { - -fx-background-color: transparent; + -fx-background-color: -bs-background-color; -fx-background-insets: 0; -fx-background-radius: 0; } @@ -522,14 +522,14 @@ tree-table-view:focused { .scroll-bar:horizontal .thumb:pressed, .scroll-bar:vertical .thumb:pressed { - -fx-background-color: -bs-color-gray-ccc; + -fx-background-color: -bs-color-gray-ddd; } .scroll-bar:vertical .increment-button, .scroll-bar:vertical .decrement-button, .scroll-bar:horizontal .increment-button, .scroll-bar:horizontal .decrement-button { - -fx-background-color: transparent; + -fx-background-color: -bs-background-color; -fx-padding: 1; } @@ -538,12 +538,12 @@ tree-table-view:focused { .scroll-bar:horizontal .decrement-arrow, .scroll-bar:vertical .decrement-arrow { -fx-shape: null; - -fx-background-color: transparent; + -fx-background-color: -bs-background-color; } .scroll-bar:vertical:focused, .scroll-bar:horizontal:focused { - -fx-background-color: transparent, -bs-color-darkest, -bs-color-gray-6; + -fx-background-color: -bs-background-color, -bs-color-gray-ccc, -bs-color-gray-ddd; } /* Behavior */ @@ -1028,8 +1028,8 @@ textfield */ } .delete:hover { - -fx-text-fill: -bs-rd-black; - -fx-fill: -bs-rd-black; + -fx-text-fill: -bs-text-color; + -fx-fill: -bs-text-color; } /******************************************************************************* @@ -1250,7 +1250,7 @@ textfield */ .combo-box-editor-bold { -fx-font-weight: bold; -fx-padding: 5 8 5 8 !important; - -fx-text-fill: -bs-rd-black; + -fx-text-fill: -bs-text-color; -fx-font-family: "IBM Plex Sans Medium"; } @@ -1301,7 +1301,7 @@ textfield */ /* Account setup */ #wizard-item-background-deactivated { - -fx-body-color: linear-gradient(to bottom, -bs-color-gray-1, -bs-color-gray-1); + -fx-body-color: linear-gradient(to bottom, -bs-content-background-gray, -bs-color-gray-aaa); -fx-outer-border: linear-gradient(to bottom, -bs-background-gray, -bs-color-gray-3); -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, @@ -1312,7 +1312,7 @@ textfield */ } #wizard-item-background-active { - -fx-body-color: linear-gradient(to bottom, -bs-color-gray-0, -bs-color-gray-1); + -fx-body-color: linear-gradient(to bottom, -bs-bg-gray-5, -bs-color-gray-6); -fx-outer-border: linear-gradient(to bottom, -bs-color-blue-1, -bs-color-blue-2); -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, @@ -1323,7 +1323,7 @@ textfield */ } #wizard-item-background-completed { - -fx-body-color: linear-gradient(to bottom, -bs-color-gray-1, -bs-color-gray-1); + -fx-body-color: linear-gradient(to bottom, -bs-content-background-gray, -bs-color-gray-aaa); -fx-outer-border: linear-gradient(to bottom, -bs-bg-green, -bs-color-green-2); -fx-background-color: -fx-shadow-highlight-color, -fx-outer-border, @@ -1523,7 +1523,7 @@ textfield */ * * ******************************************************************************/ .grid-pane { - -fx-background-color: -bs-background-gray; + -fx-background-color: -bs-content-background-gray; -fx-background-radius: 5; -fx-effect: null; -fx-effect: dropshadow(gaussian, -bs-color-gray-10, 10, 0, 0, 0); diff --git a/desktop/src/main/java/bisq/desktop/main/portfolio/pendingtrades/PendingTradesView.java b/desktop/src/main/java/bisq/desktop/main/portfolio/pendingtrades/PendingTradesView.java index fcb995b266a..bbe3ec78813 100644 --- a/desktop/src/main/java/bisq/desktop/main/portfolio/pendingtrades/PendingTradesView.java +++ b/desktop/src/main/java/bisq/desktop/main/portfolio/pendingtrades/PendingTradesView.java @@ -27,6 +27,7 @@ import bisq.desktop.main.overlays.popups.Popup; import bisq.desktop.main.overlays.windows.TradeDetailsWindow; import bisq.desktop.util.FormBuilder; +import bisq.desktop.util.CssTheme; import bisq.core.alert.PrivateNotificationManager; import bisq.core.app.AppOptionKeys; @@ -392,9 +393,7 @@ private void openChat(Trade trade) { }); Scene scene = new Scene(pane); - scene.getStylesheets().setAll("/bisq/desktop/theme-light.css", - "/bisq/desktop/bisq.css", - "/bisq/desktop/images.css"); + CssTheme.loadSceneStyles(scene, preferences.getCssTheme()); scene.addEventHandler(KeyEvent.KEY_RELEASED, ev -> { if (ev.getCode() == KeyCode.ESCAPE) { ev.consume(); diff --git a/desktop/src/main/java/bisq/desktop/theme-dark.css b/desktop/src/main/java/bisq/desktop/theme-dark.css index dbbf7b23e3e..e3b2b7bd864 100644 --- a/desktop/src/main/java/bisq/desktop/theme-dark.css +++ b/desktop/src/main/java/bisq/desktop/theme-dark.css @@ -1,26 +1,50 @@ .root { + /* javafx main color palette */ + -fx-base: #222222; + -fx-background: #2e2e31; + -fx-control-inner-background: #1d1d21; + -fx-dark-text-color: #dadada; + -fx-mid-text-color: #cacaca; + -fx-light-text-color: #bababa; + -fx-text-fill: #cfcfcf; + + /* javafx elements */ + -fx-accent: #25b135; + -fx-box-border: #1d1d21; + -fx-focus-color: #2ea33c; + -fx-faint-focus-color: rgba(11, 76, 96, 0.13); + -fx-selection-bar: #1a6e1e; + -fx-selection-bar-non-focused: #2a7e2e; + -fx-default-button: derive(-fx-accent, 95%); + + /* bisq main colors */ -bs-color-primary: #25b135; -bs-color-primary-dark: #2ea33c; - -bs-text-color: #cfcfcf; + -bs-text-color: #bfbfbf; -bs-background-color: #2e2e31; -bs-background-gray: #1d1d21; -bs-content-background-gray: #242424; + + /* fifty shades of gray */ -bs-color-gray-13: #bbb; -bs-color-gray-11: #f2f2f2; -bs-color-gray-10: #cfcecf; -bs-color-gray-6: #afaeb0; - -bs-color-gray-5: #212627; + -bs-color-gray-5: #424242; -bs-color-gray-4: #929293; -bs-color-gray-3: #7b7b7c; -bs-color-gray-2: #504f52; -bs-color-gray-1: #2e2e31; -bs-color-gray-0: #1d1d21; - -bs-color-gray-dim: dimgray; + -bs-color-gray-dim: #aaaaaa; -bs-color-gray-ddd: #444444; -bs-color-gray-ccc: #7a7a7a; - -bs-color-gray-bbb: #6a6a6a; + -bs-color-gray-bbb: #5a5a5a; -bs-color-gray-aaa: #2e2e31; - -bs-color-gray-fafa: #fafafa; + -bs-color-gray-fafa: #0a0a0a; + -bs-color-gray-background: #2e2e31; + + /* lesser used colors */ -bs-color-blue-5: #0a4576; -bs-color-blue-4: #57acc9; -bs-color-blue-3: #9bbdc9; @@ -40,40 +64,48 @@ -bs-bg-green: #99ba9c; -bs-rd-green: #25B135; -bs-rd-green-dark: #3EA34A; + + /* other element styling */ -bs-rd-nav-selected: #25b135; - -bs-rd-nav-deselected: rgba(46, 46, 49, 0.59); + -bs-rd-nav-deselected: #1d1d21; -bs-rd-nav-background: #2ea33c; -bs-rd-nav-primary-background: #25b135; -bs-rd-nav-primary-border: #44a750; -bs-rd-nav-border: #2e2e31; -bs-rd-nav-border-color: rgba(46, 46, 49, 0.31); -bs-rd-tab-border: #111; + -bs-tab-content-area: #111; - -bs-color-gray-background: #2e2e31; -bs-content-pane-bg-top: #1d1d21; -bs-content-pane-bg-bottom: #2e2e31; -bs-scroll-pane-background: transparent; -bs-tab-content-area: transparent; -bs-viewport-background: transparent; + -bs-footer-pane-background: #2e2e31; -bs-footer-pane-text: #cfcecf; -bs-footer-pane-line: #2e2e31; - -bs-rd-font-balance: #929293; - -bs-rd-font-dark-gray: #7b7b7c; - -bs-rd-font-dark: #afaeb0; - -bs-rd-font-light: #cfcecf; - -bs-rd-font-lighter: #f2f2f2; + + -bs-rd-font-balance: #bbbbbb; + -bs-rd-font-dark-gray: #d4d4d4; + -bs-rd-font-dark: #cccccc; + -bs-rd-font-light: #b4b4b4; + -bs-rd-font-lighter: #a0a0a0; + -bs-rd-font-confirmation-label: #504f52; - -bs-rd-font-balance-label: #504f52; + -bs-rd-font-balance-label: #999999; + -bs-text-color-transparent-dark: rgba(29, 29, 33, 0.54); -bs-text-color-transparent: rgba(29, 29, 33, 0.2); -bs-color-gray-line: #504f52; + -bs-rd-separator: #444444; -bs-rd-separator-dark: #222222; -bs-rd-error-red: #d83431; -bs-rd-message-bubble: #2cadaf; - -bs-toggle-selected: #504f52; -bs-rd-tooltip-truncated: #afaeb0; + + -bs-toggle-selected: #25b135; -bs-warning: #db6300; -bs-buy: #2ea33c; -bs-buy-focus: black; @@ -83,32 +115,19 @@ -bs-sell-focus: #090202; -bs-sell-hover: #b42522; -bs-sell-transparent: rgba(216, 52, 49, 0.3); - -bs-volume-transparent: rgba(37, 177, 54, 0.3); + -bs-volume-transparent: rgba(37, 177, 54, 0.5); -bs-candle-stick-average-line: rgba(21, 188, 29, 0.8); -bs-candle-stick-loss: #ee6563; -bs-candle-stick-won: #15bc1d; -bs-cancel: #1d1d21; -bs-cancel-focus: black; -bs-cancel-hover: #050506; - -fx-accent: #2ea33c; - -fx-box-border: #1d1d21; + -bs-green-soft: derive(-bs-rd-green, 60%); -bs-red-soft: derive(-bs-rd-error-red, 60%); - -fx-focus-color: #2ea33c; - -fx-faint-focus-color: rgba(11, 76, 96, 0.13); - -fx-selection-bar: #2a7e2e; - -fx-selection-bar-non-focused: -fx-selection-bar; - -fx-default-button: white; } -.text { - -fx-fill: -bs-text-color; - -fx-text-fill: -bs-text-color; -} - -.list-view { - -fx-background-color: -bs-background-gray; -} +/* list view */ .list-view .list-cell { -fx-background-color: -bs-background-color; } @@ -118,38 +137,47 @@ .list-view .list-cell:even { -fx-background-color: derive(-bs-background-color, 5%); } -.list-view .list-cell:selected { +.list-view .list-cell:selected, +.table-view .table-cell:selected { + -fx-background: -fx-accent; -fx-background-color: -fx-selection-bar; -} -.list-view .list-cell .text { - -fx-text-fill: -bs-rd-font-dark-gray; - -fx-fill: -bs-rd-font-dark-gray; + -fx-border-color: -fx-selection-bar; } .number-column.table-cell { -fx-background-color: -bs-background-color; } -.table-view { - -fx-background-color: -bs-background-color; -} -.table-row-cell { - -fx-border-color: -bs-color-gray-1; -} -.table-view .table-cell { - -fx-background-color: -bs-background-color; +/* table view */ +.table-view, .table-cell:focused, .table-row-cell { + -fx-background: transparent; } .table-view .table-row-cell:even .table-cell { - -fx-background-color: -bs-background-color; + -fx-background-color: derive(-bs-background-color, 5%); + -fx-border-color: derive(-bs-background-color,5%); } - .table-view .table-row-cell:odd .table-cell { - -fx-background-color: derive(-bs-background-color, 5%); + -fx-background-color: derive(-bs-background-color,-5%); + -fx-border-color: derive(-bs-background-color,-5%); } -.table-view .table-row-cell:selected { +.table-view .table-row-cell:selected .table-cell { + -fx-background: -fx-accent; -fx-background-color: -fx-selection-bar; + -fx-border-color: -fx-selection-bar; +} +.table-row-cell { + -fx-border-color: -bs-background-color; +} +.table-row-cell:empty, .table-row-cell:empty:even, .table-row-cell:empty:odd { + -fx-background-color: -bs-background-color; + -fx-min-height: 36; +} +.offer-table .table-row-cell { + -fx-background: -fx-accent; + -fx-background-color: -bs-color-gray-6; } +/* tab pane */ .jfx-tab-pane .tab-content-area { -fx-background-color: -bs-tab-content-area; } @@ -158,50 +186,36 @@ -fx-background-color: -bs-viewport-background; } -.jfx-text-field { - -fx-background-color: -bs-color-gray-0; - -fx-text-fill: -bs-rd-font-dark; -} -.jfx-text-field-top-label { - -fx-text-fill: -bs-color-gray-6; +/* text field */ +.jfx-text-field, .jfx-text-area, +.jfx-combo-box, .jfx-combo-box > .list-cell { + -fx-background-color: -bs-background-color; + -fx-prompt-text-fill: -bs-color-gray-3; + -fx-text-fill: -bs-text-color; } -.jfx-text-area:readonly { - -jfx-focus-color: transparent; +.jfx-text-area:readonly, .jfx-text-field:readonly, +.hyperlink-with-icon { + -fx-background: -bs-background-color; + -fx-background-color: -bs-background-color; + -fx-prompt-text-fill: -bs-color-gray-2; + -fx-text-fill: -bs-color-gray-3; } -.jfx-text-field:readonly, .hyperlink-with-icon { - -fx-background-color: -bs-background-gray; +.jfx-combo-box > .text, +.jfx-text-field-top-label, .jfx-text-area-top-label { + -fx-text-fill: -bs-text-color; } + .input-with-border { -fx-border-color: -bs-color-gray-2; } -.jfx-button, .action-button { - -fx-background-color: -bs-color-gray-1; -} -.jfx-button:hover, .jfx-button:focused { - -fx-background-color: derive(-bs-background-gray, -10%); -} -.action-button:hover, .action-button:focused { - -fx-background-color: derive(-bs-color-primary-dark, -10%); -} -.action-button:disabled { - -fx-background-color: -bs-color-gray-2; - -fx-text-fill: -bs-rd-font-dark-gray; +.wallet-seed-words { + -fx-text-fill: -bs-color-gray-6; } + .action-button { -fx-background-color: -bs-color-primary-dark; -} - -#sell-button, #sell-button-big { - -fx-background-color: #660000 !important; -} - -#buy-button, #buy-button-big { - -fx-background-color: #006600 !important; -} - -.wallet-seed-words { - -fx-text-fill: -bs-color-gray-6; + -fx-text-fill: -fx-dark-text-color; } .chart-pane, .chart-plot-background, @@ -209,25 +223,25 @@ #charts-dao .chart-plot-background { -fx-background-color: transparent; } -.chart-horizontal-grid-lines, .chart-vertical-grid-lines { - -fx-stroke: -bs-color-gray-1; -} - -.separated-phase-bar-active { - -fx-text-fill: -fx-accent; +.axis:top, .axis:right, .axis:bottom, .axis:left { + -fx-border-color: transparent transparent transparent transparent; } - -.separated-phase-bar-inactive { - -fx-text-fill: -bs-color-primary-dark; +#charts .axis, #price-chart .axis, #volume-chart .axis, #charts-dao .axis { + -fx-tick-label-fill: -bs-color-gray-dim; } - -.jfx-badge .badge-pane .text { - -fx-fill: white; +.chart-horizontal-grid-lines, .chart-vertical-grid-lines, +.chart-horizontal-zero-line, .chart-vertical-zero-line, +.axis-tick-mark, .axis-minor-tick-mark { + -fx-stroke: -bs-color-gray-0; } +/* scrollbars */ .scroll-pane { -fx-background-color: -bs-scroll-pane-background; } +.scroll-bar { + -fx-background-color: transparent; +} .scroll-bar:horizontal .thumb:hover, .scroll-bar:vertical .thumb:hover { -fx-background-color: -bs-color-gray-5; diff --git a/desktop/src/main/java/bisq/desktop/util/CssTheme.java b/desktop/src/main/java/bisq/desktop/util/CssTheme.java new file mode 100644 index 00000000000..69d78b28223 --- /dev/null +++ b/desktop/src/main/java/bisq/desktop/util/CssTheme.java @@ -0,0 +1,52 @@ +/* + * This file is part of Bisq. + * + * Bisq is free software: you can redistribute it and/or modify it + * under the terms of the GNU Affero General Public License as published by + * the Free Software Foundation, either version 3 of the License, or (at + * your option) any later version. + * + * Bisq is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public + * License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with Bisq. If not, see . + */ + +package bisq.desktop.util; + +import javafx.scene.Scene; + +public class CssTheme { + public static final int CSS_THEME_LIGHT = 0; + public static final int CSS_THEME_DARK = 1; + + public static void loadSceneStyles(Scene scene, int cssTheme) { + String cssThemeFolder = "/bisq/desktop/"; + String cssThemeFile = ""; + + switch (cssTheme) { + + case CSS_THEME_DARK: + cssThemeFile = "theme-dark.css"; + break; + + case CSS_THEME_LIGHT: + default: + cssThemeFile = "theme-light.css"; + break; + } + + scene.getStylesheets().setAll( + // load base styles first + cssThemeFolder + "bisq.css", + cssThemeFolder + "images.css", + cssThemeFolder + "CandleStickChart.css", + + // load theme last to allow override + cssThemeFolder + cssThemeFile + ); + } +}