LINUX.ORG.RU

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

 


4

2

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

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

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

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

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

★★★★★

Подписываюсь. Сам использую (что более менее понравилось) doom-vibrant. Хотелось бы самому что-нибудь подобрать.

Artamudo ★★★★
()

Блин, писали на вижуал васике в трех цветах и всем всё нормально было, а сейчас выделываются

TooPar
()
Ответ на: комментарий от WitcherGeralt
  • Давай может туалет в доме сделаем, задолбало по морозу на улицу бегать?
  • Не пробовал просто перестать быть неженкой?
provaton ★★★★★
() автор топика

Найми профессионала.

pon4ik ★★★★★
()

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

На деле не так уж и много вариантов. Ставишь из готовых наиболее годную тему, а потом меняешь только то, что в ней не устраивает. Список основных названий для редактирования здесь: 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 ★★★★★
()

Для emacs есть цветовая схема из IntelliJ IDEA? Вот она близка к идеалу.

EXL ★★★★★
()

Цветовые схемы для слабаков. Только монохром. Никаких гирлянд!

naked_joe
()

посоветуйте как научиться понимать, сочетаются ли цвета друг с другом или не сочетаются

man цветовой круг

no-such-file ★★★★★
()

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

У меня художественных способностей — 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 ★★★★★
()

Результат всего годного — резкльтат труда, сын мой.

anonymous
()
Ответ на: 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 ★★★★★
()

Никак. Прими, что родишь только дерьмо и забей и вся подсветка.

anonymous
()

Универсальный подход (в любом редакторе): возьми тему, которая ближе к твоему идеалу за основу и потихоньку ее меняй

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

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

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

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

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

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

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

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

anonymous
()

Лучше даже не начинай.

anonymous
()

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

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

anonymous
()

Поверь, это ни к чему хорошему не приведет. Лучше откажись от этой мысли пока ещё не поздно.

anonymous
()

Демоны тобой овладели. Покайся! Нельзя менять святую тему!

anonymous
()

Подсветка говна для каждого отличается. Все универсальные подсветки говна провалились.

anonymous
()

Зачем что-то выдумывать, если есть monokai?

Dispetcher14 ★★★★★
()
20 декабря 2019 г.
Ответ на: комментарий от WitcherGeralt

Подсветка может сильно снижать производительность, правильная подсветка позволяет либо снижать утомляемость глаз, либо помогает правильно фокусироваться на коде.

AKonia ★★
()

Здравствуйте, уважаемые анальники. Сейчас я расскажу как сделать годную цветовую схему.

научный подход

Начнём с вопроса «для чего человеку цветное зрение?». Стоит ли той затрачиваемой на распознавание цвета энергии, тех миллионов лет эволюции зрительной системы выгода, которую мы получаем? Когда, например, видим что банан жёлтый, а не зелёный? Настолько ли велика разница, если ягода, скажем, красная, а не синяя? Насколько значительно уметь по цвету распознавать сраного хищника в зарослях папоротника? А может быть нам так важно знать, что засмущавшаяся милая особа не плохого о нас мнения, что мы чувствуем разницу между еле отличимыми тонами розового? Или может быть нас серьёзно заботит, что небо голубое, трава зелёная, а кровь красная?

Одно можно сказать с уверенностью: с эволюцией не поспоришь. Раз мы обладаем цветным зрением, значит оно определённо имеет некоторое, хоть и не очевидное, преимущество перед монохромным. Однако существуют животные как совсем без цветного зрения, так и с цветным зрением, охватывающим отличающийся от человеческого спектр электромагнитного излучения.

Наше восприятие цветов и красивых сочетаний складывается из того, что мы видим вокруг. Цвета, в которые окрашены приятные нам вещи, скорее всего, тоже будут нам приятны. Но и наоборот: определённые сочетания или оттенки могут вызывать у нас те или иные ассоциации. Скажем, синие тона могут ассоциироваться со спокойствием, а красные — с энергией, коричнево-оранжевые оттенки могут напомнить о вкусно прожаренной курочке, а рубиново-бордовые о дорогом Мерло. Конечно, такие ассоциации довольно субъективны и носят отпечаток не только культуры, в которой растёт человек, но и его образа жизни. Даже одно какое-то очень значимое событие, может повлиять на цепочку цветовых ассоциаций. Больше того, ваше физическое и эмоциональное состояние тоже влияет на то, как вы воспринимаете цвета и вовсе обращаете ли внимание на какие-либо оттенки. Однажды я проехал на велосипеде на предельной скорости несколько километров без передышки. После такой поездки, то ли из-за избытка кислорода в крови, то ли наоборот, из-за его недостатка, весь мир вокруг мне показался таким сочным, таким цветным, каким я его до этого ни разу не видел! Хоть это и было давно, но я до сих пор помню тот «день велосипеда». Удивительные ощущения.

Достаточно научного подхода. Переходим к практике.

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

Для этого выберите фотографию или картину, которая бы вам нравилась. Можно, чтобы на ней было изображено что-то съестное, например, или красивый пейзаж, приятный человек или какое-то другое животное. Затем откройте вашу красивую картинку в графическом редакторе, возьмите инструмент «пипетка» и выберите из этой картинки необходимое количество оттенков для вашей темы. И если вы постараетесь, то у вас обязательно получится что-то хорошее.

Картинки советую выбирать не слишком контрастные. А вообще, конечно, это личное дело каждого.

Здесь я, для наглядного примера, таким вот методом подобрал несколько цветовых палитр.

Успехов.

anonymous
()
Ответ на: комментарий от anonymous

Восхитительный текст! Спасибо))

provaton ★★★★★
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.