How to customize VSCode theme with textmate

1 min read
export const theme = {
  // The colour variables are mainly from rauno
  name: 'code-block-theme',
  type: 'light',
  tokenColors: [
    {
      scope: ['comment'],
      settings: { foreground: 'hsl(0 0% 52.3%)' },
    },

    {
      scope: ['string'],
      settings: { foreground: '#067a6e' },
    },
    {
      scope: ['operator', 'constant', 'script'],
      settings: { foreground: '#000' },
    },
    {
      scope: [
        'entity',
        'constant.numeric',
        'constant.language',
        'string.regexp',
        'support.function',
        'support.constant',
      ],
      settings: { foreground: '#fb7100' },
    },
    {
      scope: ['keyword', 'selector'],
      settings: {
        foreground: 'hsl(206 100% 50.0%)',
      },
    },
    { scope: ['function-variable'], settings: { foreground: '#6f42c1' } },
    {
      scope: [
        'entity.other.attribute-name',
        'keyword',
        'storage.type',
        'punctuation',
      ],
      settings: {
        foreground: '#6f6f6f',
      },
    },
  ],
  semanticHighlighting: true,
  fg: '#000',
  bg: '#fff',
};

Reference

vscode-textmate

language_grammars