(themes) Add tokyo-night-dark

[Vanderscycle]

Added a color-close tokyonight theme

Added the tokyonight theme inspired by vscode

Changes

new css file supporting tokyonight

Checklist

• Added markup tests (todo)
• Updated the changelog at CHANGES.md

[joshgoebel]

Please show us what it looks like and attach the results of running our theme checker utility against your theme.

[Vanderscycle]

@joshgoebel,
Hey thank you for getting back to me here's a snapshot of what the code looks like. Its as accurate as I can do right now with the new code.

I am using svelte-highlight which in turns uses highlight.js for themes. I am not familiar with the code base and how to test my theme the hightlight.js way. So I am using svelte highlight with my custom file.

<style lang="postcss"></style>

<script lang="ts">


$: code = `  // swagger config
  const config = new DocumentBuilder()
    .setTitle('A51-21e8 node')
    .setDescription(
      'Still confused about levelDown and its nestJs integrations',
    )
    .setVersion('.01')
    .build();
  const document = SwaggerModule.createDocument(app, config);
  SwaggerModule.setup('/docs', app, document);

  await app.listen(process.env.SERVER_PORT ?? 3100, '0.0.0.0', async (err, address) => {
    if (err) {
      Logger.warn(err)
      process.exit(1)
    } else {
      Logger.log("Application is running" , 'main.ts')
    }
  })
`;
import { Highlight } from "svelte-highlight";
import typescript from "svelte-highlight/src/languages/typescript";
import tokyoNightDark from "../lib/ui/tokyo-night-dark.css";
</script>

<svelte:head>
  {@html tokyoNightDark}
</svelte:head>

<template>
  <div class="bg-terminalStorm"> <!-- terminalStorm: "#24283b" -->
    <pre><code><Highlight language="{typescript}" code="{code}" /></code></pre>
  </div>
</template>

[joshgoebel]

Looks pretty. Please run ./tools/checkTheme.js against your CSS file and paste results here...

[Vanderscycle]

Does that mean that I am missing several css tags like .hjls-doctag/hljs-code?

❯  ./tools/checkTheme.js src/styles/tokyonight-dark.css
Templates/HTML/XML, etc.
- Theme does not fully support.
- scope attr is not highlighted
 (css: .hljs-attr)
- scope template-tag is not highlighted
 (css: .hljs-template-tag)

CSS/Less/etc
- Theme does not fully support.
- scope selector-attr is not highlighted
 (css: .hljs-selector-attr)
- scope selector-pseudo is not highlighted
 (css: .hljs-selector-pseudo)

Markup (Markdown, etc)
- Theme does not fully support.
- scope code is not highlighted
 (css: .hljs-code)
- scope formula is not highlighted
 (css: .hljs-formula)

program code
- Theme does not fully support.
- scope property is not highlighted
 (css: .hljs-property)
- scope subst is not highlighted
 (css: .hljs-subst)
- scope doctag is not highlighted
 (css: .hljs-doctag)
- scope attr is not highlighted
 (css: .hljs-attr)

nice to haves (optional, but many grammars use)
- Theme does not fully support.
- scope meta keyword is not highlighted
 (css: .hljs-meta .hljs-keyword)
- scope meta string is not highlighted
 (css: .hljs-meta .hljs-string)

high fidelity highlighting (this is optional)
- Theme does not fully support.
- scope title.class is not highlighted
 (css: .hljs-title.class_)
- scope title.class.inherited is not highlighted
 (css: .hljs-title.class_.inherited__)
- scope punctuation is not highlighted
 (css: .hljs-punctuation)
- scope operator is not highlighted
 (css: .hljs-operator)
- scope title.function is not highlighted
 (css: .hljs-title.function_)
- scope char.escape is not highlighted
 (css: .hljs-char.escape_)
- scope variable.language is not highlighted
 (css: .hljs-variable.language_)

Accessibility Report
┌───────┬────────────────────────────────────────┬──────────┬──────────┐
│ ratio │ selector                               │ fg       │ bg       │
│ 2.35  │ .hljs-comment,.hljs-quote              │ #565f89  │ #24283b  │
│ 5.51  │ .hljs-variable,.hljs-template-variabl… │ #f7768e  │ #24283b  │
│ 7.16  │ .hljs-number,.hljs-built_in,.hljs-lit… │ #ff9e64  │ #24283b  │
│ 7.28  │ .hljs-attribute                        │ #e0af68  │ #24283b  │
│ 7.97  │ .hljs-string,.hljs-symbol,.hljs-bulle… │ #9ece6a  │ #24283b  │
│ 5.78  │ .hljs-title,.hljs-section              │ #7aa2f7  │ #24283b  │
│ 6.3   │ .hljs-keyword,.hljs-selector-tag       │ #bb9af7  │ #24283b  │
│ 14.57 │ .hljs                                  │ #ffffff  │ #24283b  │
└───────┴────────────────────────────────────────┴──────────┴──────────┘

[joshgoebel]

Does that mean that I am missing several css tags like .hjls-doctag/hljs-code?

Exactly. :-) Generally you don't want to see "- Theme does not fully support." messages.

Also, I'd recommend pulling the contrast a bit on your .hljs-comment,.hljs-quote colors... we really don't like to see anything below a 3... and 4.5 is what it would take to fully be WCAG 2.0 Level AA compliant.

Reference: https://webaim.org/resources/contrastchecker/

[Vanderscycle]

@joshgoebel, made the changes. Is there a way to quickly generate a preview of my theme?

❯ ./tools/checkTheme.js src/styles/tokyonight-dark.css
nice to haves (optional, but many grammars use)
- Theme does not fully support.
- scope meta keyword is not highlighted
  (css: .hljs-meta .hljs-keyword)
- scope meta string is not highlighted
  (css: .hljs-meta .hljs-string)

high fidelity highlighting (this is optional)
- Theme does not fully support.
- scope punctuation is not highlighted
  (css: .hljs-punctuation)
- scope title.function is not highlighted
  (css: .hljs-title.function_)
- scope char.escape is not highlighted
  (css: .hljs-char.escape_)
- scope variable.language is not highlighted
  (css: .hljs-variable.language_)

Accessibility Report
┌───────┬────────────────────────────────────────┬──────────┬──────────┐
│ ratio │ selector                               │ fg       │ bg       │
│ 2.76  │ .hljs-comment                          │ #565f89  │ #1a1b26  │
│ 6.46  │ .hljs-variable,.hljs-template-variabl… │ #f7768e  │ #1a1b26  │
│ 8.4   │ .hljs-number,.hljs-built_in,.hljs-lit… │ #ff9e64  │ #1a1b26  │
│ 8.55  │ .hljs-attribute                        │ #e0af68  │ #1a1b26  │
│ 9.96  │ .hljs-title,.hljs-title.class_,.hljs-… │ #7dcfff  │ #1a1b26  │
│ 9.35  │ .hljs-quote,.hljs-string,.hljs-symbol… │ #9ece6a  │ #1a1b26  │
│ 6.79  │ .hljs-code,.hljs-formula,.hljs-section │ #7aa2f7  │ #1a1b26  │
│ 7.39  │ .hljs-meta,.hljs-keyword,.hljs-operat… │ #bb9af7  │ #1a1b26  │
│ 10.59 │ .hljs                                  │ #c0caf5  │ #1a1b26  │
└───────┴────────────────────────────────────────┴──────────┴──────────┘

[joshgoebel]

Is there a way to quickly generate a preview of my theme?

From the source code you can build the browser target then open build/demo/index.html to browse all the themes.

[Vanderscycle]

Would you be able to point to the right variable names? For example the #!/bin/bash shoudn't be purple but I am a tad confused about the semantic of all the tags as it sounds similar.

Updated view:

The browser env

The TokyioNight Dark theme that I use on nvim

[joshgoebel]

Use tools/developer.html for more visibility of what the highlighter is doing. It only requires you to first build the browser build.

[Vanderscycle]

ok so I played with the tools and it helped, these are my final results.

nice to haves (optional, but many grammars use)
- Theme does not fully support.
- scope meta keyword is not highlighted
  (css: .hljs-meta .hljs-keyword)
- scope meta string is not highlighted
  (css: .hljs-meta .hljs-string)

Accessibility Report
┌───────┬────────────────────────────────────────┬──────────┬──────────┐
│ ratio │ selector                               │ fg       │ bg       │
│ 2.76  │ .hljs-meta,.hljs-comment               │ #565f89  │ #1a1b26  │
│ 6.46  │ .hljs-tag,.hljs-doctag,.hljs-selector… │ #f7768e  │ #1a1b26  │
│ 8.4   │ .hljs-variable,.hljs-template-variabl… │ #ff9e64  │ #1a1b26  │
│ 8.55  │ .hljs-built_in,.hljs-attribute         │ #e0af68  │ #1a1b26  │
│ 8.11  │ .hljs-selector-tag                     │ #2ac3de  │ #1a1b26  │
│ 9.96  │ .hljs-keyword,.hljs-title.function_,.… │ #7dcfff  │ #1a1b26  │
│ 10.26 │ .hljs-selector-tag                     │ #73daca  │ #1a1b26  │
│ 9.35  │ .hljs-quote,.hljs-string,.hljs-symbol… │ #9ece6a  │ #1a1b26  │
│ 6.79  │ .hljs-code,.hljs-formula,.hljs-section │ #7aa2f7  │ #1a1b26  │
│ 7.39  │ .hljs-name,.hljs-keyword,.hljs-operat… │ #bb9af7  │ #1a1b26  │
│ 10.59 │ .hljs-punctuation                      │ #c0caf5  │ #1a1b26  │
│ 7.04  │ .hljs                                  │ #9aa5ce  │ #1a1b26  │
└───────┴────────────────────────────────────────┴──────────┴──────────┘

[joshgoebel]

Sorry, one last thing.... should we not name this tokyo-night-dark for readability?

[joshgoebel]

@Vanderscycle Thanks fo much!