Feature dark mode #2414

peterzen · 2019-02-12T20:35:11Z

Dark mode implementation (#2286 )

(For testing, use Ctrl+D to quickly cycle through the light/dark themes)

ripcurlx · 2019-02-13T09:49:46Z

I'm not able to give proper feedback before the next release, but I quickly tried to build your PR (because I'm just to curious 😉). ATM it looks like something is not configured properly out of the box. Is there some manual setup involved for building the application with the new sass structured css?

ripcurlx · 2019-02-13T09:50:59Z

The css resources are not build automatically.

Feb. 13, 2019 10:46:37 VORM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/theme-light.css" not found.
Feb. 13, 2019 10:46:37 VORM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/bisq.css" not found.
Feb. 13, 2019 10:46:37 VORM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/images.css" not found.
Feb. 13, 2019 10:46:37 VORM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/CandleStickChart.css" not found.

peterzen · 2019-02-13T13:56:50Z

Looks like the compass build doesn't work correctly - I've added in the generated CSS files which is a good idea anyhow. The SASS build should probably not be on the build critical path anyway.

peterzen · 2019-02-14T15:00:08Z

@ripcurlx did you get a chance to fire this up?

ripcurlx · 2019-02-14T15:17:11Z

Looks like the compass build doesn't work correctly - I've added in the generated CSS files which is a good idea anyhow. The SASS build should probably not be on the build critical path anyway.

I'm not sure if it is a good idea to put precompiled files in the project, as this might cause confusion if someone changes the css code and later the sass files are processed and overwrite the changes. I think it should work that if someone runs gradle build also the required css files should be generated. The same goes with Intellij. If I change code in the SASS file and run the app I expect the changes to be reflected in the app without doing manual processing of the SASS files.

Is there a reason why it is not working like that?

ripcurlx · 2019-02-14T15:25:07Z

@ripcurlx did you get a chance to fire this up?

Works for me now with the pre-compiled css files.

As mentioned before I'll give a more in-depth review as soon as the new release is out. Should be mid/end of next weeks.
I like the direction the dark mode is going, but I guess we'll need to get @pedromvpg involved for the final color codes 😄

peterzen · 2019-02-14T16:31:50Z

Thanks for the feedback.

Indeed, it would be good to coordinate with the color code update effort. As part of this CSS refactoring I consolidated the colors into one place, it should be more straightforward to change them:

https://github.com/peterzen/bisq/blob/feature-dark-mode/desktop/src/main/java/bisq/desktop/styles/base-colors.scss

@pedromvpg please let me know if I can help.

In the meantime I'll fix the remaining couple issues like the tooltip background so that all of the palette can be controlled from the main configuration SASS file.

peterzen · 2019-02-14T18:25:41Z

Looks like the compass build doesn't work correctly - I've added in the generated CSS files which is a good idea anyhow. The SASS build should probably not be on the build critical path anyway.

I'm not sure if it is a good idea to put precompiled files in the project, as this might cause confusion if someone changes the css code and later the sass files are processed and overwrite the changes. I think it should work that if someone runs gradle build also the required css files should be generated. The same goes with Intellij. If I change code in the SASS file and run the app I expect the changes to be reflected in the app without doing manual processing of the SASS files.

Agreed, that would be the way most devs expect it to work. (Though it can be argued that the SASS files are not likely to change very often, and the Compass build step does add a few seconds to the build. Maybe a separate build step and a "this file is generated from..." warning at the top of the CSS files is a decent compromise?)

Is there a reason why it is not working like that?

I couldn't replicate the issue in a fresh environment, am getting the com.github.anbuck.compass gradle plugin to load correctly. Could you look out for this as part of your review next week?

ripcurlx · 2019-02-27T12:13:38Z

@peterzen Just wanted to let you know, that I'm looking into your PR right now. Feedback should be available soon.

peterzen · 2019-02-27T13:27:37Z

Thanks, please let me know if anything is unclear or wrong :)

ripcurlx

I left a couple of first remarks. In general I like the new structure a lot as it makes it easier to maintain, but I still have issues getting it to run on my local setup. Compass compile is running and I have the main css and themes css in my bisq/desktop/styles dir, but it seems to have issues loading them during startup:

Feb. 28, 2019 5:10:50 NACHM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/styles/theme-light.css" not found.
Feb. 28, 2019 5:10:51 NACHM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/styles/bisq.css" not found.

No idea why it uses the german locale just for this block log outpout. I'll see if I find the issue regarding the css loading. For you it works out-of-the-box?

ripcurlx · 2019-02-27T12:20:49Z

build.gradle

@@ -281,6 +287,7 @@ configure(project(':desktop')) {
        compile project(':p2p')
        compile project(':core')
        compile project(':common')
+


No need for the extra new line.

ripcurlx · 2019-02-27T12:24:05Z

common/src/main/proto/pb.proto

@@ -1292,6 +1292,7 @@ message PreferencesPayload {
    string rpc_user = 47;
    string rpc_pw = 48;
    string take_offer_selected_payment_account_id = 49;
+    bool use_dark_theme = 50;


Not sure if we should use a boolean or if we want to have it more future proof if more themes are created over time?

It's indeed more future proof to use a string so that this file and the settings object won't require changing later.

ripcurlx · 2019-02-27T12:25:29Z

core/src/main/java/bisq/core/locale/GlobalSettings.java

@@ -25,6 +25,7 @@

 public class GlobalSettings {
    private static boolean useAnimations = true;
+    private static boolean useDarkTheme = false;


Is there a reason why we need it in the GlobalSettings object?

No, this was an oversight on my part -- thanks for catching it.

ripcurlx · 2019-02-28T15:56:04Z

desktop/src/main/resources/styles/theme-light.scss

@@ -0,0 +1,108 @@
+
+@import "_variables.scss";


Is it necessary to import it here as well, as it is already imported in _base-colors?

peterzen · 2019-03-02T01:02:07Z

@ripcurlx The changes you requested are now done, thanks for the review.

Instead of the boolean type light/dark switcher there's now a drop-down menu in the Settings that, as you point out, is more flexible when it comes to additional themes. Please let me know what you think of this solution.

peterzen · 2019-03-02T11:33:49Z

I left a couple of first remarks. In general I like the new structure a lot as it makes it easier to maintain, but I still have issues getting it to run on my local setup. Compass compile is running and I have the main css and themes css in my bisq/desktop/styles dir, but it seems to have issues loading them during startup:
Feb. 28, 2019 5:10:50 NACHM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/styles/theme-light.css" not found.
Feb. 28, 2019 5:10:51 NACHM. com.sun.javafx.css.StyleManager loadStylesheetUnPrivileged
WARNUNG: Resource "/bisq/desktop/styles/bisq.css" not found.
No idea why it uses the german locale just for this block log outpout. I'll see if I find the issue regarding the css loading. For you it works out-of-the-box?

Those messages seem to indicate that the CSS files were not generated in the compassCompile step. Are the files there though, after the build?

I'm getting a clean build when running on a fresh system (Ubuntu 18.04) with openjdk-11-jdk installed, and the resulting binary starts up correctly with no CSS related error messages. The theme switching works as well.

> Task :desktop:compassCompile
unsupported Java version "10", defaulting to 1.7
WARNING: An illegal reflective access operation has occurred
WARNING: Illegal reflective access by org.jruby.util.SecurityHelper (file:/home/peter/.gradle/caches/modules-2/files-2.1/org.jruby/jruby-complete/9.1.14.0/953b0ecf50980a4112fd0a2cd1dec1225b93c529/jruby-complete-9.1.14.0.jar) to field java.lang.reflect.Field.modifiers
WARNING: Please consider reporting this to the maintainers of org.jruby.util.SecurityHelper
WARNING: Use --illegal-access=warn to enable warnings of further illegal reflective access operations
WARNING: All illegal access operations will be denied in a future release
    write build/resources/main/bisq/desktop/styles/bisq.css
    write build/resources/main/bisq/desktop/styles/theme-dark.css
    write build/resources/main/bisq/desktop/styles/theme-light.css

Are you running the build in an existing local copy? Perhaps Maven is caching its dependencies and doesn't pick up the Compass dependency properly - unfortunately I'm not well versed enough with Gradle/Maven but it sounds like the problem might be there somewhere. Could you perhaps try running the build on a clean working copy or maybe a fresh system inside Docker and see if it works that way?

Another idea to try would be to move away $HOME/.gradle to clean the gradle cache - that should force it to start with a clean sheet.

peterzen · 2019-03-08T00:21:56Z

Rebased onto master

ripcurlx · 2019-03-08T05:35:09Z

@peterzen Sorry again for the delayed response. We just have too many releases recently 😉. I'll try and response in more detail this afternoon.

ripcurlx · 2019-03-08T17:03:12Z

Another thing we need to solve is, that there is no need to manually run the compile compass command after a change in the scss within IntelliJ. So developers who are working on the UI don't need to do anything manual that needs to be communicated.

peterzen · 2019-03-08T17:11:29Z

@peterzen Just to be sure: Are you running the client from command line or are you running it from within IntelliJ?

I'm running it from the CLI most of the time, but sometimes also from within the IntelliJ debugger.

peterzen · 2019-03-08T17:24:33Z

Another thing we need to solve is, that there is no need to manually run the compile compass command after a change in the scss within IntelliJ. So developers who are working on the UI don't need to do anything manual that needs to be communicated.

./gradlew -t compassCompile runs the compile task in continuous mode. That, along with the CSS reload in Scenic View the app reloads the changes automatically.

https://github.com/peterzen/bisq/blob/aedbbe6c24cfe1b09acf6d09acfb0b6992303898/desktop/src/main/resources/styles/README.md

peterzen · 2019-03-08T17:41:15Z

@peterzen One step further

Could you please have a look at the differences between your version

and the current one

so that they match.

I'm on vacation next week, so I can't give further feedback until then.
Thanks so far for your work!

This came out by accident - the white panel that's between the gradient background (which is actually invisible ATM as the white panel is opaque) is transparent. I thought this looked rather cool so left it as transparent but it can of course be colored. I'll fix the other items (buttons, nav etc)

I'll wait for all of your comments to come in as it's less work to do them all at once.

Are there any other GUI related items currently in the PR pipeline that are worked on currently and may get merged in the coming weeks? If so, it would be good to coordinate them with this PR - possibly even work on them on top of this refactored CSS because in case there are larger changes in the current bisq.css it's quite a lot of work to manually rebase this one.

ripcurlx · 2019-03-08T17:46:15Z

Are there any other GUI related items currently in the PR pipeline that are worked on currently and may get merged in the coming weeks? If so, it would be good to coordinate them with this PR - possibly even work on them on top of this refactored CSS because in case there are larger changes in the current bisq.css it's quite a lot of work to manually rebase this one.

All redesign tasks are on hold until the DAO launch. So now would be a good to get this finished and into master before any further design work will happen. I think it also makes sense to merge this PR first without the dark mode, so there is more time to make it perfect, but still have this structural changes in asap.

Unfortunately I won't be able to look at every screen for differences to the current state. Maybe you could do this and I'll have another look at it when you're done. Would this work for you?

peterzen · 2019-03-08T18:26:59Z

Are there any other GUI related items currently in the PR pipeline that are worked on currently and may get merged in the coming weeks? If so, it would be good to coordinate them with this PR - possibly even work on them on top of this refactored CSS because in case there are larger changes in the current bisq.css it's quite a lot of work to manually rebase this one.

All redesign tasks are on hold until the DAO launch. So now would be a good to get this finished and into master before any further design work will happen. I think it also makes sense to merge this PR first without the dark mode, so there is more time to make it perfect, but still have this structural changes in asap.

Unfortunately I won't be able to look at every screen for differences to the current state. Maybe you could do this and I'll have another look at it when you're done. Would this work for you?

I've been looking at the screens for a little too long to spot small differences so input from a fresh set of eyeballs would be great ;) I'll have a go and go through them again, now after not having worked on them intensively for a couple weeks I'm noticing some differences which I'll fix for sure.

ripcurlx · 2019-03-08T18:35:36Z

Yes, you get colorblind after some time 😉. Maybe you could use some image diff tool to help you out like: https://www.diffchecker.com/image-diff.

peterzen · 2019-04-08T17:04:52Z

Rebased onto master

peterzen · 2019-04-16T20:05:09Z

@ripcurlx What is the plan for integrating this PR? There are some new conflicts now due to the DAO changes - I wonder what would be an appropriate time for doing a final rebase to add any other UI changes that might be in the pipeline.

peterzen · 2019-06-22T21:05:11Z

^ Rebased onto master

wiz · 2019-07-29T15:13:59Z

This is really cool, but I was kinda wondering what's the purpose of adding the com.github.anbuck.compass plugin? Does it use some kind of CSS inheritance to build CSS files? Since Bisq holds hot wallet private keys, it's probably best to try to minimize the amount of external code we use, even for development use only.

peterzen · 2019-07-29T17:23:36Z

This is really cool, but I was kinda wondering what's the purpose of adding the com.github.anbuck.compass plugin? Does it use some kind of CSS inheritance to build CSS files?

The plugin is a bridge to the SASS/Compass interpreter, it basically runs Compass on the SCSS sources.

It was introduced in order to break up the monolithic CSS code into smaller, modular chunks and make the color scheme definitions configurable (so that more themes can be added with relative low amount of effort).

@peterzen

From commit 9bf3016 in PR bisq-network#2414 by @peterzen

peterzen · 2019-08-28T15:39:21Z

^Rebased on master

@peterzen

From commit 9bf3016 in PR bisq-network#2414 by @peterzen

peterzen requested review from cbeams, ManfredKarrer and ripcurlx as code owners February 12, 2019 20:35

peterzen force-pushed the feature-dark-mode branch from ced78d0 to d6c971e Compare February 12, 2019 20:37

ripcurlx self-assigned this Feb 13, 2019

ripcurlx added the in:gui label Feb 13, 2019

peterzen force-pushed the feature-dark-mode branch from fbad804 to 7dbc99a Compare February 13, 2019 14:11

peterzen changed the title ~~[WIP] Feature dark mode~~ Feature dark mode Feb 13, 2019

ManfredKarrer changed the title ~~Feature dark mode~~ [WIP] Feature dark mode Feb 13, 2019

ManfredKarrer removed request for cbeams and ManfredKarrer February 13, 2019 18:08

peterzen force-pushed the feature-dark-mode branch 2 times, most recently from 93b87c8 to 0c1d6b6 Compare February 15, 2019 16:05

ripcurlx reviewed Feb 28, 2019

View reviewed changes

peterzen force-pushed the feature-dark-mode branch from 237a0aa to e4bb301 Compare March 2, 2019 00:57

peterzen force-pushed the feature-dark-mode branch from e4bb301 to bc7c082 Compare March 8, 2019 00:21

peterzen force-pushed the feature-dark-mode branch from bc7c082 to 12e65ea Compare March 8, 2019 17:32

peterzen force-pushed the feature-dark-mode branch from aedbbe6 to 085ede7 Compare March 8, 2019 22:47

peterzen force-pushed the feature-dark-mode branch from 085ede7 to 8ed3629 Compare March 23, 2019 17:07

ripcurlx mentioned this pull request Mar 28, 2019

For March 2019 bisq-network/compensation#247

Closed

peterzen force-pushed the feature-dark-mode branch from 1b7b591 to bc0958f Compare April 8, 2019 17:01

peterzen force-pushed the feature-dark-mode branch from bc0958f to f35a0d5 Compare April 16, 2019 20:36

peterzen force-pushed the feature-dark-mode branch from f35a0d5 to c575210 Compare April 28, 2019 22:26

peterzen mentioned this pull request Jun 18, 2019

custom theme / custom style (especially for visually handicapped) #2882

Closed

peterzen force-pushed the feature-dark-mode branch from c575210 to 203bbaa Compare June 22, 2019 21:03

peterzen requested a review from sqrrm as a code owner June 22, 2019 21:03

peterzen changed the title ~~[WIP] Feature dark mode~~ Feature dark mode Aug 26, 2019

wiz pushed a commit to wiz/bisq that referenced this pull request Aug 27, 2019

Refactors CSS colors and adds Dark Mode theme

3667168

From commit 9bf3016 in PR bisq-network#2414 by @peterzen

wiz mentioned this pull request Aug 27, 2019

Dark Mode #3152

Merged

Dark mode theme

84f5a94

peterzen force-pushed the feature-dark-mode branch from f78dfe3 to 84f5a94 Compare August 28, 2019 15:38

wiz pushed a commit to wiz/bisq that referenced this pull request Aug 29, 2019

Refactors CSS colors and adds Dark Mode theme

541bee9

From commit 9bf3016 in PR bisq-network#2414 by @peterzen

ripcurlx closed this in #3152 Aug 29, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature dark mode #2414

Feature dark mode #2414

peterzen commented Feb 12, 2019 •

edited

Loading

ripcurlx commented Feb 13, 2019

ripcurlx commented Feb 13, 2019

peterzen commented Feb 13, 2019

peterzen commented Feb 14, 2019

ripcurlx commented Feb 14, 2019

ripcurlx commented Feb 14, 2019

peterzen commented Feb 14, 2019

peterzen commented Feb 14, 2019

ripcurlx commented Feb 27, 2019

peterzen commented Feb 27, 2019

ripcurlx left a comment

ripcurlx Feb 27, 2019

ripcurlx Feb 27, 2019

peterzen Mar 1, 2019

ripcurlx Feb 27, 2019

peterzen Mar 2, 2019

ripcurlx Feb 28, 2019

peterzen commented Mar 2, 2019

peterzen commented Mar 2, 2019 •

edited

Loading

peterzen commented Mar 8, 2019

ripcurlx commented Mar 8, 2019

ripcurlx commented Mar 8, 2019

peterzen commented Mar 8, 2019

peterzen commented Mar 8, 2019 •

edited

Loading

peterzen commented Mar 8, 2019 •

edited

Loading

ripcurlx commented Mar 8, 2019

peterzen commented Mar 8, 2019

ripcurlx commented Mar 8, 2019

peterzen commented Apr 8, 2019

peterzen commented Apr 16, 2019

peterzen commented Jun 22, 2019

wiz commented Jul 29, 2019

peterzen commented Jul 29, 2019

peterzen commented Aug 28, 2019

Feature dark mode #2414

Feature dark mode #2414

Conversation

peterzen commented Feb 12, 2019 • edited Loading

ripcurlx commented Feb 13, 2019

ripcurlx commented Feb 13, 2019

peterzen commented Feb 13, 2019

peterzen commented Feb 14, 2019

ripcurlx commented Feb 14, 2019

ripcurlx commented Feb 14, 2019

peterzen commented Feb 14, 2019

peterzen commented Feb 14, 2019

ripcurlx commented Feb 27, 2019

peterzen commented Feb 27, 2019

ripcurlx left a comment

Choose a reason for hiding this comment

ripcurlx Feb 27, 2019

Choose a reason for hiding this comment

ripcurlx Feb 27, 2019

Choose a reason for hiding this comment

peterzen Mar 1, 2019

Choose a reason for hiding this comment

ripcurlx Feb 27, 2019

Choose a reason for hiding this comment

peterzen Mar 2, 2019

Choose a reason for hiding this comment

ripcurlx Feb 28, 2019

Choose a reason for hiding this comment

peterzen commented Mar 2, 2019

peterzen commented Mar 2, 2019 • edited Loading

peterzen commented Mar 8, 2019

ripcurlx commented Mar 8, 2019

ripcurlx commented Mar 8, 2019

peterzen commented Mar 8, 2019

peterzen commented Mar 8, 2019 • edited Loading

peterzen commented Mar 8, 2019 • edited Loading

ripcurlx commented Mar 8, 2019

peterzen commented Mar 8, 2019

ripcurlx commented Mar 8, 2019

peterzen commented Apr 8, 2019

peterzen commented Apr 16, 2019

peterzen commented Jun 22, 2019

wiz commented Jul 29, 2019

peterzen commented Jul 29, 2019

peterzen commented Aug 28, 2019

peterzen commented Feb 12, 2019 •

edited

Loading

peterzen commented Mar 2, 2019 •

edited

Loading

peterzen commented Mar 8, 2019 •

edited

Loading

peterzen commented Mar 8, 2019 •

edited

Loading