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.

[sabine]

I am sorry, but what has been merged has neither gone through a vote nor meets WCAG standards.