doka-guide
Контрастность цветов для тёмной темы
Хлебом не корми, а дай серую тему. Не дядюшку, не дедушку (к) Лолита. Вот люблю невысокую контрастность, которая не бьёт по глазам, не пытается ничего сказать, а лишь заботливо шепчет.
Не долго баловался, буквально с ходу заменил значения в :root
--color-light: 0 0% 70%;
--color-dark: 0 0% 7%;
--color-orange: 25 100% 29%;
--color-blue: 209 100% 29%;
--color-yellow: 49 100% 28%;
--color-pink: 346 81% 58%;
--color-green: 122 78% 28%;
Плюс считаю некоторым предательством посетителя называть чёрную тему тёмной, а белую светлой. Они слишком радикальны для таких названий.
Полностью поддерживаю. Ярый адепт тёмных тем, но 100% черного и 100% белого — это 100% зла. Не смог дочитать ни один лонгрид с тёмной темой из-за этого. Поправьте, пожалуйста 🙏
@WhiteApfel @sme12 у вас есть на примере сайты или дизайн-системы, в которых это реализовано правильно? Речь именно про сайты с текстом, а не редактор кода или специальные интерфейсы.
@WhiteApfel @sme12 у вас есть на примере сайты или дизайн-системы, в которых это реализовано правильно? Речь именно про сайты с текстом, а не редактор кода или специальные интерфейсы.
Да, можно прямо пройтись по документациям с тёмными темами 😊 https://www.typescriptlang.org/docs/handbook/ https://www.jetbrains.com/help/ https://webpack.js.org/concepts/ https://jestjs.io/docs/getting-started
Ну и у гитхаба, например, хорошо довольно реализовано отображение того же маркдауна в тёмной теме.
Мне кажется, быстрый фикс – это приглушить абсолютно черный для фона и абсолютно белый для шрифтов. Ну или хотя бы что-то одно. У Твиттера, кстати, в тёмной теме фон #000, но зато шрифт приглушенный и уже не так выжигает.
color: #092f0f; background-color: #bbc9d8;
пример комфортного сочетания, безотносительно к doca.guide
светлый текст на темном фоне лучше чем наоборот, так что да, я за темные темы.
Удачи вам, если возьмётесь поменять цвета;).
А вот стиль кода у вас сделан хорошо, комфортно читать.
Привет!
Мы согласились, что 100% чёрного и 100% белого это очень категоричное сочетание, и решили приглушить тёмную тему. Самое заметное изменение это смена фонового чёрного #000000 на серый #282A2E:
При подборе цвета старались найти баланс: чтобы и не "резало глаза", и осталась достаточная контрастность для комфортного чтения, и чтобы встраиваемые элементы (схемы и демки) не сливались с фоном и легко определялись глазом как отдельные сущности.
Контраст между фоном и текстом статьи остаётся достаточно высоким, чтобы попадать под золотой стандарт доступности (ААА по гайдлайну WCAG 2.0.) Контраст между цветным текстом на цветном фоне останется на прежнем среднем уровне (АА).
