Как добавить тему в код Visual Studio?

Я недавно скачал редактор кода VS, который действительно хорош. но единственная проблема, которую я нахожу в этом, - это цветовая тема, я использую монокайскую цветную тему, как в возвышенном тексте, и я не могу найти способ отредактировать цветную тему или скачать цветную тему, есть только 2 варианта:

  1. Темная тема
  2. Светлая тема

Как я могу добавить свою собственную тему или дублировать существующую, чтобы иметь возможность редактировать цветовую схему, как я хочу?


Мне удается изменить некоторые цвета в следующем файле, но я все еще не знаю, как добавить совершенно новую тему:

resources/app/client/vs/monaco/ui/workbench/native/native.main.css

Похоже, цветовые темы будут доступны в ближайшее время, и это будет частью системы плагинов.

визуально-студия-код / предложения / 7756227-тема

4 ответа

Решение

Visual Studio Code 0.9.0 и выше

Существует официальная документация о том, как добавить пользовательскую тему: https://github.com/Microsoft/vscode-docs/blob/0.9.0/release-notes/latest.md

Тебе необходимо .tmtheme файл для темы, которую вы хотите добавить. Вы можете найти существующие файлы, например, на GitHub, ColorSublime или вы можете определить свой собственный файл темы (например, с помощью https://github.com/aziz/tmTheme-Editor).

После нахождения .tmtheme У вас есть два способа создать расширение на его основе.

Вариант 1: использование йоменского генератора

  • Установите node.js (если вы этого еще не сделали)
  • Установите лет (если вы еще этого не сделали), выполнив npm install -g yo
  • Установите генератор Yo для кода: npm install -g generator-code
  • Бежать yo code и выберите New Color Theme
  • Следуйте инструкциям (определите .tmTheme файл, название темы, пользовательский интерфейс и т. д.)
  • Генератор создает каталог для вашего расширения с именем темы в вашем текущем рабочем каталоге.

Вариант 2. Создайте каталог самостоятельно

  • Создайте каталог с названием вашего плагина (только строчные буквы). Допустим, мы называем это mytheme,
  • Добавить подпапку themes и поместите .tmTheme файл внутри него
  • Создать файл package.json внутри корня папки расширения с таким содержимым

    {        
        "name": "theme-mytheme",
        "version": "0.0.1",
        "engines": {
            "vscode": ">=0.9.0-pre.1"
        },
        "publisher": "me",
       "contributes": {
            "themes": [
                {
                    "label": "My Theme",
                    "uiTheme": "vs-dark", // use "vs" to select the light UI theme
                    "path": "./themes/mytheme.tmTheme"
                }
            ]
        }
    }
    

Наконец добавьте ваше расширение в код Visual Studio

Скопируйте папку расширения в каталог расширения. Это:

  • в Windows %USERPROFILE%\.vscode\extensions

  • на Mac/Linux $HOME/.vscode/extensions

Перезапустите VSCode и выберите новую тему в File -> Preferences -> Color Theme

Visual Studio Code 0.8.0

Можно добавить новые темы в Visual Studio Code 0.8.0 (выпущено для инсайдеров 2015-08-31 [стать инсайдером: https://www.instant.ly/s/Y5nt1/nav).

После установки VSCode 0.8.0 или выше сделайте это, чтобы применить собственную тему:

  1. Скачать .tmTheme файл или создать свой собственный (например, с https://github.com/aziz/tmTheme-Editor)
  2. Скопируйте .tmTheme подать в %CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/themes
  3. Зарегистрировать .tmTheme файл в %CODEFOLDER%/resources/app/plugins/vs.theme.starterkit/ticino.plugin.json добавив запись для него, как это:

    {
        "id": "vs-theme-mynewtheme", // internal ID
        "label": "MyNewTheme",       // displayed name for the theme
        "uiTheme": "vs-dark",        // general UI appeareance (
                                     // "vs" for light themes, 
                                     // "vs-dark" for dark themes)
        "path": "./themes/myNewTheme.tmTheme" // file path 
    },  
    
  4. Перезапустите VSCode и выберите новую тему в File -> Preferences -> Color Theme

Добавление совершенно новой темы в настоящее время не поддерживается. Вы можете отправить свои запросы здесь, я уже слышал, что люди просят об этом https://visualstudio.uservoice.com/forums/293070-visual-studio-code

Я обнаружил, что файл - resources/app/client/vs/monaco/ui/workbench/native/native.main.css - также является подходящим местом для изменения способа отображения шрифтов. Я пытался выяснить, как отключить сглаживание шрифтов в OS X, и обнаружил, что вы можете сделать это здесь, добавив это правило CSS в файл -

.monaco-editor {
  -webkit-font-smoothing: none;  
}

Добавляя к ответу Воси, чтобы тема распознавалась и отображалась в VSC, убедитесь, что:

  • package.json не имеет комментариев (в .nls.json и theme.json они могут быть)
  • package.json соответствует имени родительской папки
  • theme.json'snameМатчиid
Другие вопросы по тегам