Bisq: Add dark mode

[ripcurlx]

Todos:

• [ ] Clean up css colors (use derive and reduce color codes to a minimum)
• [ ] Move color codes into separate css file
• [ ] Enable switching of different color css files within preferences
• [ ] Create css file with dark color scheme

[aejontargaryen]

YES !!!!

[aejontargaryen]

also in other news... Jan 2021. Headlines read:

" Bisq Becomes Less Platform...More Trading Protocol "

a user by the name of 'ripcurlx' reportedly saying Bisq

" _...has now been integrated into thousands of crypto project's official wallets..._"

with user 'cbeams' saying

" it just works..."

(a user 'manfredkarrer' was not available for comment but was last seen touring with the band U2 )

[ManfredKarrer]

Haha.... but not U2 please ;-)

[peterzen]

@ripcurlx I'd like to take this on if nobody has started it yet. Maybe it would be good to start with refactoring the CSS into smaller chunks using SASS (the colors would reside in a separate configuration, defined as variables), then introduce classes that derive() from the base colors which the components can then refer to. Creating the new color schemes would then be a case of adding new versions of the base color config.

Does that sound like a good plan?

[ripcurlx]

@peterzen Please request @ManfredKarrer to add you as contributor and I'm able to assign you to this task.
Regarding SASS, I'm not sure if we can use the traditional tooling here as well. Javafx css looks very similar from the ruleset as regular css, but there are some differences. I did find a plugin that might work with our Gradle setup and JavaFX (https://github.com/robfletcher/gradle-compass), but you wouldn't need it if you just want to assign variables.

.root {
    -my-variable: #444;
}

You can split up the css file in smaller chunks to make it easier to work with. For that, we either have to load them manually or we use additional tooling. I leave the decision to you as long as it works with our current setup and integrates nicely within IntelliJ without doing any manual work during development.
https://github.com/bisq-network/bisq/blob/bf948101267ac459764cb1a012fb1aeefcfc7e4d/desktop/src/main/java/bisq/desktop/app/BisqApp.java#L221-L224
Still in the end I guess we'll need to load at least two files (colors + styles) or have two different compiled files (light style, dark style) that can be switched in the preferences.

Do you have experience using SASS within JavaFX?

[peterzen]

I tested a number of gradle plugins - robfletcher/gradle-compass didn't quite work (issue with the maven repo) but the anbuck/gradle-compass fork works well in this quick PoC: https://github.com/bisq-network/bisq/compare/master...peterzen:feature-dark-mode?expand=1

While it's indeed not a major difference in terms of savings in code lines, the ability to use SASS variables and mixins help a lot in keeping duplications low and the UI consistent down the line (not just in terms of color scheme but other things like typography and UI sizing).

IntelliJ has a SASS language support plugin and a linter which makes the editing of the SCSS sources easier on the eye slightly. I'll play around more with it and see whether the cost/benefit of an extra build step makes sense or not.

I don't have previous experience with SASS/JavaFX beyond reading up on it but found some articles that recommend it for the same reason as in the traditional web dev context.

[ripcurlx]

If you find a working setup it might help to clean up our CSS step by step. The css grew organically over the last couple of years by multiple developers and it would be great to get it more modular and easier to maintain. Maybe some time in the future if we decide to use Java modules for different sections we could also bundle separate css files with it to speed up loading times of the app even more. But I don't have experience with it yet and have to focus now more on the DAO until it is live on Mainnet. Thanks for helping out!