Редактор Atom. Изменить внешний вид

В прошлой статье Редактор Atom - аналог Notepad++ начал рассказывать про редактор Atom, который стал для меня основным инструментом разработки. У Atom'a есть преимущество перед Notepad++  - это возможность кастомизации внешнего вида. Расскажу как у меня выглядит редактор.

С редактором Atom пристрастился к тёмной теме. Она доступна из коробки. В настройках называется так:

С тёмным фоном и ярким текстом дисплей в 25" не так давит на глаза. Согласно последним исследованиям, зрение садится не от недостатка освещённости, а от избытка. Могу подтвердить это предположение на собственном опыте: смотреть на чёрный монитор легче.

Но тема по умолчанию в атоме обладает несколькими минусами:

• Задний фон редактора не абсолютно чёрный, а сероватый. Что снижает контрастность с текстом и заставляет глаза напрягаться.
• С чёрной темой неудобно пользоваться скролл-барами: блеклый ползунок практически невозможно поймать мышкой из-за его однопиксельной толщины.
• Комментарии в коде выделяются тускло серым цветом, который сложно читать.
• Адрес ссылки внутри тега выделяется зелёным (таким же, как и любая строка в PHP).

Чтобы устранить все недочёты, зайдите в домашнюю папку (на Linux), затем прейдите в папку /.atom. В ней откройте файл style.less. И в самый конец файла допишите

atom-text-editor { background-color: #000000; }

atom-text-editor::shadow {

.comment.line.double-slash { color: #ffffaa; }
.punctuation.comment { color: #dc6f0c; font-weight:bold; }
.comment { color: #dc6f0c; }
.link.hyperlink { color: #79deff; }

}
.scrollbars-visible-always /deep/ ::-webkit-scrollbar { width: 12px; }

.scrollbars-visible-always /deep/ ::-webkit-scrollbar {

&-thumb {

background-color: rgba(255, 255, 255, 0.7) !important;
border: 0px;
border-radius: 0px;

}

}

.tab-bar .tab[data-type="TextEditor"] {

color: #fff;

}

Затем сохраните файл. Можно не перезапускать Atom - изменения вступят в силу сразу после сохранения файла. Что категорически удобно для подбора хорошего цвета.

Разберём CSS код выше. Первая строка с atom-text-editor задаёт абсолютно чёрный фон для редактора. Вторая строка устанавливает цвет для комментариев и ссылок. Далее стиль для scrollbars-visible-always задаёт ширину скроллбара. И последним идёт задание цвета для скроллбара и обнуление скругления и обводки, которые делают полоску тоньше.

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