LINUX.ORG.RU

Как сделать годную тему подсветки синтаксиса самому?

 


4

2

Такое дело. Хочу хорошую цветовую тему для емакса. Перебрал кучу готовых, но все не по душе мне. Остаётся вариант делать самому. Но как? Простым экспериментированием не получается - слишком уж много вариантов нужно перебрать, и не очевидно сразу какой цвет с каким нормально смотрится, а какой нет. Нужен научный подход, в общем. Стал гуглить, нашёл только туториал на w3schools https://www.w3schools.com/colors/default.asp

Там есть пять подходов для определения базовых цветов темы (монохромный, аналоги, противоположные, triadic, compound). Но совершенно не раскрывается какой из них правильный, а какой нет. Хотя казалось бы, блин, методы аналогичных цветов и противоположных в корне отличаются!

В общем, посоветуйте как научиться понимать, сочетаются ли цвета друг с другом или не сочетаются. За ссылки на годные статьи благодарен.

ПС. Слышал, что соларайзед - мол самая научно-обоснованная тема, но как по мне её темная версия - очень вырвиглазна. :(

Перемещено shell-script из talks

★★★★★

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

На деле не так уж и много вариантов. Ставишь из готовых наиболее годную тему, а потом меняешь только то, что в ней не устраивает. Список основных названий для редактирования здесь: https://www.gnu.org/software/emacs/manual/html_node/elisp/Faces-for-Font-Lock...
Применяется в ~/.emacs так (например, для изменения цвета комментариев):

(set-face-foreground 'font-lock-comment-face "#1A00FF")

dadd ★★ ()

90% «тема нравится / не нравится» зависит тупо от беспонтового фона, просто поменяй его. Если надо прям кастом, то берешь свой фон, идешь на color-hex.com, красишь ему body/прочие контейнеры в этот цвет, выбираешь палитру.

anonymous ()

Stop doing that!

Волею слабеющего зрения вынужден был поперебирать. И вот, что понял. Идеальная раскраска текста содержит 2 «цвета» – выделеный(для важного) и приглушеный(для boilerplate). Можно добавить «нормальный» – для чего-то среднего, но если код имеет столько уровней ненужности, вероятно стоит прятать его в складки или менять язык.

Больше – совсем не нужно. В самом деле, о чём в твоём коде будет говорить слово цвета бедра испуганной нимфы? Если цветов больше – они все перестают что-то означать, смысл раскраски теряется. Разве что настроение поднимать.

Синтаксиса в этот трит много не засунешь – нужен какой-то более хитрый способ определения, на что сейчас стоит обратить твоё внимание.

соларайзед - мол самая научно-обоснованная тема

Сейчас установлена. Половина вариантов нечитаема(если посмотреть все на табличке). Особенно доставляют сообщения об ошибках «красное» на «красном»(т.е. они то разные красные, но мне не различить). Это не означает, что оно не лучшее из.

DonkeyHot ★★★★★ ()

Как сделать годную тему подсветки синтаксиса самому?

У меня художественных способностей — 0, поэтому я годную (для меня, конечно) схему сделал методом вычисления.

1. Берешь цветовое пространство LCH (Lightness, Chroma, Hue). Ligthness в дипазоне [0..100]; Chroma — [0..100]; Hue — [0..360].

Почему LCH? Я хотел, чтобы синтаксические элементы различались оттенком, а не яркостью. В RGB это сделать трудно, а в LCH — элементарно, см. следующий пункт.

2. Выбираешь n базовых оттенков (я взял 7), и располагаешь их равномерно по цветовому кругу. У тебя получается n значений Hue: H(i)=360/n*i. Эти n оттенков я использовал для синтаксиса. Кроме них, в некоторых случаях используются и другие цвета: например, для показа диффов и патчей используется зелёный (новые строки), красный (удалённые).

Почему равномерно? Я хочу чтобы оттенки *максимально* отличались друг от друга, и в данном случае «максимально» надо воспринимать буквально, а не как модное, но бессмысленное слово.

3. Выбираешь несколько градаций Lightness. Я брал 4: условно Dark, Dimmed, Normal, Bright. Dark используется только для фона, Normal используется почти везде, в редких случаях в ход идут Dimmed и Bright.

4. Выбираешь несколько градаций Chroma. Я выбрал 4, условно: Low, Normal, High, VeryHigh. Normal используется почти везде, остальные — в редких случаях.

5. Далее, используя эти значения L, C, H, получаешь палитру, которую пересчитываешь в RGB для использования в редакторе, так как редкий редактор понимает цвет, заданный в LCH. Палитра получается большая, но в основном используются 7 цветов (оттенки нормальной яркости и цветности).

Я написал скрипт для пересчёта LCH в RGB, а конфиг файл для Geany сделал с помощью M4. Далее чутка поэксперементировал, подбирая конкретные значения для переменных Dark/Dimmed/Normal/Bright и Low/Normal/High/VeryHigh по своему вкусу.

Вот, для примера:

define(`N',               `7')
define(`HueBackticks',    eval(360/N*0))
define(`HuePreprocessor', eval(360/N*1))
define(`HueDocument',     eval(360/N*2))
define(`HueString',       eval(360/N*3))
define(`HueIdentifier',   eval(360/N*4))
define(`HueNumber',       eval(360/N*5))
define(`HueRegex',        eval(360/N*6))

...

#
#   Colors for syntax highlighting:
#

# Foreground colors:
define(fg_backticks,    Color(Backticks))
define(fg_preprocessor, Color(Preprocessor))
define(fg_document,     Color(Document))
define(fg_string,       Color(String))
define(fg_identifier,   Color(Identifier))
define(fg_number,       Color(Number))
define(fg_regex,        Color(Regex))
define(fg_error,        Color(20, Normal, VeryHigh))

# Two color variations:
define(fg_comment,      Color(Document, Dimmed))
define(fg_keyword,      Color(Identifier, Normal, Low))

#
#   Editor colors:
#

define(fg_default,      fg_document)
define(bg_default,      Color(Document, Dark, Low))
define(bg_current,      Blackest)
define(fg_caret,        Whitest)

define(fg_auxiliary,    Color(Gray, Dimmed))
define(fg_auxiliary_hi, Color(Gray, Dimmed))
define(fg_marker,       Color(Green,  Bright, VeryHigh))
define(bg_marker,       Color(Green,  Dimmed))
define(bg_search,       Greenest)
define(bg_error,        Reddest)

#
#   Diff colors:
#

define(fg_added,        Color(Green))
define(fg_changed,      Color(Blue))
define(fg_deleted,      Color(Red))
define(fg_untouched,    Color(Gray, Dimmed))

Color — это макро с тремя параметрами: Hue, Lightness, Chroma. Если Lightness и Chroma не указаны, берутся значения, соответствующие Normal.

debugger ★★ ()
Последнее исправление: debugger (всего исправлений: 2)

Там есть пять подходов для определения базовых цветов темы (монохромный, аналоги, противоположные, triadic, compound). Но совершенно не раскрывается какой из них правильный, а какой нет.

Правильный - мой: https://github.com/t184256/vim-boring/blob/master/colors/boring.vim

Ладно, ладно, шучу. Смотри, как надо: https://github.com/Lokaltog/vim-monotone Есть даже путь слегка плавного отучения от радужного взрыва

t184256 ★★★★★ ()
Ответ на: Stop doing that! от DonkeyHot

Ну покажи хоть как выглядит твоя монохромная тема..

Я, кстати, тоже пришел к выводу, что темы с миллионом цветов, пытающиеся подсветить каждый токен – не нужны. В результате получается какая-то радужная кокофония, подсветки больше, чем обычного текста, и смысл подсветки вообще теряется. Неспешно пытаюсь найти тему с минимальной подсветкой.

Im_not_a_robot ★★★★ ()
Ответ на: комментарий от debugger

Это очень интересный подход, спасибо что поделились. Единственное что вопрос различия между цветами немного глубже чем разница их Hue. Там вообще зубодробильные формулы. https://en.wikipedia.org/wiki/Color_difference

Но ваш подход обязательно опробую!

provaton ★★★★★ ()
Ответ на: комментарий от e1nste1n

скриншот было бы интересно увидеть

Скриншот. Это пример C++, там нет ни регулярок, ни бактиков — поэтому два тона не задействованы.

Кстати, на скриншоте видно ещё одно моё «ноу-хау»: цвет фона текущей строки — темнее чем общий цвет фона. Обычно делают наоборот: текущую строку выделяют более светлым фоном, делая текст на текущей строке менее контрастным. Мне показалось лучше повысить контраст на текущей строке.

Правда, там написано «не подтверждено», видимо, каждый скриншот модерируют.

debugger ★★ ()
Последнее исправление: debugger (всего исправлений: 2)
Ответ на: комментарий от provaton

…вопрос различия между цветами немного глубже чем разница их Hue. Там вообще зубодробильные формулы.

Lightness и Chroma фиксированы. Различие только в Hue. Из всей зубодробительной формулы остаётся только один член… Будем считать, что я им пренебрёг. Но ты можешь учесть и его.

Кстати, пересчёт из LCH в RGB тоже не тривиальный.

debugger ★★ ()
Ответ на: комментарий от provaton

Но ты же прекрасно понимаешь, что цветовые предпочтения дичайше субъективны. Предпочтения в выборе из найденных тобой научных подходов субъективны тем более.
А о «сочетаются - не сочетаются цвета», обычно всегда спорят в полиграфии или дизайне чего угодно. Но там, чем ближе к краю, тем всё меньше связано с наукой и всё больше с баблом.

blexey ★★★★ ()

Там есть пять подходов для определения базовых цветов темы (монохромный, аналоги, противоположные, triadic, compound). Но совершенно не раскрывается какой из них правильный, а какой нет.

Все правильные.

В общем, посоветуйте как научиться понимать, сочетаются ли цвета друг с другом или не сочетаются. За ссылки на годные статьи благодарен.

Чтением и следованием неким правилам? Никак. Это субъективное, но не совсем. Субъективное для общества, а не только индивида. Если хочешь «научиться» — просто развивай чувство прекрасного — смотри, сравнивай, особенно обращая внимание на то, что общепризнанно красиво или общепризнанно некрасиво. Ну или забей и будь «нитакимкаквсе» — это тоже в моде.

ПС. Слышал, что соларайзед - мол самая научно-обоснованная тема, но как по мне её темная версия - очень вырвиглазна.

В той науке, что за ней, теория с практикой расходятся. Наука строится на эксперименте в первую очередь, а не «мы тут решили вот то и вон это притянуть за уши — это ж учёные сказали, а они плохого не скажут», причём по выбору автора что именно притянуть. На практике же выходит, что у многих (но не у всех) от этой самой соларайзед устают глаза быстрее, чем от других тем.

Короче, нет здесь правды и чётко выверенной лучшей схемы (если бы она была возможна — давно б уже все пришли к общему знаменателю кроме единиц самых особенных, а не как сейчас). Выбери, с какой из тех, что есть, тебе лично наиболее комфортно (не просто «нравится», а попробуй поработать некоторое время, чтоб понять, не напрягает ли), а потом потихоньку правь те моменты, что не нравятся.

anonymous ()

Теория - это составить такую цветовую палитру, в которой у всех цветов будет что-то общее. Вот как бы самый базис, основная идея, больше тут ничего особо не придумаешь. Дальше можно попробовать сделать так, чтобы все цвета смещались с определенным шагом по «общему показателю». Если хочется экзотического, то смешать несколько разных гармоничных палитр в одну. И так далее, дальше это обсуждать уже не особо интересно.

Но теория - это понятие базовой гармонии - сходства между всеми элементами палитры. Больше тут нечего рассказывать.

anonymous ()