tender-vscode

A VSCode theme heavily inspired by the tender.vim colorscheme.

Clone and run for a quick way to get started with vscode-theme-generator.

Screenshots

Install

1. Go to VS Marketplace.
2. Click on the "Install" button.
3. Then select a theme.
   • Tender

How to build the theme

You will need NodeJS installed to run the generator as well as well as the vsce module.

npm install -g vsce
npm install

Make your changes to the colors in index.ts and hit F5 to build the theme and launch a new VS Code window with your theme available in the command palette (ctrl/cmd+shift+p > "Color Theme").

To skip the debugging step simply run the nmp run command to generate the theme.

npm run prestart && npm run start

Then install the theme locally to test.

code --install-extension tender-<version>.vsix

Publishing

See here for more information on how to publish a VSCode Extension.

When you're ready to publish, run the following commands.

// If not logged into the VS Code Extension Marketplace, first login
vsce login <username>
// Then package the theme
vsce package

// Bump the version number and publish
vsce publish minor

Customizing the theme

Currently there are some colors that are not generated automatically. To work around this, you can set colors for specific tokens that should be overridden.

For example, add the following snippet to your settings.json to customize the theme further.

"editor.tokenColorCustomizations": {
    "[Tender]": {
      "textMateRules": [
        {
          "scope": [
            "punctuation.separator.dictionary.key-value.json",
            "punctuation.separator.dict",
            "punctuation.separator.key-value",
            "keyword.operator"
          ],
          "settings": {
            "foreground": "#f43753",
          }
        },
        {
          "scope": [
            "punctuation.separator",
            "punctuation.other",
            "constant.other.placeholder",
            "entity.name.function",
            "entity.name.function.shell",
            "entity.name.function.python"
          ],
          "settings": {
            "foreground": "#73cef4",
          }
        },
        {
          "scope": "keyword.codetag.notation",
          "settings": {
            "foreground": "#ff7b6b",
          }
        },
        {
          "scope": "keyword.operator.assignment",
          "settings": {
            "foreground": "#eeeeee",
          }
        },
        {
          "scope": "string.quoted",
          "settings": {
            // "foreground": "#A8FF60",
            "foreground": "#b3deef",
          }
        },
        {
          "scope": "constant, constant.language, constant.other.placeholder",
          "settings": {
            "foreground": "#d3b987"
          }
        },
        {
          "scope": "variable.other.normal, variable.other.bracket",
          "settings": {
            // "foreground": "#c9d05c",
            // "foreground": "#ffc24b",
            "foreground": "#d3b987",
          }
        },
      ]
    },
  },