Привет, я люблю темные темы, точнее даже - черные #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; --gossip: #330; --solitude: #222; } 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, .tm-page.tm-user .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, .tm-article-snippet__cover_cover { 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 добавить - чтобы даже всунуть новую функциональность, но этого я пока не пробовал.
