Skip to content
@erikakers/slate

The code theme

Tokyo Night by enkia, MIT licensed, reproduced rather than chosen: light is the authentic Tokyo Night Light variant, dark is Tokyo Night, and both carry the theme's own panel background so a code block reads as a window into the editor. Declared in settings/_code.scss; every syntax ratio below is measured on --slate-code-bg by slate-contrast at build time.

The panel

  • --slate-code-bg#E6E7ED#1A1B26
  • --slate-code-fg#343B59#A9B1D6on --slate-code-bg 8.88:1 light · 8.10:1 darkPasses AA 1.4.3 (4.5:1)
  • --slate-code-line#D2D4DC#2A2C3D
  • --slate-code-gutter#575A66#949CB8on --slate-code-bg 5.56:1 light · 6.27:1 darkPasses AA 1.4.3 (4.5:1)
  • --slate-code-line-hl#DADCE4#232433
  • --slate-code-selection#C6CBDD#33394F

The syntax tokens

One set of tokens under all three highlighter vocabularies: Prism's .token.*, highlight.js's .hljs-* and Shiki's css-variables names all map onto --slate-syn-*, so switching highlighter never re-picks colours.

  • --slate-syn-comment#888B94#51597Don --slate-code-bg 2.76:1 light · 2.50:1 darkDocumented exceptionTokyo Night's own comment colour, reproduced from a third-party theme rather than drawn here. Correcting it would make the light and dark variants inauthentic, so the remedy ships beside it in the theme's own hue and is switched on per block with data-contrast=aa. AA remedy: --slate-syn-comment-aa, shown beside it and itself asserted at 4.5:1.
  • --slate-syn-comment-aa#5F626B#7F88AFon --slate-code-bg 4.94:1 light · 4.92:1 darkPasses AA 1.4.3 (4.5:1)
  • --slate-syn-keyword#65359D#BB9AF7on --slate-code-bg 6.68:1 light · 7.39:1 darkPasses AA 1.4.3 (4.5:1)
  • --slate-syn-string#385F0D#9ECE6Aon --slate-code-bg 6.05:1 light · 9.35:1 darkPasses AA 1.4.3 (4.5:1)
  • --slate-syn-number#965027#FF9E64on --slate-code-bg 4.90:1 light · 8.40:1 darkPasses AA 1.4.3 (4.5:1)
  • --slate-syn-function#2959AA#7AA2F7on --slate-code-bg 5.48:1 light · 6.79:1 darkPasses AA 1.4.3 (4.5:1)
  • --slate-syn-type#006C86#0DB9D7on --slate-code-bg 4.88:1 light · 7.27:1 darkPasses AA 1.4.3 (4.5:1)
  • --slate-syn-variable#343B58#C0CAF5on --slate-code-bg 8.90:1 light · 10.59:1 darkPasses AA 1.4.3 (4.5:1)
  • --slate-syn-operator#006C86#89DDFFon --slate-code-bg 4.88:1 light · 11.27:1 darkPasses AA 1.4.3 (4.5:1)
  • --slate-syn-invalid#942F2F#FF5370on --slate-code-bg 6.29:1 light · 5.47:1 darkPasses AA 1.4.3 (4.5:1)
  • --slate-syn-deleted#942F2F#FF5370on --slate-code-bg 6.29:1 light · 5.47:1 darkPasses AA 1.4.3 (4.5:1)
  • --slate-syn-inserted#385F0D#9ECE6Aon --slate-code-bg 6.05:1 light · 9.35:1 darkPasses AA 1.4.3 (4.5:1)

The one recorded exception

--slate-syn-comment measures 2.76:1 light and 2.50:1 dark on --slate-code-bg, below the 4.5:1 every other syntax token is held to. It is not a defect and it is not fixed: the value is Tokyo Night's own comment colour, and correcting it would make the reproduction inauthentic. The record lives in $slate-code-contrast-exceptions beside the palette, with the ground, both measurements, this reason and the remedy.

The remedy ships beside it: --slate-syn-comment-aa, in the theme's own hue, asserted in the requirement list at 4.5:1 (the row above shows its measurement). It is switched on per block or for the whole page:

<div class="slate-code-block" data-contrast="aa">   <!-- this block -->
<html data-code-contrast="aa">                      <!-- every block -->