Trouble defining Themes in a Visual Studio Extension

Question

I have created an Visual Studio Code (VSCODE) extension named: TemplateDL. The language configuration file 'language-configuration.json' and the Grammar file syntaxes/templateDL.tmLanguage.json parse the test file as expected. When I use the Developer: Inspect Editor Tokens and Scopes, all is good. However, I can not seem to get the Themes.

I have tried almost everything I can think of. I resorted to putting the colors in the workspace file templateDL.code-workspace and that seems to work. But I would like to have the themes be available to the users.

I have been able to create the VSIX file using npm run package and I have used the Install the VSIX file into my VSCODE. I verified the files are successfully loaded into the ~/.vscode/extension directory. I did a ls -1 on the directory and the themes are there:

ls -1
templateDL-theme-dark.json
templateDL-theme-light.json

And, when I look at the content, it is as I expected:

{ "$schema"                                  : "vscode://schemas/color-theme",
  "name"                                     : "TemplateDL Theme (Dark)",
  "type"                                     : "dark",   
  "colors"                                   : 
  { "editor.foreground"                      : "#D4D4D4",
    "editor.background"                      : "#282C34"
  },
  "tokenColors": [
    {
      "scope": "source.templateDL constant.language",
      "settings": {
        "foreground": "#ba9249"
      }
    },
    {
      "scope": "constant.character.escape.templateDL",
      "settings": {
        "foreground": "#DA70D6"
      }
    },
    {
      "scope": "keyword.pseudoElement.templateDL",
      "settings": {
        "foreground": "#dfbc2c",
        "fontStyle": "bold"
      }
    }, //...
}

I then go to the Command Palette by pressing Cmd+Shift+P (Mac) and select Preferences: Color Theme. My Themes do not show up.

My package.json file is as follows:

{ "name"                 : "template-definition-language",
  "main"                 : "src/extension.js",
  "activationEvents"     : [ "onCommand:extension.sayHello",
                             "onWorkspaceOpened"  
                           ],
  "displayName"          : "TemplateDL",
  "publisher"            : "DidoSolutions",
  "description"          : "Template Definition Language (templateDL) supports the use of the Template Definition Language as defined by Jackrabbit Consulting.",
  "version"              : "0.9.0",
  "repository"           : "https://github.com/DIDO-Solutions/TdlVsCode/tree/ebd2f815c949db856fade0c196aa8b77cd0e766b/TemplateDL",
  "devDependencies"      : { "vscode"                : "^1.85.1",
                             "vsce"                  : "^1.108.0"
                           },
  "scripts"              : { "package"               : "vsce package" },
  "engines"              :  { "vscode"               : "^1.85.1",
                              "node"                 : "^16.17.0" 
                            },
  "categories"           : [ "Programming Languages"],
  "files.associations"   : { "*.tdl"                 : "templateDL",
                             "*.template"            : "templateDL",
                             "*.templateDL"          : "templateDL",
                             "templateDL.code-workspace" : "templateDL"
                           },
  "files"                : [ "out/**/*.js",
                             "syntaxes/**/*.json",
                             "themes/**/*.json",
                             "templateDL.code-workspace"
                           ],
  "contributes"          : { "languages"             : 
                              [ { "id"               : "templateDL",
                                  "aliases"          : ["TDL Programming Language", "templateDL", "TDL"],
                                  "extensions"       : ["templateDL", "template", "tdl"],
                                  "configuration"    : "language-configuration.json"
                                }
                              ],
                              "grammars"             : 
                              [ { "language"         : "templateDL",
                                  "scopeName"        : "source.templateDL",
                                  "path"             : "syntaxes/templateDL.tmLanguage.json"
                                }
                              ]
                            },
                            "themes"                 : 
                            [ { "label"              : "TemplateDL Dark Theme",
                                "uiTheme"            : "vs-dark",
                                "path"               : "themes/templateDL-theme-dark.json"
                              },
                              { "label"              : "TemplateDL Light Theme",
                                "uiTheme"            : "vs",
                                "path"               : "themes/templateDL-theme-light.json"
                              }
                          ],
                          "snippets" :
                          [ { "language"               : "templateDL",
                              "path"                   : "snippets/templateDL-snippet.json"
                            }
                          ],
    "configuration"                                  : ".vscode/settings.json"
}

The version of VSCODE I am using is:

Commit: 863d2581ecda6849923a2118d93a088b0745d9d6
Date: 2024-03-08T15:21:31.043Z
Electron: 27.3.2
ElectronBuildId: 26836302
Chromium: 118.0.5993.159
Node.js: 18.17.1
V8: 11.8.172.18-electron.0
OS: Darwin x64 23.3.0

I tried to follow the instructions in VS CODE -> Extension Guide -> Themes

Here is the log console:

yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |     
   __'.___.'__   
 ´   `  |° ´ Y ` 

? What type of extension do you want to create? New Color Theme
? Do you want to import or convert an existing TextMate color theme? No, start fresh
? What's the name of your extension? templateDL-color-theme.json
? What's the identifier of your extension? templatedl-color-theme-json
? What's the description of your extension? The color theme for the templateDL extension
? What's the name of your theme shown to the user? TemplateDL Dark Theme
? Select a base theme: Dark
? Initialize a git repository? No

Writing in /Users/robertstavros/Documents/TemplateFoundry/TdlVsCode/templatedl-color-theme-json...
   create templatedl-color-theme-json/themes/TemplateDL Dark Theme-color-theme.json
   create templatedl-color-theme-json/.vscode/launch.json
   create templatedl-color-theme-json/package.json
   create templatedl-color-theme-json/vsc-extension-quickstart.md
   create templatedl-color-theme-json/README.md
   create templatedl-color-theme-json/CHANGELOG.md
   create templatedl-color-theme-json/.vscodeignore

Changes to package.json were detected.
Skipping package manager install.


Your extension templatedl-color-theme-json has been created!

To start editing with Visual Studio Code, use the following commands:

     code templatedl-color-theme-json

Open vsc-extension-quickstart.md inside the new extension for further instructions
on how to modify, test and publish your extension.

For more information, also visit http://code.visualstudio.com and follow us @code.


? Do you want to open the new folder with Visual Studio Code? Open with `code`

I pressed F5 and then used the Theme Picker. It does not show up.

Are there any settings/preferences to enable/disable themes?