shiki-exo

@media (prefers-color-scheme: dark) {
  :root {
    --top-menu-color: #00603b;
    --top-menu-submenu-back-color: #025132;
    --top-menu-button-hover-color: #024f31;
    --top-menu-border-color: #f0f0f0;
    
    --l-page-back-color-desktop: #2a2a2a;
    --l-page-back-color-mobile: #303030;
    --quote-back-color: #3e3e3e;
    --tile-back-color: #363636;
    --tile-border-color: #777;
    --headline-color: #046841;
    
    --main-text-shadow-color: black;
    --main-text-color: white;
    --sec-text-color: #ebebeb;
    --ter-text-color: #dedede;
    --quat-text-color: #ababab;
    --profile-nickname-color: #06d886;
    
    --li-hover-color: #345948;
    --li-active-color: #046841;
    --main-link-color: #00d0ff;
    --main-link-hover-color: #00e28a;
    --sec-link-color: #dedede;
    --sec-link-active-color: #00d371;
    --sec-link-hover-color: white;
    
    --button-hover-color: #037f4f;
    --orange-hover-color: #ff8644;
    --green-color: #2ad370;
    
    --bar-s0-color: #117a51;
    --bar-s1-color: #1b8e61;
    --bar-s2-color: #2bb580;
    --bar-s3-color: #47e0a5;
  }
}

body[data-user*="\"id\":000000,"] {
    /* ... код цветовой схемы, которую будете видеть только Вы ... */
}

Пара общих слов.

• Префикс sec означает 'secondary', то есть 'вторичный'
  
• Префикс ter означает 'tertiary', то есть 'третичный'
  
• Префикс quat означает 'quaternary', то есть 'четвертичный'

Если вы видите в названии переменной hover, это значит, что она отвечает за цвет элемента при наведении на него указателем мыши.


--top-menu-color — цвет верхнего меню
--top-menu-submenu-back-color — цвет фона верхних разворачивающихся менюшек
--top-menu-button-hover-color — цвет кнопки верхнего меню при наведении
--top-menu-border-color — цвет рамок верхних разворачивающихся менюшек

--l-page-back-color-desktop — цвет фона сайта в десктопной версии
--l-page-back-color-mobile — цвет фона сайта в мобильной версии
не используется, оставлен в файлах цветовых схем для обратной совместимости
--quote-back-color — цвет фона цитат на форуме
--tile-back-color — цвет фона плиток в мобильной версии
--tile-border-color — цвет границ плиток в мобильной версии
--main-headline-color — цвет фона прямоугольных заголовков (.subheadline, .midheadline, etc)

--main-text-shadow-color — цвет тени всего текста на сайте, используется в темных темах для повышения читабельности
--main-text-color — обычный цвет текста на сайте
--sec-text-color — цвет кнопочек, меток, label-ов, подписей и прочего
--ter-text-color — цвет тегов, подсказок и прочего
--quat-text-color — цвет всего выключенного и неактивного
--profile-nickname-color — цвет Вашего ника в профиле

--li-hover-color — цвет строки в списке при наведении
--li-active-color — цвет активной (выделенной) строки в списке с чекбоксами
--main-link-color — цвет ссылок
--main-link-hover-color — цвет ссылок при наведении
--sec-link-color — цвет ссылок в панелях (выбор страницы настроек, аниме списков "просмотренное", "запланированное" и т. д.)
--sec-link-active-color — цвет активной (выделенной) ссылки в панели
--sec-link-hover-color — цвет ссылки в панели при наведении

--button-hover-color — цвет прямоугольных кнопок-ссылок при наведении
--orange-hover-color — оранжевый цвет, используется при наведении на всевозможные кнопки, а также как цвет минусов, дизлайков и везде, где нужен красный цвет
--green-color — зеленый цвет, используется в кнопке "добавить в избранное", а также как цвет плюсов, лайков, и везде, где нужен зеленый цвет
--blue-color — синий цвет, используется в разделе модерации

--bar-s0-color — цвет большого столбика в диаграммах
--bar-s1-color — цвет среднего столбика в диаграммах
--bar-s2-color — цвет малого столбика в диаграммах
--bar-s3-color — цвет совсем маленького столбика в диаграммах

Примечание: помните, что это всего лишь советы, и они желательны, но необязательны к исполнению.

• Выберите основной цвет Вашей темы и изменяйте его saturation и lightness, для того чтобы получить оттенки.
  
• Следите за контрастностью текста и фона. Если Ваша тема темная, то текст должен быть как можно светлее.
  
• Не перегружайте тему цветами, но и не делайте ее совсем одноцветной. Например, если Ваша тема красная и Вы уже сделали красным заголовки, верхнее меню и кнопки, не делайте цвет ссылок тоже красным.
  
• Внимательно выбирайте цвета background страницы и плиток, на их фоне должно быть хорошо видно все остальные элементы.

• Цвет текста во всем верхнем меню сайта всегда белый, поэтому не делайте --top-menu-color слишком светлым.
  
• Цвет кнопки при наведении лучше сделать немного более темным, чем цвет меню.
  
• Не забывайте, что цвет текста в верхних разворачивающихся менюшках тоже белый.
  
• Цвет рамок менюшек должен контрастировать с цветом их фона, потому что он используется при наведении на пункт меню.
  
• Как и везде, выдерживайте цветовую гамму верхнего меню приблизительно однотонной.

Заголовки — важная часть внешнего вида сайта. Выглядят они вот так:


Обычный текст в заголовках отображается всегда черным цветом, а ссылки — белым, поэтому выбирайте --headline-color с умом. Если Вы сделаете его слишком темным, будет сложно прочесть обычное содержимое, напротив, сделав его слишком светлым, Вы не увидете ссылок. Но ссылки выделяются тенью, которая облегчает их чтение, а значит, Вы можете сделать цвет заголовков немного более светлым.

Здесь все просто, только не забывайте, что цвета графиков также используются в полосах аниме / манга на Вашей странице. Самый большой столбик графика можно сделать самым темным, но таким, чтобы его было видно на фоне --tile-back-color. Далее плавно увеличивайте яркость и уменьшайте насыщенность цвета для все меньших и меньших столбиков.

• Цвет текста --main-text-color должен быть максимально контрастным. Рекомендуется делать его черным для светлых тем и белым для темных.
  
• В темных темах также рекомендовано использовать черную тень для всего текста на сайте, она повышает его рельефность и читабельность. Чтобы отключить тень текста в светлых темах, просто присвойте переменной --main-text-shadow-color значение #0000.
  
• --sec-text-color рекомендуется делать чуть светлее / темнее (в зависимости от темы), чем основной текст, --ter-text-color — еще светлее / темнее и т. д.

• Вторичные ссылки (ссылки в панелях) должны одинаково хорошо отображаться как внутри заголовков .headline, так и без них. Поэтому в светлых темах --sec-link-color тёмно-серый, а в темных — чуть темнее белого.
  
• --sec-link-active-color не только является цветом активной ссылки, но и используется во многих местах, где нужно выделить цветом какой-либо элемент.
  
• --li-active-color можно сделать таким же, как и цвет заголовков.
  
• --button-hover-color не должен быть слишком светлым, так как на его фоне всегда находится белый текст. Эта переменная также используется как цвет выделения текста на сайте.