Привет, я люблю темные темы, точнее даже - черные #000, так называемые AMOLED. Компании исследуют искусственный интеллект, тогда как не хотят сделать несколько версий дизайна. И не только ночной - в своих стилях я убираю некоторые элементы сайта (например кнопку помощи в Evernote, в Reddit - реклама его платной подписки, в ЯндексПочте - рекламу, кнопки на их другие сервисы), убираю отступы - чтобы использовать весь монитор. Давненько я не касался пользовательских стилей, уже другие расширения и их каталоги, нежели лет 13 назад. За два дня я написал несколько стилей - и чувствую счастье, что теперь несколько сайтов выглядят как я хочу. Включая Хабр - это удивительно, что сами разработчики думают что темная/черная тема это не важно - это одна из причин почему я давно Хабр не читал - больно было глазам от белого.
Сам Firefox у меня тоже с чорой темой - поэтому красиво получается, когда сайт и браузер выглядят одинаково:
Вот для Хабра написал:
А вот и его код:
/* ==UserStyle==
@name habr.com black
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Black
@author Vitaly Zdanevich
==/UserStyle== */
@-moz-document url-prefix("https://habr.com") {
:root * {
--seashell: #000;
--romance: #000;
--limed-spruce: #000;
--mine-shaft: #999;
--text-strong-foreground-base: #999;
--desert-storm: #222;
--aqua-haze: #222;
--text-normal-foreground-base: #bbb;
--loblolly: #555;
--frost: #252;
}
h1,
h2 a,
.article-formatted-body {
color: #999 !important;
}
a {
color: lightblue !important;
}
h1,
.tm-articles-list h2 a {
font-size: 30px !important;
}
.article-formatted-body {
font-size: 1.3rem;
}
.ͼ6 {
color: #bbb;
}
.tm-comment__body-content {
font-size: 1.2rem;
line-height: 1.6rem;
}
.tm-base-layout__header,
.tm-block__header,
.tm-header__become-author-btn,
.tm-article-list-block__item:not(:first-child),
.tm-article-sticky-panel__icons,
.tm-comment-form__editor .editor,
.tm-comment-form,
.tm-bordered-card
{
border: 0;
}
.tm-page__sidebar {
display: none;
}
.my-feed-page .tm-page__sidebar {
display: flex;
}
.tm-editor__bottom {
box-shadow: none;
}
.tm-page-width,
.tm-article-presenter,
.tm-page__main_has-sidebar,
.tm-article-presenter__footer,
.tm-editor__wrapper
{
max-width: 100%;
}
}Обычный CSS.
Там в моем профиле можете увидеть и для нескольких других сайтов: Evernote, ЯндексПочта, Reddit, MDN, Google serp. Использую расширение браузера Stylus - оно имеет статус рекомендованного в каталоге расширений, значит - одобрено Mozilla. Многие темы каталога позволяют показать пользователю экран с настройками - то есть цвета, показывать/непоказывать элементы - может быть настроено пользователем, если это предусмотрел разработчик стиля:
Если захотите написать свой стиль - проверьте сначала что такого еще нет. И используйте git с публичным репозиторием и таким README, чтобы в поиске можно было легко найти ваш код. Писать можно и локально в любом редакторе - при сохранении будет обновлять без перезагрузки страницы - для этого откройте в Firefox ваш стиль, название которого заканчивается на *.user.css - и в открывшемся экране Stylus - поставьте галочку Live reload.
Эти стили живут на вашей стороне, клиенте, но особый проект - Википедия (и прочие сайты на движке WikiMedia) - там CSS и JS можно вставить в настройках - таким образом браузерное расширения не нужно. Вот мой CSS для Википедии, тут помимо обычной ночной темы и убирания лишнего - для Wikidata я добавил выделение нужных мне языков:
Wikisource тоже выглядит прекрасно (для меня): черный, минимум лишнего:
Этой статьей призываю перестать страдать от проблем сайтов/сервисов ежедневного использования - а написать свой CSS который уберет лишние элементы дизайна, подвинет что-то, что-то увеличит. Можно даже свой JavaScript добавить - чтобы даже всунуть новую функциональность, но этого я пока не пробовал.
