htmlacademy / codeguide

Стиль кода Академии HTML

Home Page:http://codeguide.academy

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Добавление темной темы.

extendsnull opened this issue · comments

Предлагаю добавить темную тему для Кодгайда.

В качестве референса для основных цветов (текст, фоны) - темная тема редактора в тренажерах Академии.

  • определить цветовые решения в дизайне страниц через CSS custom properties;
  • prefers-color-scheme для автоматического определения типа темы (caniuse);
window.matchMedia('(prefers-color-scheme: dark)').matches
  • Кнопка-"тогглер" для ручной смены темы в шапке сайта. По клику тогглим класс у body c переопределенными кастомными свойствами. Как должна выглядеть эта кнопка - вопрос открытый. Было бы неплохо использовать какую-то тематическую иконку, возможно "морда Кекса" или другой маскот.
    Возможно, что-то нужно будет сделать и с изображением Кекса в шапке. А может и так сойдет.

Т.к. уже использован PrismJS, предлагаю использовать готовое решение от автора, а именно тему TOMORROW NIGHT.

В идеале стоило бы заручиться поддержкой штатного дизайнера и обновить дизайн Кодгайда с учетом новой стилистики Академии. Как вариант - вернуться к этому вопросу уже после официального перехода основного сайта Академии на новый стиль и создать дополнительное ишью по доработке темной темы.

Да, это хорошее предложение. Поможете нам сделать?

обновить дизайн Кодгайда с учетом новой стилистики Академии.

Пока про это не стоит думать. Стилистику у кодгайда не планируем менять, а если и будем менять, то совсем не скоро.

Да, это хорошее предложение. Поможете нам сделать?
Займусь на следующей неделе.

Есть предложения насчет стиля наименования кастомных свойств и иконки для кнопки-тогглера?

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