Улучшение контрастности темы Material Theme редактора Visual Studio Code

Для Visual Studio Code есть несколько тем в стиле материального дизайна, и все они с недостатками: либо некорретная подстветка синтаксиса, либо проблемы с контрастностью.

У темы Material Theme Mattia Astorino нормальная подсветка синтаксиса, но хочется визуально отделить область кода. На github есть запросы не исправление этих недостатков, но автор что-то не шевелится.

vscode_before_changes

Чтобы это сделать надо немного затемнить неактивные вкладки и проводник, для этого следует внести в пользовательские настройки следующие записи:

{
    ...
    "workbench.iconTheme": "material-icon-theme",
    "workbench.colorTheme": "Material Theme",
    "workbench.colorCustomizations": {
        "editorGroupHeader.tabsBackground": "#1d262a",
        "editorWhitespace.foreground": "#263238", // theme background
        "background": "#FF00FF",
        "badge.foreground": "#B4B4B4",
        "panel.border": "#1d262a",
        "sideBar.foreground": "#B4B4B4",
        "sideBar.background": "#1d262a",
        "statusBar.background": "#1d262a",
        "tab.border": "#546e7a",
        "tab.inactiveForeground": "#B4B4B4",
        "tab.inactiveBackground": "#1d262a",
    },    

    ...
}

В Итоге получится так: vscode_after_changes

Похожие записи

Flexbox или CSS Grid

  • CSS Grid отлично подходит для макетов с нестандартным или асимметричным дизайном.
  • Flexbox отлично подходит для выравнивания содержимого внутри элементов.
  • Нет причин применять только CSS Grid или только Flexbox. Изучайте их и используйте совместно.