Про userstyles (пользовательский CSS): за два дня написал несколько для сайтов которыми пользуюсь, и доволен (habr too)
Привет, я люблю темные темы, точнее даже — черные #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, чтобы в поиске можно было легко найти ваш код.
Эти стили живут на вашей стороне, клиенте, но особый проект — Википедия (и прочие сайты на движке WikiMedia) — там CSS и JS можно вставить в настройках — таким образом браузерное расширения не нужно. Вот мой CSS для Википедии, тут помимо обычной ночной темы и убирания лишнего — для Wikidata я добавил выделение нужных мне языков:
Не все страницы Википедии выглядят как надо, постепенно правлю.
Wikisource тоже выглядит прекрасно (для меня): черный, минимум лишнего:
Этой статьей призываю перестать страдать от проблем сайтов/сервисов ежедневного использования -, а написать свой CSS который уберет лишние элементы дизайна, подвинет что-то, что-то увеличит. Можно даже свой JavaScript добавить — чтобы даже всунуть новую функциональность, но этого я пока не пробовал.
