highlight.js theme labs

experimenting with some things

by Nicholas Berlette

HTML

<pre data-theme="cyberpunk"><code class="lang-ts"><span class="hljs-keyword">let</span> <span class="hljs-attr">foo</span>: <span class="hljs-built_in">string</span> | <span class="hljs-literal">null</span> = <span class="hljs-string">&quot;bar&quot;</span>;
<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(foo);

<span class="hljs-keyword">class</span> <span class="hljs-title class_">Bar</span> {
  <span class="hljs-keyword">static</span> <span class="hljs-keyword">readonly</span> foobar = <span class="hljs-string">&quot;foobar&quot;</span>;
}

<span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Bar</span>.<span class="hljs-property">foobar</span>);
</code></pre>

CSS

:root {
  background-color: #ddd;
}

@media (prefers-color-scheme: dark) {
  :root {
    background-color: #223 !important;
  }  
}

pre {
  background-color: inherit;
  border: none;
}
pre code {
  display: block;
  background: #2d2d2d;
  color: #cccccc;
  font-family: 'Operator Mono SSm', 'Operator Mono', 'Dank Mono', 'DM Mono', 'IBM Plex Mono', Menlo, Monaco, Consolas, ui-monospace, monospace;
  line-height: 1.5;
  border: 1px solid #fff;
  padding: 10px;
  border-radius: 8px;
  overflow: clip;
  background-clip: border-box;
  box-sizing: content-box;
}

pre {
  border: none;
}

/* Dark Orange Theme */
:root {
  --selection: rgba(224, 146, 58, 0.35);
  --background: #242424;
  --text: #ffffff;
  --string: #67b26d;
  --number: #e8a04e;
  --title: #9e4ee8;
  --built_in: #e25158;
  --keyword: #e5b742;
  --function: #e0923a;
  --params: #508be5;
  --comment: #7f7f7f;
}

/* Tomorrow Night Eighties Theme */
[data-theme="tomorrow-night"] {
  --selection: rgba(255, 100, 200, 0.35);
  --background: #1b1b1b !important;
  --comment: #999999 !important;
  --built_in: #f2777a !important;
  --params: #f99157 !important;
  --background: #2d2d2d !important;
  --number: #f99157 !important;
  --string: #99cc99 !important;
  --title: #ffcc66 !important;
  --selection: #66cccc !important;
  --function: #6699cc !important;
  --keyword: #cc99cc !important;
}

/* Cyberpunk Theme */
[data-theme="cyberpunk"] {
  --selection: rgba(255, 100, 200, 0.35);
  --background: #242424;
  --text: #ffffff;
  --string: #67fca8;
  --number: #44ead9;
  --title: #9e4ee8;
  --built_in: #ea5452;
  --keyword: #bc368b;
  --function: #e552ea;
  --params: #508be5;
  --comment: #7f7f7f;
}

pre code {
  display: block;
  overflow-x: auto;
  padding: 10px;
  background: var(--background);
  -webkit-text-size-adjust: none;
}

pre code *::selection,
.hljs::selection {
  background: var(--selection) !important;
}

.hljs {
  color: var(--text);
}

.hljs-string {
  color: var(--string);
}

.hljs-number {
  color:...