Как сделать хабр темным
Добавил пользователь Евгений Кузнецов Обновлено: 04.10.2024
Зачем все это
На первый взгляд может показаться, что это делается из озорства, просто потому, что не устраивает стандартная подсветка, реализуемая через тэг .
В каком-то смысле это, конечно, так, но не совсем.
Во-первых, подсветка внутри не может работать с кусками кода, поскольку информации для раскраски будет недостаточно. Все элементы, объявленные за рамками куска, будут краситься наугад. Эта проблема не имеет решения, так как, насколько я знаю, ни один из сервисов для онлайн-раскраски не позволяет сделать что-то из перечисленного ниже:
- Вставить в статью полный код проекта, не отображая его целиком, или вставить ссылку на коммит на GitHub. В конкретных местах статьи использовать вырезки строк из полного кода (c указанием диапазона). При этом подсветка должна определяться на основе полного кода, конечно же.
- Указать явно метаинформацию для неопределенных элементов. Довольно сложный путь для пользователя, но я бы согласился и на такое.
Во-вторых, подсветка внутри никогда не сравняется по количеству разных типов элементов с обычной IDE. А из-за проблемы, описанной выше, делать продвинутую раскраску нет никакого смысла: никто же не вставляет в статью полный код проекта, поэтому этот функционал не сможет работать.
В то же время реалии таковы, что в статьи нужно вставлять именно куски кода, причем чем они меньше, тем лучше.
Читать код без подсветки можно, но зачем.
В IntelliJ IDEA есть встроенная поддержка экспорта кода в HTML. Обычное копирование кода кладет в буфер обмена в том числе раскрашенный код, который можно прочитать как HTML.
Я в целом поддерживаю идею запрета HTML в статьях, но есть нюанс. Ресурс для айтишников, где часто обсуждается код и при этом нет никакого способа корректно вставить его в статью, — это как-то странно.
Итак, у нас в распоряжении имеются тэги , , . Кроме того, все это работает внутри тэга , который нужен для форматирования. Ну и ; нам тоже сохранили, что полезно для длинных строк кода и отступов.
Стоит ли говорить, что все стандартные способы получить HTML-код из IDEA дают совсем не такой HTML, так что работа по преобразованию предстоит немаленькая.
Подход
Для начала стоит сказать слова благодарности автору capslocky за его материал по данной теме. Я не стал использовать предложенный в статье инструмент напрямую, да и вряд ли получилось бы, но благодаря этому материалу я понял всю глубину проблемы и в то же время ощутил ветер надежды.
Единственный минус этой публикации — большое количества кода в сочетании с очень скупым разъяснением того, что он делает и зачем.
Последний пункт проиллюстрирую примером:
Реализация
Кроме того, оказалось, что IDEA кладет в буфер обмена не только Rich Text, но и довольно хитрые объекты типа application/x-java-jvm-local-objectref . Беда в том, что наличие таких объектов в буфере обмена приводит к постоянным ошибкам в моей консоли на тему constructing DataFlavor. К сожалению, тут ничего поделать нельзя: просто JDK так работает с буфером обмена. Для меня было открытием наличие такого вот кода . Видимо, умные дяди, которые написали это, считают, что и так сойдет. В общем, не пугайтесь ошибок, которые могут возникнуть при работе с инструментом.
Проект написан на Kotlin и живет на GitHub .
Предложения по усовершенствованию всячески приветствуются! Например, было бы хорошо оформить данный инструмент как плагин для IDEA. Простого способа сделать это я пока не нашел: исходники плагина Copy as HTML, к сожалению, закрыты, а разбираться, как написать такой плагин с нуля, слишком долго.
Привет, друзья. У тёмных тем оформления интерфейса программного обеспечения множество приверженцев. Более того, нынче это очень модный тренд: тёмную тему оформления нативно предусматривают современные операционные системы, практически все популярные браузеры и многие программы. Возможность выбора тёмного оформления даже есть на некоторых сайтах, из популярных это, например, YouTube и Facebook. Тёмный режим, он же ночной режим оформления интерфейса ПО – дело не только вкуса, этот режим бережёт наше зрение и способствует экономии заряда батареи на мобильных и портативных устройствах. Как сделать тёмный режим браузера для любого сайта в Интернете? Чтобы все сайты отображались в тёмном режиме, вне зависимости от того, предусматривает ли сам сайт настройку своего интерфейса?
Тёмный режим браузера
Друзья, тёмный режим браузера на сайтах реализуется за счёт инверсии цветов фонового и текстового оформления.
Разная реализация этого режима может предусматривать некоторые отличия в инвертировании цветов. И где-то какие-то элементы сайтов полностью окрашиваются в чёрный цвет, где-то какие-то остаются белыми островками.
Как упоминалось, практически все популярные браузеры предусматривают тёмную тему оформления для своего интерфейса, но отображать страницы сайтов в тёмном режиме браузера могут пока что лишь немногие. Нативно такие возможности на сегодняшний день предусматривают веб-обозреватели Chrome и Opera GX. Однако в любой браузер с поддержкой контента из магазинов Chrome и Firefox можно внедрить расширение, обеспечивающее тёмный режим для сайтов. Причём такие расширения могут быть с разной функциональностью. Но, давайте об всём подробнее: как включить нативный тёмный режим браузера в Chrome и Opera GX, и что за расширения можно в других браузерах использовать?
Google Chrome
Opera GX
Друзья, у обоих браузеров реализация тёмного режима браузера для сайтов минималистичная, мы можем только включить и выключить этот режим для всех подряд сайтов. А в Chrome для этого ещё и нужно заходить в экспериментальные настройки и перезапускать браузер. Более удобные в использовании, более гибкие в плане применения и даже настраиваемые тёмные режимы для сайтов можно реализовать с помощью специальных расширений для того же Google Chrome, Mozilla Firefox и прочих браузеров, которые поддерживают установку расширений из магазинов этих двух, а это, в частности, Opera, Яндекс.Браузер, Microsoft Edge.
Chrome-расширения
В магазине Google Chrome много расширений для включения тёмного режима браузера для сайтов, все они предлагают разную его функциональность – от простой до настраиваемой реализации. Например, простое расширение Dark Theme for all sites от elimirshetipalov являет собой встраиваемую на панель инструментов кнопку включения/выключения тёмного режима. Это кнопка включает и отключает инверсию для всех сайтов. По сути, это то же, что и тёмный режим браузера, экспериментально реализованный в самом Google Chrome, только более удобный для активации/деактивации.
Firefox-расширения
В магазине браузера Mozilla Firefox более скромный ассортимент расширений, чем у Chrome, но некоторые решения для реализации тёмного режима браузера для сайтов есть. Например, расширение Dark Mode (WebExtension) от Bernard , это обычный переключатель в инверсию всех подряд сайтов.
А расширение Dark Reader от Alexander Shutau – продвинутое, с возможностью применения инверсии к отдельным сайтам, с возможностью применения в любом режиме цветовых фильтров сепии и оттенков серого, с возможностью настройки яркости и контрастности.
Либо же можем указать свою широту и долготу для автоматического определения вечернего и ночного времени суток. А в Windows 10 мы ещё и можем использовать системную цветовую схему вместе с функцией ночного режима.
Типичный сценарий: у сайта уже есть светлая тема и вы хотите создать её тёмный аналог. Или, даже если вы начинаете с нуля, у вас уже есть обе темы: светлая и тёмная. Одна тема должна быть определена как тема по умолчанию, которую пользователи получают при первом посещении — в большинстве случаев это светлая тема (хотя мы можем позволить браузеру пользователя сделать этот выбор за нас, как вы увидите дальше). Также должен быть способ переключиться на другую тему (что можно сделать автоматически, как вы тоже увидите) — например, пользователь щёлкает по кнопке и цветовая тема меняется. Для этого существует несколько подходов.
Использование класса для
Хитрость заключается в замене класса, который будет указателем для изменения стиля на всей странице.
Это пример скрипта для кнопки, переключающей данный класс.
Вот как мы можем использовать эту идею.
Теперь переопределим значения этих свойств, но в этот раз для другого класса.
Стили тёмной темы будут потомками того же родительского класса — в нашем примере это .dark-theme , который мы добавили к тегу .
Вот полный рабочий код в действии. Пощёлкайте по кнопке для переключения на тёмный режим и выхода из него.
Использование разных таблиц стилей
Вместо хранения всех стилей в одном месте, мы можем переключаться между таблицами стилей для каждой темы. Предполагается, что у вас уже есть полностью готовые таблицы стилей.
К примеру, светлая тема по умолчанию, вроде light-theme.css.
Затем создаём стили для тёмной темы и сохраняем их в отдельном файле, который назовём dark-theme.css.
Это даёт нам две отдельные таблицы стилей, по одной для каждой темы, на которые можно сослаться в разделе . Давайте сперва сделаем ссылку на светлые стили, поскольку мы называем их стилями по умолчанию.
Использование пользовательских свойств
Мы также можем воспользоваться мощью пользовательских свойств CSS для создания тёмной темы! В итоге нам не придётся писать отдельные наборы правил стилей для каждой темы, при этом значительно ускоряется написание стилей и упрощается внесение изменений в тему, если это понадобится.
Мы по-прежнему можем менять класс у и использовать этот класс для повторной установки пользовательских свойств.
Сперва определим значения светлых цветов по умолчанию в виде пользовательских свойств для элемента .
Теперь мы можем переопределить эти значения для класса .dark-theme , как мы это уже делали в первом методе.
С тем же успехом мы могли бы определить наши пользовательские свойства внутри :root . Это вполне легальная и даже обычная практика. В таком случае все определения стилей темы по умолчанию будут помещены внутрь :root <> , а все свойства темной темы войдут внутрь :root.dark-mode <> .
Использование скриптов на стороне сервера
Если вы уже работали с серверным языком, скажем, PHP, то можете использовать его вместо JavaScript. Это отличный подход, если предпочитаете работать непосредственно с разметкой.
И да, мы можем поменять местами таблицы стилей как во втором методе.
У этого метода есть очевидный недостаток: необходимо обновить страницу, чтобы переключение сработало. Но подобное серверное решение полезно для сохранения выбранной пользователем темы при перезагрузке страницы, как мы увидим позже.
Какой метод выбрать?
Кроме того, никто не говорит, что мы можем использовать только один метод. Иногда их сочетание оказывается наиболее эффективным вариантом. Могут быть и другие возможные методы, помимо упомянутых.
Доброго дня!
Многие, наверное, замечали, что от слишком яркого света экрана могут уставать глаза (причем, довольно быстро). Именно поэтому многие пользователи (да и разработчики ПО) потихоньку внедряют ночные режимы и переходят на темный фон (серый, черный).
Это особенно актуально, если у вас уже не идеальное зрение и вы работаете ночью (когда яркий белый свет от экрана быстро утомляет зрительный орган. ).
Кстати! Темные темы экономят заряд батареи. Это особенно актуально, если вы работаете за ноутбуком.
Собственно, в этой заметке я хочу показать, как можно включить темный фон в различных часто-используемых приложениях и окнах Windows. Думаю, тем, кто сталкивается с усталостью глаз — заметка может весьма помочь (по крайней мере попробовать советы из нее, наверное, стоит).
👉 Близко к теме!
4 программы для настройки яркости экрана в Windows 7÷10 (регулируем гамму, контрастность, цветовую температуру).
Включаем тёмный фон
В приложениях Windows
Начать, пожалуй, стоит с параметров Windows (тем более, что введенные настройки будут изменять темы во многих приложениях автоматически!). Разумеется, речь пойдет о современных ОС Windows 10/11 (и обновленном не устаревшем ПО).
👉 Сначала необходимо открыть параметры ОС (сочетание Win+i или через меню ПУСК) и перейти в раздел "Персонализация" .
Персонализация - Windows 10
Далее во вкладке "Цвета" нажать по меню "Выбор цвета" . 👇
После выбора тёмного цвета — вы заметите, что окна в проводнике, да и само окно параметров стало черным (серым). 👇
Выбор цвета - темный!
Windows 11 - персонализация - цвета
Кстати, если вы запустите браузеры Opera, Chrome и др. — то они автоматически запустятся с темной темой. См. пример ниже. 👇
Как изменился интерфейс Chrome!
В браузерах (Chrome, Firefox, Яндекс)
ШАГ 1
Для начала в параметрах Windows включите темный цвет для приложений (см. выше, как это делается).
Кроме этого, обновите сами браузеры (например, в Chrome для этого достаточно открыть в настройках вкладку "О браузере" - chrome://settings/help ).
Последняя версия Chrome уже установлена
ШАГ 2
Чтобы фон сайтов также стал темным — понадобиться спец. расширение (не будешь же в самом деле вручную настраивать все сайты. 😉).
Мне в этом плане импонирует 👉 Dark Reader (ссылка на магазин Chrome). Оно есть для большинства популярных браузеров: Chrome, Opera, Firefox.
После установки Dark Reader достаточно открыть его настройки (щелкнув по значку на панели в браузере) и включить. Дальше — он всё сделает сам и автоматически!
Dark Reader включить!
Например, обратите внимание на то, как меняется главная страничка Яндекса — белый фон пропал, вместо него темный.
Было - стало (браузер Chrome!)
Разумеется, в Dark Reader можно указать сайты-исключения (где цвет фона меняться не будет), а также вручную настроить шрифты, их размер, обводку и т.д.
ШАГ 3
Force Dark Mode — темный режим в Chrome
ШАГ 4
Кстати, если говорить о Chrome — то его "домашнюю/стартовую" страничку тоже довольно легко "затемнить": нужно-то в настройках выбрать темное изображение (см. пример ниже).
Домашняя страница в Chrome
👉 Кстати, в настройках Яндекс-браузера можно установить темную тему + поставить галочку, чтобы отображались темные фоны. И никаких тебе доп. "настроек / беготни / поисков". Легко. 👌
Яндекс-браузер — использовать темные фоны вместе с темной темой
На YouTube
Вариант 1: использовать спец. расширение или опцию браузера (например, см. пару примеров выше).
Вариант 2: открыть главную страничку сервиса, кликнуть по иконке своего профиля (в правом верхнем углу) и выбрать в меню темную тему (см. пример ниже 👇).
Выбираем тему на Ютубе
В Excel / Word
Советы ниже актуальны для современной версии Word / Excel 2019.
Для изменения фона листа с белого на что-то иное — откройте документ Word (или создайте новый), перейдите в меню "Конструктор" и кликните по опции "Цвет страницы" . На выбор дается практически вся палитра - есть из чего выбрать! 👌
Кстати, также можно воспользоваться готовыми предустановками — см. меню "Конструктор / Цвета" .
Конструктор — Цвет страницы (или цвета) - Word 2019
Что касается непосредственно самого меню Word — то для этого нажмите по меню "Файл / параметры" и во вкладке "Общие" укажите "Тему Office" . На выбор есть несколько штук:
- черная;
- темно-серая;
- цветная (это по умолчанию);
- белая.
Параметры - общие - Word 2019
Если говорить об Excel — то здесь еще быстрее: достаточно выбрать стиль ячеек (например, мне импонирует "Контрольная ячейка" - нейтрально-серый цвет, хорошо смотрящийся практически на любых мониторах).
Выбор серого стиля ячеек // Excel 2019
Как более интересный вариант — можно в разделе "Разметка страницы" установить свою подложку (фон). Причем, в виде картинки.
Разметка страницы - подложка
Разумеется, если указать темную картинку — то смотреться будет весьма изящно (да и в глаза белый фон "светить/бить" не будет. 😉).
Читайте также: