Темная тема

Здравствуйте. Эта тема в основном предназначена для сотрудников GitHub.

С github существует давняя проблема. Пользователи, участники, сопровождающие играют решающую роль в том, чтобы сделать GitHub тем, чем он является — домом для постоянно растущего сообщества разработчиков открытого исходного кода. Мы проводим здесь значительное количество времени, читая и записывая код и документацию, общаясь друг с другом, общаясь с сотрудниками GitHub, иногда по ночам (как я сейчас).

И все это время мы должны смотрите на утомительно белые экраны. Возможно, вы знаете об этой проблеме 5-летней давности. Многие люди обеспокоены. Проблема заключается не в небольшом комфорте, а в производительности, доступности и здоровье. Здесь была аналогичная тема, но она касалась приложения GitHub Desktop. И похоже, что GitHub Desktop представил поддержку темной темы в начале этого года.

Не могли бы вы подробно рассказать о статусе и вашей позиции по этому вопросу? В конце концов, люди должны вредить своему зрению или использовать сторонние хаки и расширения. И многие другие популярные службы услышали пользователей и представили темный режим.

Спасибо


Я попросил то же самое для форума сообщества напрямую в github staf несколько месяцев назад. Вот ответ:

«

Мы определенно видим этот запрос на стороне GitHub.com. Мы находимся в процессе планирования нашей следующей итерации дизайна для форум сообщества, и я думаю, что мы должны помнить об этом.

Мы знаем, что именно так работают многие разработчики. Было бы очень круто переключиться на темную тему. Я ‘ Я не уверен, где это вписывается в нашу текущую дорожную карту дизайна, однако, продолжая определять нашу дорожную карту, мы можем иметь это в виду.

«

Ожидание для разнообразия я использую эту надстройку darkreader, и она отлично работает везде, надеюсь, это может помочь даже вам.

-Gabriele-


Спасибо, @wabri! Это полезно знать.

А Dark Reader просто великолепен, спасибо, что упомянули об этом! Это, несомненно, поможет здесь и везде, пока мы ждем решений, которые изначально решают эту проблему.


Привет, @ st-sloth,

Спасибо очень много за то, что здесь! Я ценю ваш отзыв и обязательно добавлю его в нашу внутреннюю проблему, это запрос, который мы должны рассмотреть и рассмотреть. Исходя из моего личного опыта, я могу поделиться (спасибо @wabri за упоминание!) Темный ридер отлично справился с моей усталостью глаз на всех сайтах, а не только на технических.

Надеюсь, что мы есть еще новости, которыми мы можем поделиться после того, как наши планы по редизайну будут утверждены, но ваш отзыв определенно в нужном месте.


Это не решение, это просто обещание посмотреть на вещи в какой-то момент в будущем. Пустые слова произносились и раньше, и простите нас, если мы все немного циничны.

Вы — один из крупнейших сайтов в Интернете, отсутствие темного режима на самом деле неприемлемо. Это критический недостаток веб-сайта, и его следует рассматривать в этом свете (без каламбура).


Это было открыто в github с 2013 года, а здесь с 2018 года, как я видел , чего вы ждете, почему вы не можете изменить цвет фона ???


С новой prefers-color-scheme Медиа-запросы CSS быстро получают поддержку, все, что для этого требуется, — это простое обновление таблицы стилей. Ни даже изменения пользовательского интерфейса!


У меня всегда предпочтение темным темам.

Даже в 2012 году я использовали надстройки браузера и пользовательские скрипты для создания темной темы.

Почему темная тема становится важной только сейчас , а не в 2012 году?


Есть ли у кого-нибудь «простую таблицу стилей» для совместного использования (с соответствующей лицензией, разумеется), которую GitHub мог бы использовать непосредственно в качестве дополнения?


Корневой значок github.com делает вкладки браузера непригодными для использования при запуске моего браузера в темном режиме. Например, в Chrome любая вкладка, на которой открыт github, полностью черная. Кажется, это небольшая проблема, но она вызывает проблемы с удобством использования/производительностью при попытке переключения между вкладками.


Я хотел взвесить это.

  • Клиент рабочего стола Atom по умолчанию использует темную тему.
  • Все основные платформы кодирования имеют темные темы.
  • Github Desktop имеет темную тему.
  • На веб-сайте Github нет нет возможности для темной темы.

Это, по сути, проблема для тех из нас, кто работает днем ​​и должен программировать, пока дети спят без света в комнате. Переход от того, чтобы дети дышали во сне, на ярко-белый веб-сайт, который я действительно люблю, болезненно — в буквальном смысле мои глаза чувствуют напряжение от необходимости переключаться.

То же самое касается и другие приложения и платформы, которые я использую при переключении на веб-сайт (поскольку клиент для настольных ПК не имеет всех тех же функций).

По крайней мере, этот вариант будет предпочтительнее.

Я с нетерпением жду дня, когда мне не нужно будет страдать, чтобы что-то сделать.


Какой политический ответ от @andreagriffiths11. Я очень жду скорого прогресса в этом направлении.


Ура. Спасибо за Dark Reader. Я пробовал другие, и они были менее звездными.


Привет, @ andreagriffiths11,

Есть новости по этой теме?


Я нашел плагин для Chrome, который помог мне.

https://chrome.google.com/webstore/detail/github-dark-theme/odkdlljoangmamjilkamahebpkgpeacp? hl = en-US


Итак, сейчас конец 2019 года, примерно через год после публикации этого отзыва.
Что случилось с темной темой?


Всемогущие и всезнающие технологические компании в своем безмерном блеске по-прежнему считают темные темы легкомысленным элементом дизайна, а не важной проблемой доступности.. Я думаю, это сводится к 1) бескомпромиссным дизайнерам, которые думают, что они знают, что для нас лучше всего, и 2) заинтересованным сторонам продукта, не осознающим, что смотреть на темные цветовые схемы на светлые физически больно для некоторых, или что люди не работают в низком — условия освещения и т. д.


Большое спасибо за предложение темного читателя! Не могу дождаться, когда GitHub получит режим темных тем.


Разве Microsoft не приобрела Github в прошлом году? Разве вы, ребята, не должны уже добавить функцию темной темы? Вам не стыдно? Вам не хватает ресурсов? Почему это занимает так много времени, а у всех остальных уже есть эта базовая функция к 2019 году?


Добавляю свой голос за этот давно назревший запрос. GitHub буквально выделяется, и не в хорошем смысле. Microsoft: пожалуйста, предоставьте эту важную функцию.



Темный режим в GitHub

Дэвид Гилбертсон

12 апреля 2020 г. · чтение 11 мин.

Официального темного режима для GitHub (обновление за декабрь 2020 года: да, есть!), Но это не значит, что вы должны страдать от белого, обжигающего сетчатку, как в дизайне по умолчанию.

В этом посте я рассмотрю 8 вариантов для темнеет. Победителем, на мой взгляд, стал Dark Reader. Так что, если вы торопитесь, вас могут извинить.

Сначала я упомяну несколько вещей о каждом из претендентов, а затем я покажу их бок о бок в действии на различных страницах GitHub. Остерегайтесь, на этой странице есть много скриншотов; если вас беспокоит использование полосы пропускания, уходите сейчас, пока еще можете.

Dark Reader

Расширение для Chrome, Edge, Firefox и Safari.

Это затемняет любой сайт, и это здорово — нет необходимости, чтобы ваш темный режим GitHub отличался от темного режима npm. Вы можете либо включить его по умолчанию для всех сайтов, а затем выборочно отключить, либо наоборот.

Это очень впечатляющая вещь.

Изображение для сообщения

Яркость/контраст можно настраивать, что удобно.

(Я думаю, что значок «Темный» — это то, что вы получили бы, если бы у Дарта Вейдера и Вельзебота был ребенок, а значок «Свет» — результат жаркого свидания между Люком Скайуокером и Элтоном Джоном.)

 Изображение для сообщения

Расширение для Chrome и Firefox.

Похоже, это единственное расширение , предназначенное для стилизации GitHub и выполняющее достойную работу.

  • Плюсы : солидный, разумный стиль.
  • Минусы : это пони на одном месте.

Stylus

Расширение для Chrome, Edge и Firefox.

Th Это расширение позволяет применять пользовательские стили с userstyles.org. Вы можете выбрать стиль для любой заданной веб-страницы прямо из расширения, поэтому обнаружение будет относительно простым, как и переключение между стилями по мере их использования.

Изображение для сообщения

  • Плюсы : есть 270 стилей для GitHub!
  • Минусы : для GitHub существует 270 стилей!

Я пробовал пять из 270 стилей для GitHub и сразу исключит два.

 Изображение для сообщения

Изображение для публикации

GitHub Ice Dark (обновленный) дисквалифицирован, потому что он местами нарушает пользовательский интерфейс, изменяет размер шрифта (непоследовательно) и делает некоторые вещи совершенно не интуитивными. Например, посмотрите на параметры во всплывающем меню выше, baby-poo-yellow означает «выбранный» и «отключен».

Три стиля, которые я рассмотрю полностью — GitHub Dark (о котором упоминалось в недавнем сообщении GitHub), GithubDarkTheme (); и материал Dark GitHub. Я почти дисквалифицировал один из них из-за отсутствия в названии заглавной буквы «h», но решил, что это не действительно влияет на его способность делать страницу темной..

(Историческая справка: раньше существовало расширение под названием Stylish, которое применяло стили, крало ваши личные данные и отравляло ваших питомцев (предположительно). Stylus выполняет ту же работу, без кражи и отравления.)

Принудительно темный режим для веб-содержимого

Этот последний параметр не является расширением, это флаг Chrome/Edge, который вы устанавливаете, перейдя в about://flags/# enable-force-dark . В отличие от других решений, это работает и на вашем телефоне.

 Изображение для сообщения

Изображение для сообщения

О, кстати, весь текст относится к снимку экрана выше Это. ОК?

Изображение для сообщения

Каждый параметр/параметр с ‘простым’ в названии бесполезен — они все инвертируют черный заголовок GitHub, делая его белым.

 Изображение для сообщения

Изображение для публикации

Подходы «Включено с выборочной инверсией всего» полезность, но отсутствуют значки, кнопки выглядят не очень хорошо, а аватары превращаются в негативы.

Если вы можете жить с некоторыми отсутствующими значками и хотите темный режим ВЕЗДЕ В ИНТЕРНЕТЕ, это стоит того. Что касается остальной части этой страницы, я считаю, что это не работает.

  • Плюсы : работает на вашем телефоне.
  • Минусы : не очень хорошо. Вы не можете отключить его для отдельных сайтов.

Это вводные части, давайте посмотрим на уйму скриншотов!

Вам, вероятно, не нужно указывать это вам, но ваш мозгу нужно время, чтобы приспособиться к подобным вещам. То, что через 2 секунды выглядит немного глупо, становится комфортно читать через день. И то, что на первый взгляд выглядит гладким, может достичь своей гладкости, удалив множество тонких, но полезных дизайнерских подсказок (аффордансов, если необходимо). Я говорю это только потому, что мой любимый не самый красивый, но я хочу, чтобы он вам понравился, потому что я хочу быть похожим на других людей и чувствовать некую связь с миром.

Кроме того, как вы смотрите на них, имейте в виду, что вы можете настроить стили для Dark Reader и трех тем Stylus. Советы от профессионалов по игре с цветами: в палитре цветов Chrome установите отображение HSL (нажмите маленькие двойные стрелки) и отрегулируйте L (яркость), чтобы изменить только яркость. Вы можете использовать клавиши со стрелками и, при желании, удерживать shift или alt , чтобы сделать шаг 10 или 0,1. Или прокрутите. И вы можете переключить этот нижний раздел, чтобы отображать палитру цветов на текущей странице.

Изображение для сообщения

Давайте перейдем к делу…

Домашняя страница репо

Изображение для сообщения

Кстати, я использую Edge для всех снимки экрана.

(Если вы не знали: Edge — это Chromium под капотом, поэтому он имеет те же расширения, что и Chrome, и те же инструменты DevTools; он прекрасно работает как вторая среда — в macOS или Windows .)

Изображение для публикации

Помните, Dark Reader — это тот инструмент, где вы можете регулировать яркость/контраст/сепию.

Обратите внимание на дополнительные пиксели вокруг синего кружок с уведомлением, эта лишняя жирность проявляется в нескольких местах, но редко вызывает проблемы.

 Изображение для сообщения

Изображение для сообщения

Полосатый фон? ОК .

Изображение для сообщения

Мне, наверное, не нужен комментарий для каждого скриншота…

Изображение для сообщения

Минти. Этот кажется наиболее «продуманным».

Markdown, разметка и гиперссылки

Изображение для сообщения

Изображение для сообщения

Обратите внимание, как при этом большинство цветов остается примерно одинаковым. Я предполагаю, что он пытается сохранить постоянный оттенок и насыщенность и инвертирует яркость.

Изображение для публикации

Хммм, я не фанат запутывания гиперссылок — мне нравятся синие и подчеркнутые. Или, по крайней мере, другой оттенок. Я не понимал, как часто я просматриваю файлы readmes в поисках ссылки, о которой я знаю, — пока я не использовал темную тему, которая заставила их сливаться с окружающей средой.

 Изображение для сообщения

Изображение для публикации

Изображение для публикации

Он действительно выглядит красиво. Однако не стилизует полосу прокрутки.

Страница проблем

Изображение для сообщения

Изображение для публикации

Интересно, что Dark Reader теряет цвет на ярлыке проблемы. Может потому, что он был довольно близок к серому. Подойдут и другие цвета меток.

Изображение для сообщения

Темная тема GitHub выглядит неплохо, но в ней отсутствуют дизайнерские решения GitHub, такие как «кнопка нового выпуска должна быть основным цветом».

 Изображение для сообщения

Изображение для сообщения

iv>

GithubDarkTheme (); выглядит нормально, но убирает множество линий, которые помогают разграничивать области страницы. На некоторых страницах это кажется неправильным.

Если вы похожи на меня, вы никогда не замечали этих линий, но вы заметите их, когда они исчезнут.

 Изображение для сообщения

PR часто содержат новый код, так что это стоит отмечая удобочитаемость кода, выделенного зеленым цветом. Также обратите внимание на раскрывающийся список, который открыт на этих снимках экрана, где «редактировать» и «удалять» должны быть отключены. Эта небольшая деталь, возможно, является хорошим индикатором «внимания к деталям» в целом.

Изображение для сообщения

Ни один темный режим не приближается к видимости модальных окон в светлом режиме. Обычно везде, где тени используются для визуального различения, темные режимы немного отстой.

Изображение для сообщения

Dark Reader выглядит неплохо.

 Изображение для сообщения

Изображение для сообщения

Единственный из параметры CSS в человеческом стиле, чтобы не потерять отключенные стили. Но этот контраст довольно грубый.

Изображение для сообщения

Этот новый код немного трудно читать. А комментарии теперь курсивом? Думаю, это хорошо. Отключенные стили теряются.

Изображение для сообщения

О нет, Material Dark GitHub, эти комментарии едва читаются.

Story time: Material Dark GitHub был моим любимым, пока я не сделал свой первый обзор кода . Вскоре после того, как я чистил носовые пятна от своего монитора, я подумал: эй, мне следует потратить слишком много времени на сравнение всех различных темных режимов GitHub, потому что, честно говоря, что еще я собираюсь делать со своим 24-дневным ? Выйти на улицу? Нет, спасибо!

И вот мы.

Код без выделения синтаксиса

Встроенный код блоки и многострочные блоки кода без выделения синтаксиса получают стандартный цвет фона/текста в GitHub. Это была еще одна область, с которой некоторые претенденты боролись.

Изображение для  post

Код серый на сером, контраст — AOK.

 Изображение для сообщения

Изображение для сообщения

Это красное на черном смотрит на я как контрастная крыса io из 3,77, не очень хорошо. Я использовал эту тему в течение недели, и ее можно было прочитать в темной комнате, но не очень хорошо в комнатах, которые не являются темными комнатами. Если бы вы читали выпуск GitHub, пока Джон Леннон пел Imagine в этом особняке с большим пианино, у вас все было бы хорошо на отметке 1:38…

… но тогда Йоко начинала открывать все жалюзи, и ты вроде бы бросил это, Йоко, этот красный на черном тексте не может справиться ни с чем больше солнечного света ! Но она не могла остановиться, Оно! она будет продолжать с кровавым слепым открытием, пока ваши несинтаксически выделенные фрагменты кода не будут напоминать немного больше, чем томатный соус, залитый в смолу.

Продолжаем.

 Изображение для сообщения

Изображение для сообщения

Это тоже нормально. Я не люблю всех коричневый/оранжевый текст в этой теме, но я тоже не люблю бок-чой, и многие люди делают это, каждому свое.

 Изображение для сообщения

Хорошо, это последняя. На этой странице нет ничего особенного, но интересно увидеть, как каждый из пользовательских стилей CSS по-разному воспринимает эти вертикальные и горизонтальные линии. Интересно, сколько человеко-минут было потрачено на размышления о цвете и весе линий для всех веб-сайтов за все время. Миллион? Миллиард? Было бы лучше потратить это время на разработку решений для домашней стрижки волос? Возможно.

Изображение для сообщения

Изображение для сообщения

Как всегда, цвета сохраняют относительный контраст, заданный дизайнерами GitHub.

Изображение для сообщения

Более толстая вертикальная линия, черная горизонтальная линия (только одна из них!), другой стиль для хеша в левая панель. Сами по себе эти вещи на самом деле не имеют значения , но они являются индикаторами возни и отклонения от дизайна GitHub — это может иметь значение или не иметь для вас значения..

Изображение для сообщения

Остается верным дизайну GitHub, за исключением того, что он убирает красивую оранжевую подсветку на выбранной вкладке.

Изображение для сообщения

Тема, известная тем, что удаляет все строки, на самом деле сохранила одну! Поле сравнения немного не работает.

Изображение для сообщения

Похоже, что в Material Dark GitHub что-то не так с заголовком, когда на странице выпусков вкладка кода едва выделена, а надпись «Используется by »набор кнопок потерял фон. Это будет прекрасно работать как переход к …

Система дизайна GitHub большая, и выпускается один или два выпуска CSS в месяц. Мне кажется, что любое решение темного режима с использованием созданного человеком CSS обречено на постоянный поток новых сбоев. Ясно, что будущее за автоматическими темными режимами — идеально производительными и управляемыми самим браузером.

На прощание я передам микрофон автору стиля темного режима, из описания их собственной темы: «Есть новый лучший способ использовать темный режим повсюду в сети, называемый расширением« Dark Reader ». Он выполняет ту же работу, что и я вручную. Так что мои стили больше не поддерживаются ».

Оцените статью
clickpad.ru
Добавить комментарий