W Visual Studio Code, w bardzo łatwy i prosty sposób możemy dostosować do własnych preferencji ustawienia kolorów motywu. Twórcy VSC, dali możliwość zmiany kolorów programu jak i samej składni. Możemy edytować ustawienia globalnie lub konkretnego motywu.

Zmiana kolorów programu

Zmieniając kolory aktywnego motywu Visual Studio Code, należy przejść w Setings i poleceniem workbench.colorCustomizations przechodzimy do ustawienia WorkBench: Color Customizations. Następnie klikamy Edit in settings.json. Tym sposobem otworzymy plik settings.json. W pliku tym, pewnie już będą znajdowały się przypisane reguły, do którego dopiszemy zmiany koloru motywu.

Zmiana kolorów aktywnego motywu

W pliku settings.json dopiszmy nowe ustawienia jak niżej. Ustawienie te zmieni kolor tła w miejscu, w którym wyświetlany jest kod. Zmiany będę widoczne w czasie rzeczywistym po zapisaniu pliku.

Zmiana koloru tła edytora VSC

"workbench.colorCustomizations": {
    "editor.background": "#212638"
}

W linku poniżej cała lista właściwości motywu

Lista właściwości motywu

Jeżeli do tego chcemy dodać zmianę koloru pliku w Side Bar, który został zmodyfikowany, a nie został zakomitowany, wystarczy dopisać gitDecoration.modifiedResourceForeground z interesującym nas kolorem. Tutaj preferuję postawić na mocny kontrast, aby wiedzieć, że należy zakomitować pliki.

Zmiana koloru pliku do zakomitowania

"workbench.colorCustomizations": {
    "editor.background": "#212638",
    "gitDecoration.modifiedResourceForeground": "#c7c549"
}

Zmiana wybranego motywu

Chcąc wprowadzić zmiany do wybranego motywu, należy podać nazwę motywu i przypisać do niego reguły kolorów.

Kolory przypisane do danego motywu

"workbench.colorCustomizations": {
    "[Tokyo Night Ported Nvim]": {
        "editor.background": "#212638",
        "gitDecoration.modifiedResourceForeground": "#c7c549"
    }
}

Jeżeli te same zmiany dotyczą wielu motywów, należy podać ich nazwy.

Zmiany dla wielu motywów

"workbench.colorCustomizations": {
    "[Tokyo Night Ported Nvim][Monokai]": {
        "editor.background": "#212638",
        "gitDecoration.modifiedResourceForeground": "#c7c549"
    }
}

W przypadku motywów, których nazwa składa się z kilku wyrazów wystarczy podać symbol * przed lub po nazwie.

Zmiany będą dotyczyć wszystkich motywów zaczynających się na Monokai

"workbench.colorCustomizations": {
    "[Monokai*]": {
        "editor.background": "#212638",
        "gitDecoration.modifiedResourceForeground": "#c7c549"
    }
}

Zmiana koloru składni

Osobno można zdefiniować kolor składni za pomocą editor.tokenColorCustomizations. Poniższy przykład zmieni kolor komentarza na zielony.

Zmiana koloru składni – komentarze w kodzie

"editor.tokenColorCustomizations": {
    "comments": "#229977"
}

Tak samo jak w workbench.colorCustomizations również w editor.tokenColorCustomizations można przypisać zmiany do konkretnego motywu lub motywów. Jednak kolorowanie składni nie jest tak proste jak w przypadku samego programu. Po więcej informacji odsyłam na stronę Visual Studio Code.

Podobał się artykuł?