Yellow. Тёмная тема оформления

Для создания собственной темы оформления нужно подобрать необходимый набор инструментов. Основная задача — научиться верстать не очень сложные вещи на основе готовых наборов и понимать как это всё устроено. То есть разобрать на примере простых фреймворков типовые задачи по верстке.

После создания живого макета-верстки можно будет приступать к подключению темы оформления в Yellow.
Получается этакий полигон для обучения и развития навыков.

CSS-framework

Выбирал между Bulma, basscss.
Смотрел на минималистичные mincss и awsm.css.

В итоге остановился на Picnic CSS.
Необходимый минимум классов для построения адаптивной сетки там есть. А большего пока и не требуется.
Кроме практики, конечно же :)

Набор цветов

Важным элементом также является правильное сочетание цветов и контраста между ними.
Велосипед изобретать не стал, взял Crayon — там очень классная подача.

Хочется приблизиться к набору цветов в теме оформления Monokai.
Приблизится по восприятию, по контрастности и выбору правильных оттенков.

Ещё очень нравится набор сочетаний цветов от создателя TachyonsCLRS.
Он афигенный: вот как он размышляет о css [en]

Типографика

Без хорошей типографики текстовый сайт не собрать.

Было несколько версий:
1. IBM Plex
2. Clear Sans
3. Xarrov для некоторых внутренних страниц.

Переключение темы на Javascript

Пример создания переключения темы Medium.

Посмотрим, что из этого получится.