Add a dark mode

[dtrai2]

Inspired by the works of #1238 I thought I give it a try. I was also reading in #1084 that some suggested to just use a browser add-on, but I have to admit that I personally never was a fan of third party solutions for that.

@yagebu I tried to also consider your last remarks on #1084 that it would be nice to keep some of the original colors. I hope I was able to do that to your liking.

Similar to the work of @arkn98 I could achieve good results by just setting some colors. At the moment I only see one big issue though and that are some texts in the editor, like comments, the currency or the price. I couldn't find where I have to set them, so maybe someone can point me into the right direction.

Here is an example of how it currently looks like:

And here is a screenshot of the issue I still have with the currency and the values. They do still seem kinda dark in the editor.

Looking forward to feedback and remarks!

[yagebu]

Thanks for the PR :)

At the moment I only see one big issue though and that are some texts in the editor, like comments, the currency or the price

• currencies: seems we just hard-code that to #708 right now, see

  fava/frontend/src/codemirror/beancount-highlight.ts

  Line 32 in c349ee4

  color: "#708",

  - so adding a CSS variable for that just like the other editor colors and then overriding that should do the trick.
• number, ...: similar, but we're not setting that color in Fava explicitly AFAICT - so you would need to add an entry to beancount-highlight.ts for that with a CSS variable as well

[dtrai2]

Thanks for your feedback, I incorporated it. :)

How do you feel about the current look and feel of the dark mode? Any suggestions or ideas I should still consider?

[yagebu]

Thanks for adding these colors. Here's some things that I noticed that don't look quite right yet:

Some of the contrasts in the journal are very low (maybe darken the colors?):

Active / inactive buttons are hard to tell apart (is it intentional that the active buttons aren't blue as they are in the light color scheme?):

The query report, very low contrasts:

[dtrai2]

Thanks for the feedback!

Some of the contrasts in the journal are very low (maybe darken the colors?):

I did improve the contrast in the journal a bit. I struggled to find out how to define the que entry you have in your screenshot though. Maybe you can give me a snippet or a hint on how I can add it to my local test file.

Active / inactive buttons are hard to tell apart (is it intentional that the active buttons aren't blue as they are in the light color scheme?):

No it was not intentional, I fixed that mistake -> the buttons should be blue again.

The query report, very low contrasts:

The query report is for me again a bit more difficult as I am not familiar with the codemirror library. I have to do more research there on how to find out which things I can style how. Will give it a try on another day.

[dtrai2]

So I did manage to fix the low contrast for the query editor as well. In the meantime I did notice another thing though. When selecting some lines in the regular editor the background becomes really bright such that it is not possible to read some words:

I did try to find out where to configure this, but apparently my front-end skills don't seem to suffice. @yagebu maybe you have a hint for me here?!

[yagebu]

I struggled to find out how to define the que entry you have in your screenshot though. Maybe you can give me a snippet or a hint on how I can add it to my local test file.

That's a screenshot from one of the test files (example.beancount) - you can startup Fava with those files with make run-example.

When selecting some lines in the regular editor the background becomes really bright such that it is not possible to read some words:

That can be styled as .cm-selectionBackground, I've added classes for that.

I've also adjusted the colors for the journal a bit, to simplify the CSS I've darkened the colors there some more and also switched them to the hsl() syntax which makes it easier to just tweak the "lightness" for example while leaving hue (and sometimes saturatation) the same as in the light theme.

I've also squashed all the commits and will merge this, thanks for the work on this :)

[dtrai2]

Ah thanks for helping out and merging the changes! 👍