feat: Add dark/light mode toggler

[tymzd]

Why? Offering light/dark mode improves accessibility and legibility for web content. Light/dark themes are now an expectation for any modern tooling that developers interact with.

osv.light.mode.demo.webm

Caveats:

• For simplicity, I wanted to keep the theming logic strictly on the client side. This is why I chose localStorage instead of cookies for storing theme state.
• I developed this with make run-website-emulator because I don't have access to the real osv dataset - so perhaps the default emulator data is not representative of the styles that would be seen in production on real data. A thorough look against real data would be helpful to find conflicting/unresolved styles.
• The more 'correct' way to surface light/dark mode is to include an 'auto' mode that defers to the OS-level theme setting. See https://brandur.org/fragments/dark-mode-notes. For simplicity, I chose to do a simple binary toggle, but it would not be very challenging to support OS-based theming in the future.
• If you open two tabs, and flip the theme in one of them, the other tab does not reflect the update unless you refresh. This can be fixed by having a localStorage event listener but I chose to keep it simple.
• I did not try to pick a new colour palette, I just picked some reasonable white/grey colours.
• I was blinded in the making of this

[ashmod]

(looks really nice tho)

[michaelkedar]

😎 looking good to me.

I find the white text on red buttons on white background a bit harsh - I don't know if you feel like experimenting with the colours a bit.

Also, FYI there are some code blocks in a few blog posts (e.g. https://osv.dev/blog/posts/using-the-determineversion-api/) that don't seem to be changing with light mode. I think it's fine to leave as-is (because I suspect it'd be a hassle to change), I'm just not sure if you saw those.

[michaelkedar]

I think these logos look more pixelated than the white-text ones?

I've tried looking around, but I can't find the original source of these images.
The GitHub docs use a different icon - I'm not against changing to use those instead.

[tymzd]

Thanks! I'll let @cuixq propose the colours.

I find the white text on red buttons on white background a bit harsh

It's possible to minimise this also by remove/lightening the button fill:

Let me know if you think that's the right move.

Also, FYI there are some code blocks in a few blog posts

I left this out since it's a bit hacky to make this dynamically apply a theme based on light/dark mode. The issue is that <code> block styling is statically configured in hugo.toml. It's possible to 'escape hatch' this though and apply CSS ourselves. I've done this after generating the CSS with:

hugo gen chromastyles --style=native
hugo gen chromastyles --style=github

Example screenshot of light theme code blocks:

There are more syntax highlighting schemes to choose from: https://gohugo.io/quick-reference/syntax-highlighting-styles/.

I think these logos look more pixelated than the white-text ones?

I've extracted the logo you suggested and replaced it in both dark/light mode with a higher resolution version. It no longer looks pixelated to me :)

[cuixq]

Thanks for the change - looking good! Just a few suggestions on the colors:

1. Is it possible to make the link icon the same color as the texts? They are black now while the texts are white.

2. For the instruction cards, red texts on the grey background looks a bit weird - maybe just make them black?

3. When searching for vulnerabilities, the selected icon has black ground and red texts which does not look very good - white texts against the black ground is probably better here.

4. The light mode does not work very well with the "affected packages" - shall we have some borders at least for the tabs and tables?

5. There seems to be some colouring issue with the vulnerability list for dark mode.

[tymzd]

Sorry @cuixq, you had out of date changes because I was clumsy and force pushed a much older commit by accident. I've recovered the proper commit now and all those issues should be corrected now! :)

(Also changed the light mode blog code syntax highlighting from github to catppuccin-latte)

[cuixq]

Sorry for the delay! Finally got some time to pick the color...

The color of the blog post title as well as "no fix available" badge (osv-red-300) is a bit too bright against the light background, however the dark red we use (osv-red-700) may be a bit too dark, probably use the red between them like #c5221f?

And for affected package tabs, the red/grey contrast seems not good. Can we make the active tab to have white background so it works well with the red? this may cause the selected tab is not so obvious, to improve that, maybe make the non-active tab to have a darker grey background as shown in the following screenshot.

[tymzd]

Thanks @cuixq! I've implemented all suggestions:

Dimmed the red of the blog post title:

Dimmed the red of the "No fix available" chip:

Inverted package tab active/inactive colours and thickened the highlighting bottom border as you showed:

[cuixq]

looks great! thank you!

only one comment about "Read more..." on the blog page, can we make it the same color as the blog title too? it seems have different red color.

[tymzd]

Yes, good catch :). Done!

[another-rex]

The new light mode looks great!

Though I did notice a few changes that are different in dark mode compared to what's currently on Prod.

Things I noticed flipping back and forth on prod and test:

• Different shade of background color Ok this one might just be an optical illusion because of the text color changing.
• Search box no longer has a gray bg
• separator lines between each element in the search is missing or very hard to see
• text color changed from 0.87 opacity to 1, making all the text look bolder
• Github logo on the top right has shrunk in size.

Can some of these changes be reverted / kept consistent with the current changes in dark mode?