VSC - tworzenie motywu

Podejrzenie ustawień użytkowanego w danym momencie motywu:

VSC -> Commend pallet (ctrl/shift/p) -> run command -> Developer: Generate Color Theme From Current Settings

Tworzenie własnego motywu

Instalacja narzędzia

npm i -g yo generator-code

Uruchomienie narzędzia

yo code

Stworzenie plików dla nowego motywy => Wybranie opcji: New Color Theme -> No, start fresh -> name -> identifier -> name of theme -> dark

W terminalu (przejście do folderu zawierającego pliki nowego motywu):

cd new-theme-name

Plik motywu znajduje się w katalogu themes i jest plikiem json (F5 -> uruchamia podgląd motywu)

Narzędzie służące do identyfikacji poszczególnych części tekstu w edytorze -> ukazuje jakie ustawienia za nie odpowiadają

VSC -> Commend pallet -> Developer: Inspect Editor Tokens and Scopes

Textmate scopes ukazuje w którym miejscu należy zmienić fragment motywu odpowiedzialnego za widok poszczególnej części edytora (kolejność od najbardziej do najmniej szczegółowego)

VSC -> Commend pallet -> Developer: Toogle developers tools

To narzędzie ukazuje narzędzia deweloperskie zbliżone do tych znanych z przeglądarki chrome tylko, że dla VSC :)

Publikowanie

Odpowiednio zmodyfikowany package.json oraz README.md -> np. codestackr-vscode-theme/package.json

Pakowanie -> instalacja VCSE (extensions)

npm i -g vsce

Następnie w folderze gdzie są przygotowane pliki:

vsce package

Plik nazwa_motywu-nrWersji.vsix jest spakowanym motywem, który można używać i rozpowszechniać

Aby wykorzystać ten pakiet, należy zainstalować motyw korzystając z komendy

code --install-extension nazwa_motywu-nrWersji.vsix

Źródło:

How to Create a Custom VS Code Theme (2020) | Step-by-Step | Debut of codeSTACKr Dark Theme