title: How to customize the color of custom syntax tokens in VSCode extension
body: <p><strong>TLDR;</strong> How can I have an extension colorize the syntax the extension is defining without it actually being a color theme the user has to enable?</p>
  
  <p>I'm attempting to port this <a href="https://github.com/tiffon/sublime-to-done" rel="noreferrer">Sublime Text plugin (ToDone)</a> to VSCode.</p>
  
  <p>It creates a grammar for todo lists and then uses syntax highlighting to emphasize important tasks, mute completed tasks, etc.</p>
  
  <p>I found <code>"editor.tokenColorCustomizations"</code>, via <a href="https://code.visualstudio.com/docs/getstarted/themes#_customize-a-color-theme" rel="noreferrer">Customize a Color Theme</a>. It works with the new syntax when I use it in my user settings, but fails when I use it in the <code>package.json#contributes</code> portion of the extension manifest.</p>
  
  <pre><code>{
      "contributes": {
          "languages": [
              {
                  "id": "todone",
                  "aliases": [
                      "ToDone",
                      "To-Done"
                  ],
                  "extensions": [
                      ".todone",
                      ".todo"
                  ]
              }
          ],
          "grammars": [
              {
                  "language": "todone",
                  "scopeName": "text.todone",
                  "path": "./todone.tmLanguage"
              }
          ],
          "configurationDefaults": {
              "[todone]": {
                  "editor.insertSpaces": false,
                  "editor.tokenColorCustomizations": {
                      "textMateRules": [
                          {
                              "scope": "symbol.definition.task-heading.todone",
                              "settings": {
                                  "foreground": "#ff8800"
                              }
                          }
                      ]
                  }
              }
          }
      }
  }
  </code></pre>
  
  <p>So far, the syntax seems ok — it's exactly what is being used by the Sublime plugin and the colors from the user-settings are applied correctly. Also, the format of the settings seems ok because <code>"editor.insertSpaces"</code> is being applied and the colors are working when present in the user-settings.</p>
  
  <p>Lastly, I get a very disappointing <code>'Warning' 'Unknown editor configuration setting'</code> message on the <code>"editor.tokenColorCustomizations"</code> setting in the extension package.json.</p>
  
  <p>So, sounds like this setting is not enabled for extensions?</p>
  
  <p>Another possible route I saw was to use decorators. But, I didn't see anything on inspecting the syntax tokens associated with a portion of text in the docs, e.g. some way to iterate through the syntax tokens of the document to apply decorators. So, the decorator route sounds like the hard-way compared to "editor.tokenColorCustomizations".</p>
  
  <p>Any suggestions on how to make this work would be greatly appreciated.</p>
  
  <hr>
  
  <p><strong>Edit:</strong> The code, so far, is on GitHub: <a href="https://github.com/tiffon/vscode-todone" rel="noreferrer">tiffon/vscode-todone</a></p>