codeblock syntax highlighting should match site theme

[justinmk]

Problem

The codeblock highlighting on the site does not match the site theme. In particular it has purple which is nowhere else in the site theme.

• 

Proposal

check the css of https://nvim-mini.org/mini.nvim/ to see if we can borrow it, it looks great. cc @echasnovski

[echasnovski]

check the css of https://nvim-mini.org/mini.nvim/ to see if we can borrow it, it looks great. cc @echasnovski

Site's palettes are stored in separate files: dark theme and light theme.

The general idea was to use miniwinter and minisummer palettes for dark and light themes respectively. Plus code blocks should have the same background as the basic background in those themes. Which left the choice of either going darker or lighter for basic site's background while reusing already present palette from 'mini.hues'. Decided to go darker for dark theme and lighter for light theme.

This can be reversed for neovim.io: get normal background and adjust it similarly to how 'mini.hues' does it: add approximately 5 lightness while preserving chroma and hue in OKLch color space. So:

• Basic background is #0f191f, which is lightness 11, chroma 2, hue 235.
• Adjusted color is Lightness 16, chroma 2, hue 235, i.e. #1c262d.

Here is how code blocks will look like with #1c262d as a background:

• Before/now:

• After:

I don't think I have a preference here. The "after" might be better without border though.

If you have any suggestions about how you'd like to adjust the color or have questions about nvim-mini.org site, I am happy to help.

[echasnovski]

The codeblock highlighting on the site does not match the site theme. In particular it has purple which is nowhere else in the site theme.

I've just had a thought to suggest a darker background for code blocks, but with the same hue. But after looking at colors, it already is:

• Basic background is #0f191f, which is lightness 11, chroma 2, hue 235.
• Codeblock background is #0b151b, which is lightness 9, same chroma (2) and hue (235).

So although they might not look like coordinated, they are. Maybe going even more dark will be an improvement? Here is what #040d12 (lightness 6, chroma 2, hue 235) looks like as code background:

This makes code blocks stand out more and (as a bonus) improves contrast ratio in them.

[justinmk]

The main goal here is to not use purple, the syntax should align with the site theme. Your screenshots still have purple.

[echasnovski]

The main goal here is to not use purple, the syntax should align with the site theme. Your screenshots still have purple.

Ah, you mean foreground in syntax highlighting... 🤦 I thought you meant background of codeblocks.

Yeah, I agree. Not huge issue for me, but might be not very well aligned.

As far as I can tell from the place of the screenshot, the color is #c0caf5. Which means that it comes from here. And this is the only place that uses it.

If --hi-b-white is replaced with site's default foreground (#a9d5c4), here is how it looks:

The comments are darker purple also. If --hi-white is also replaced with link's color (#5fb950), here is how it looks:

Maybe a bit too much green, but no purple at least :)

---

For reference, the theme came in #303 and #304

[echasnovski]

But if redesign is in order, then using Neovim's own default color scheme for the whole site might be the way to go 🤔

[justinmk]

If --hi-b-white is replaced with site's default foreground (#a9d5c4), here is how it looks:

That is a nice stop-gap 👍

But if redesign is in order, then using Neovim's own default color scheme for the whole site might be the way to go 🤔

Eventually. Probably should migrate away from jekyll first.