Add dark mode, anchor links, utterances support

[opeik]

Hi there,

I've added basic dark mode support as well as some other niceties.

[justint]

Hey, thanks a bunch for the contributions. I should have some time to take a look in the next couple of weeks.

[justint]

The dark theming & usage of the CSS custom properties looks great. We should adjust some of the dark theme colors to meet the AA contrast ratio minimums. I can take a pass at this and push another commit for you to review sometime this week.

Utterances is cool, did not know that existed! I'd love to see it in use with Papaya once you've configured it for your instance, if you plan to use it.

One question I have, is why you chose to replace the existing anchor link?

[opeik]

We should adjust some of the dark theme colors to meet the AA contrast ratio minimums. I can take a pass at this and push another commit for you to review sometime this week.

Fair point, I'm flat out at the moment so feel free.

One question I have, is why you chose to replace the existing anchor link?

It was a hot minute ago so I'm struggling to recall 😅 There was some issue, I think in regards to the actual anchor becoming visible on hover?

[justint]

Ah interesting, I've been able to see the current anchor links myself on hover; I'm using Google Chrome. Are you on a different browser?

Will get to the color contrast adjustments soon, when I find time.

[opeik]

Are you on a different browser?

Yeah, I use Safari on macOS with Chromium as a backup. That might have been it.

[justint]

Ok, I've updated the colors to be AA contrast compliant.

However, I've just noticed the current code highlighting is a bit of an eyesore in dark mode:

It's easy to switch to another code theme that works better with dark mode, but it could be tricky to find one theme that looks good in both light and dark mode. I wonder if it's worth supporting custom code themes for either light or dark mode separately, using Zola's classed syntax highlighting?

[justint]

What is this new img-dark class used for, btw?

[opeik]

img-dark denotes an image can have the colours inverted in dark mode, I used it mostly for diagrams. I thought I added a parameter to the img shortcode but looks like I forgot 🥲

[opeik]

I wonder if it's worth supporting custom code themes for either light or dark mode separately, using Zola's classed syntax highlighting?

This sounds like an ideal solution. I think monokai looked okay in light mode but having seperate light/dark themes would be really nice!

[justint]

Hey @opeik, my apologies for ghosting this thread. I think providing dark/light themes for papaya would indeed be really nice, I'm going to re-open this and look into supporting custom code themes next week.

[justint]

Hey @opeik, thanks so much again for these contributions. I've finally found the time to resume work on this and was able to get the syntax highlighting working for light/dark mode.

I'm having some weird issues with getting my changes into this PR, so in case you wish to follow along further I've pushed the changes to a new branch and will be merging into main & releasing soon.