Цвет

Тема для редактора

Из палитры собирает тему VS Code: цвета интерфейса и подсветки синтаксиса, с живым превью кода и готовым JSON.

Основа

Название темы

Тип

Цвета

Фон редактораПанели и вкладкиАкцент и статусбарОбычный текстКомментарииКлючевые словаСтрокиЧислаФункцииПеременныеТипы и классыКонстанты

Превью

vat.tsutils.tsindex.ts

 1// Считает НДС и возвращает готовую строку
 2import { formatMoney } from './format';
 3
 4const RATE = 0.2;
 5
 6export function withVat(amount: number) {
 7  if (!Number.isFinite(amount)) return '—';
 8  return formatMoney(amount * (1 + RATE));
 9}

main · 0 ошибок · UTF-8

Тема VS Code

{
  "name": "Полночь",
  "type": "dark",
  "colors": {
    "editor.background": "#11131a",
    "editor.foreground": "#d5d9e5",
    "editorLineNumber.foreground": "#6b7280",
    "editorLineNumber.activeForeground": "#d5d9e5",
    "editorCursor.foreground": "#6366f1",
    "editor.selectionBackground": "#6366f144",
    "editor.lineHighlightBackground": "#171a23",
    "sideBar.background": "#171a23",
    "sideBar.foreground": "#d5d9e5",
    "activityBar.background": "#171a23",
    "activityBar.foreground": "#d5d9e5",
    "statusBar.background": "#6366f1",
    "statusBar.foreground": "#000000",
    "titleBar.activeBackground": "#171a23",
    "titleBar.activeForeground": "#d5d9e5",
    "tab.activeBackground": "#11131a",
    "tab.inactiveBackground": "#171a23",
    "tab.activeForeground": "#d5d9e5",
    "tab.border": "#00000055",
    "panel.border": "#00000055",
    "terminal.background": "#11131a",
    "terminal.foreground": "#d5d9e5"
  },
  "tokenColors": [
    {
      "name": "Комментарии",
      "scope": [
        "comment",
        "punctuation.definition.comment"
      ],
      "settings": {
        "foreground": "#6b7280",
        "fontStyle": "italic"
      }
    },
    {
      "name": "Ключевые слова",
      "scope": [
        "keyword",
        "storage",
        "storage.type",
        "keyword.control",
        "keyword.operator.new"
      ],
      "settings": {
        "foreground": "#c084fc"
      }
    },
    {
      "name": "Строки",
      "scope": [
        "string",
        "string.quoted",
        "constant.character.escape"
      ],
      "settings": {
        "foreground": "#86efac"
      }
    },
    {
      "name": "Числа",
      "scope": [
        "constant.numeric"
      ],
      "settings": {
        "foreground": "#fbbf24"
      }
    },
    {
      "name": "Функции",
      "scope": [
        "entity.name.function",
        "support.function",
        "meta.function-call"
      ],
      "settings": {
        "foreground": "#60a5fa"
      }
    },
    {
      "name": "Переменные",
      "scope": [
        "variable",
        "variable.other.readwrite",
        "meta.definition.variable.name"
      ],
      "settings": {
        "foreground": "#e2e8f0"
      }
    },
    {
      "name": "Типы и классы",
      "scope": [
        "entity.name.type",
        "support.type",
        "support.class",
        "entity.name.class"
      ],
      "settings": {
        "foreground": "#67e8f9"
      }
    },
    {
      "name": "Константы",
      "scope": [
        "constant.language",
        "variable.other.constant",
        "support.constant"
      ],
      "settings": {
        "foreground": "#f472b6"
      }
    }
  ]
}

Файл кладётся в ~/.vscode/extensions/<имя>/themes/ рядом с package.json расширения, либо подключается через «Developer: Generate Color Theme From Current Settings».

Те же цвета переменными CSS

:root {
  --code-background: #11131a;
  --code-surface: #171a23;
  --code-plain: #d5d9e5;
  --code-comment: #6b7280;
  --code-keyword: #c084fc;
  --code-string: #86efac;
  --code-number: #fbbf24;
  --code-function: #60a5fa;
  --code-variable: #e2e8f0;
  --code-type: #67e8f9;
  --code-constant: #f472b6;
  --code-accent: #6366f1;
}