Make dark mode work properly

[xfbs]

With the migration to Tailwind CSS, there's already been some good progress towards a useable dark mode. But there are still some open issues:

• The file diff view doesn't support dark mode at the moment
• Syntax highlighting for dark mode needs to be rethought a bit
• There's potential for improvement of the colorscheme in general (currently colorscheme is just the result of copypasta, not much thought went into it from my side)

Ideally, I want it to work and look somewhat decent. Can make it pretty after.

[xfbs]

Almost done with this, only the diff view remaining. The file tree is already dark-mode enabled. What is currently missing is dark mode for the actual code view. The challenges here are that we use syntect to directly output colors, and that makes it difficult.

My ideas are:

Re-syntax highlight for dark mode

Basically, use some hook to detect dark mode, and when it is active, re-run syntect with a different theme. This might be computationally expensive.

Use semantic tags

Afaik, we can also run syntect in a different mode, where instead of translating spans of text to colors, it can give us spans of text and their semantic meaning (as Scope elements). This likely involves running it through the parser manually.

The idea is to translate the scopes to css classes. For example:

• punctuation.definition.string.begin.ruby would be a class of punctuation-definition-string-begin-ruby
• meta.function.parameters.rust would be meta-function-parameters-rust

And then we could express themes as CSS (and thereby make use of media query to switch to a different theme automatically):

.code-view .theme-abc .meta.function.parameters.rust {
    color: #ffffff;
}

I would prefer this second option, if it isn't too difficult.

[tverghis]

I think dark mode could use a little more text contrast on the About page too:

Edit: running Firefox 124.0.1 on Fedora, if that matters :slightly_smiling_face:

[xfbs]

I agree!

I think we should add some default font colors for the style of “html” or “body”, so we don’t habe to add dark mode colors everywhere.

[xfbs]

@tverghis I just pushed a commit to fix the About page dark mode

[tverghis]

Looks fantastic, thank you!