Better Code Highlighting Color Scheme Showdown

[sabine]

Task

The color scheme for the code highlighting in the code blocks in the OCaml.org Learn area could be better.

The current color scheme is this:

(https://ocaml.org/docs/multicore-transition)

span[class*="keyword"] {
  color: #fede5d;
}

span[class*="constant"] {
  color: #fabd2f;
}

span[class*="function-binding"] {
  color: #36f9f6;
}

span[class*="variable"] {
  color: #85ebeb;
  font-style: italic;
}

span[class*="support"] {
  color: #83a598;
}

span[class*="comment"] {
  font-style: italic;
}

span[class*="literal"] {
  color: #d3869b;
}

span[class*="string"] {
  color: #b8bb26;
}

span[class*="numeric"] {
  color: #ff5683;
}

Respond with a new color scheme. Color scheme must meet WCAG contrast requirements. (Use a WCAG checker, e.g. https://webaim.org/resources/contrastchecker/ to check.)

When we have more than one submission, let's do an elimination game where the different color schemes face off against each other: People vote to determine the better option in rounds of pairs of two until a single champion emerges.

For the showdown, we need one code block that exhibits all the different highlight colors. I haven't checked if the code block in question here has all of the colors. If it doesn't, we need another code block to show off everything.

[sabine]

@AndroGenius-codes Anyone can send in a proposed new color scheme. In the end we'll let people vote for what they like best and the winning color scheme will be merged.

[huwaireb]

GitHub  —  Website

✅ WCAG Contrast Compliance

Preview

[kiyov09]

Gruvbox 🔥

https://github.com/morhetz/gruvbox

Previews

ocaml.org

Inside nvim

Note in nvim it looks a little different.

[sabine]

I think we need some more lighter submissions here, in addition.

[jfontdev]

Atom onedark Light version:

Vscode: https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onelight
Nvim: https://github.com/navarasu/onedark.nvim

PREVIEW

On Vscode:

span[class*="keyword"] {
  color: #A626A4;
}

span[class*="constant"] {
  color: #986801;
}

span[class*="function-binding"] {
  color: #4078F2;
}

span[class*="variable"] {
  color: #4078F2;
  font-style: italic;
}

span[class*="support"] {
  color: #0184BC;
}

span[class*="comment"] {
  color: #A0A1A7;
  font-style: italic;
}

span[class*="string"] {
  color: #50A14F;
}

span[class*="numeric"] {
  color: #986801;
}

On Nvim:

[Ozyugoo]

Hi @sabine I am Stella Ugoo-Okonkwo, an Outreachy intern. I tried out these

span[class*="keyword"] {
color: #ffdc00;
}

span[class*="constant"] {
color: #ff851b;
}

span[class*="function-binding"] {
color: #39cccc;
}

span[class*="variable"] {
color: #b10dc9;
font-style: italic;
}

span[class*="support"] {
color: #ff4136;
}

span[class*="comment"] {
color: #2ecc40;
font-style: italic;
}

span[class*="literal"] {
color: #7fdbff;
}

span[class*="string"] {
color: #ffdc00;
}

span[class*="numeric"] {
color: #ff80cc;
}

[Ozyugoo]

Hi, @SaySayo kindly take a look at this.