Как сделать темную тему visual studio

Как перейти на тёмную тему в Visual Studio 2008?

Где можно найти файл настроек для VS 2008 ( .vssettings ), который сменил бы тему на тёмную? Не только окно редактирования кода, а вообще все цвета в студии. Хотелось бы видеть тему, аналогичную тёмной теме в VS 2015 или 2019. P.S. Прошу, не предлагайте перейти на более новую версию VS. Будь у меня такая возможность, давно бы это уже сделал.

Отслеживать
13.7k 12 12 золотых знаков 43 43 серебряных знака 75 75 бронзовых знаков
задан 10 ноя 2020 в 2:02
5,127 1 1 золотой знак 14 14 серебряных знаков 31 31 бронзовый знак
Просто из интереса: что мешает вам обновиться?
10 ноя 2020 в 5:52
@Kir_Antipov, требование заказчика.
10 ноя 2020 в 5:52
В таком случае соболезную
10 ноя 2020 в 5:54

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Я не уверен, что это возможно сделать используя только опции .vssettings . Вероятным ответом на ваш вопрос будет полная замена ресурсов Windows (включая иконки) на тему, например, такую: https://winzoro.net/2017/03/08/photoshopf.html . Я не даю полных гарантий, что авторы этих DLL чисты на руку. Лучше всего собрать эти библиотеки самостоятельно используя редакторы ресурсов, такие как PE Explorer или Resource Builder. Но велика вероятность, что в тех DLL нет вредоносного кода, и всё будет работать так, как задумано. Но, разумеется, это тоже требует проверки. Так что лучше для начала собрать на тестовой виртуальной машине.

Кстати, вы удивитесь, но для тех же операций в Windows 98 достаточно было просто зайти в настройки и настроить тему окон и иконок без замен системных библиотек. Эти настройки частично остались в Windows XP, но совсем пропали в Windows Vista.

Отслеживать
ответ дан 10 ноя 2020 в 5:30
7,586 1 1 золотой знак 6 6 серебряных знаков 28 28 бронзовых знаков
Насколько я понимаю, это изменит тему всей ОС?
10 ноя 2020 в 5:34

Я думаю, это всё-таки можно сделать через .vssettings , т.к. однозначно есть возможность настроить это вручную. Здесь вопрос во времязатратах, потому и спрашиваю о готовом решении.

10 ноя 2020 в 5:35
@V-Mor Эту тему обсуждали в треде на MSDN. Там пришли к выводу, что это возможно только в VS2010+.
10 ноя 2020 в 5:50

Тогда это очень странно. «Ручками» настроить явно можно, ибо есть возможность настроить цвета всех элементов VS по отдельности. Что тогда мешало какому-нибудь энтузиасту заморочиться на денёк, подогнать все цвета и экспортировать всё сие в файл. Не понятно.

Keil. Тема редактора кода в стиле Visual Studio Dark.

Я думаю многим нарвиться темная тема оформления в Visual Studio. Если вы один из этих людей, то предлагаю посмотреть как быстро реализовать данную расцветку в редакторе keil.

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

Открываем файл \Keil_v5\UV4\global.prop и ищем необходимые нам строки и изменяем в соответсвии.

Примечание перед действиями:

• К сожалению, некоторые цвета отличаются от темы студии, но этого не избежать.
• Всё далаете на свой страх и риск, лучше сделайте резервную копию файла.

Настройка цвета выделения текста.

# Specification for text selection and caret line selection.fore=#000000 selection.back=#D6D6D6 caret.fore=#F5F5F5 caret.back=#232323

Теперь нам нужен раздел # C/C++ Editor files , и там настройки цвета и шрифта.

font.monospace.cpp=Consolas style.cpp.32=font:Consolas,size:10,fore:#8B8B8B,back:#1E1E1E style.cpp.4=font:Consolas,size:10,fore:#007F7F,back:#1E1E1E style.cpp.10=font:Consolas,size:10,fore:#8B8B8B,back:#1E1E1E style.cpp.1=font:Consolas,size:10,fore:#639D4D,back:#1E1E1E,italics style.cpp.2=font:Consolas,size:10,fore:#639D4D,back:#1E1E1E,italics style.cpp.5=font:Consolas,size:10,fore:#007ACC,back:#1E1E1E style.cpp.6=font:Consolas,size:10,fore:#B8AF67,back:#1E1E1E style.cpp.11=font:Consolas,size:10,fore:#E6E6E6,back:#1E1E1E style.cpp.9=font:Consolas,size:10,fore:#007ACC,back:#1E1E1E style.cpp.7=font:Consolas,size:10,fore:#B8AF67,back:#000000 style.cpp.34=font:Consolas,size:10,fore:#F3FF11,back:#000000,bold style.cpp.35=font:Consolas,size:10,fore:#FF0000,back:#1E1E1E style.cpp.16=font:Consolas,size:10,fore:#007ACC,back:#1E1E1E style.cpp.12=font:Consolas,size:10,fore:#F5F5F5,back:#1E1E1E style.cpp.86=font:Consolas,size:10,fore:#696969,back:#FFFFFF

Здес всё просто (по порядку)

Думаю вопросов возникнуть не должно.

Ну и до комплекта для асма и остальных файлов:

# Asm Editor files font.monospace.asm=Consolas style.asm.32=font:Consolas,size:10,fore:#F5F5F5,back:#1E1E1E style.asm.1=font:Consolas,size:10,fore:#2FB524,back:#1E1E1E style.asm.2=font:Consolas,size:10,fore:#AB5454,back:#1E1E1E style.asm.3=font:Consolas,size:10,fore:#B8AF67,back:#1E1E1E style.asm.4=font:Consolas,size:10,fore:#F5F5F5,back:#1E1E1E style.asm.5=font:Consolas,size:10,fore:#F5F5F5,back:#1E1E1E style.asm.6=font:Consolas,size:10,fore:#4242FF,back:#1E1E1E style.asm.7=font:Consolas,size:10,fore:#4242FF,back:#1E1E1E style.asm.9=font:Consolas,size:10,fore:#4242FF,back:#1E1E1E style.asm.10=font:Consolas,size:10,fore:#4242FF,back:#1E1E1E style.asm.11=font:Consolas,size:10,fore:#43AD48,back:#1E1E1E style.asm.12=font:Consolas,size:10,fore:#B8AF67,back:#1E1E1E style.asm.8=font:Consolas,size:10,fore:#46AA03,back:#1E1E1E # Editor Text files font.monospace.txt=Consolas style.txt.32=font:Consolas,size:10,fore:#F5F5F5,back:#323232

Мне кажется теперь гораздо лучше, а как вам?

• Библиотека CMSIS DSP. Так ли быстр целочисленный квадратный корень?
• Ускоряем вычисления с использованием дробной константы

CDEblog

Блог инженера-схемотехника, конструктора и немного программиста

Dark mode switching (Русский)

Состояние перевода: На этой странице представлен перевод статьи Dark mode switching. Дата последней синхронизации: 24 января 2022. Вы можете помочь синхронизировать перевод, если в английской версии произошли изменения.

Приятно иметь возможность переключения между светлой и тёмной темой. Существуют варианты переключения по заходу солнца или по сочетанию клавиш.

Переключение тем может быть произведено как для запущенных программ (возможно, требуется работа демона), так и для программ ещё не запущенных. В статье рассматривается переключение для запущенных программ.

Для переключения требуется поддержка от приложения или использование приложением GTK или Qt.

Инструменты

• darkman — Инструмент, позволяющий автоматизировать переход в тёмную тему на закате и возврат к светлой теме на восходе. Он позволяет разместить drop-in скрипты, которые будут автоматически выполняться в нужное время.

• Yin-Yang — Другой инструмент с похожими возможностями, однако запуск произвольных скриптов ещё не поддерживается.

GTK

Для переключения между светлым и тёмным вариантами нужно менять используемую тему.

Большинство тем GTK имеют тёмный вариант, обычно они обозначены суффиксом -dark . Например, стандартная тема для GTK называется Adwaita , а тёмный вариант называется Adwaita-dark .

Чтобы постоянно использовать только тёмный вариант, смотрите GTK (Русский)#Вариант тёмной темы.

Чтобы мгновенно сменить тему уже работающих приложений, требуется или демон, предоставляющий xsettings spec, или gsettings. Для окружений, работающих в Xorg нужен демон xsettings. Для Wayland нужен gsettings.

Демон xsettings

xsettings нужен для сеансов Xorg.

Демон xsettings для Xfce — xfsettingsd, доступен в пакете xfce4-settings .

Получить текущую используемую тему:

$ xfconf-query -c xsettings -p /Net/ThemeName

$ xfconf-query -c xsettings -p /Net/ThemeName -s "new-theme"

Изменения применяются мгновенно и влияют на все приложения, использующие GTK.

gsettings

gsettings нужен для сеансов Wayland.

Получить текущую используемую тему:

$ gsettings get org.gnome.desktop.interface gtk-theme

$ gsettings set org.gnome.desktop.interface gtk-theme "new-theme"

Изменения применяются мгновенно и влияют на все приложения, использующие GTK.

Qt

Qt имеет механизм поддержки тем, похожий на GTK.

Один из вариантов — использовать GTK для стилизации Qt-приложений. Тогда изменение темы GTK повлияет и на Qt-приложения тоже.

Другой способ — использовать родную тему Qt, например adwaita-qt5 [ссылка недействительна: package not found] . Для переключения тем смотрите Qt (Русский)#Настройка приложений Qt5 в окружениях, отличных от KDE Plasma [ссылка недействительна: раздел не найден] .

Xfce

Смена темы в Xfce происходит похожим образом через xsettingsd, который распространяется в виде пакета xfce4-settings .

Приложения

Firefox

Firefox автоматически подхватывает текущую тему GTK и адаптирует свой интерфейс. Смотрите раздел Firefox (Русский)#Тёмные темы, чтобы узнать больше.

Для изменения темы веб-страниц в магазине расширений Firefox рекомендуется расширение Dark Reader.

Thunderbird

Thunderbird применяет текущую тему GTK, но рекомендуются некоторые самостоятельные действия.

Visual Studio Code

Alacritty

Alacritty поддерживает множество тем. Примеры конфигурации можно найти на странице color schemes на вики в GitHub репозитории проекта. Например, известная в IDEA тема Darkula есть в разделе Dracula на этой же странице.

Чтобы быстро сменить тему, требуется определить указатель для каждой цветовой схемы. Например, укажите &black после названия. После этого просто выполните colors: *black . Изменение в файле конфигурации применится мгновенно и затронет все запущенные экземпляры. Если нет, то, возможно, понадобится прописать live_config_reload: true .

Границы окна и тайтлбар подчиняются теме GTK, но можно форсировать собственное поведение, установив настроку gtk_theme_variant в положение None .

• Pages with broken package links
• Pages with broken section links

Как работают глаза и что надо учитывать, создавая тёмную тему приложения

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

Далеко не все пользуются тёмной темой, но однажды ослепнув от яркого монитора и обзаведясь очками, невольно переходишь на тёмную сторону. Так как же грамотно подойти к её созданию? Меня зовут Мария, я QA-инженер в ISPmanager и сегодня расскажу, как спроектировать и протестировать тёмную тему с учётом человеческой физиологии.

Немного физики

Я постараюсь меньше говорить о колбочках и палочках, чтобы не запутать. Если для вас это всё-таки важно, колбочки отвечают за цвет, палочки — за яркость в представлении на монохромном градиенте. Подробнее об этом можно почитать в специализированных статьях. Здесь же я опишу только самые важные моменты, которые нужно понимать при создании темы приложения.

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

Знаете ли вы, что по мере наступления темноты спектр восприятия смещается от зелёного к синему. Из-за этого красные объекты кажутся темнее, чем, например, зелёные. А вот синие, наоборот, кажутся светлее, хотя при свете дня ситуация была противоположной. Это называется эффектом Пуркинье. Поэтому, если у вас часто отключают свет, постарайтесь рыжего кота покрасить в синий, тогда он точно будет в безопасности (не является призывом к действию, не обижайте котиков).

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

Сумеречное зрение — очень предательская вещь: с одной стороны, глаза уже могут различать цвета, с другой — всё ещё есть проблемы с остротой зрения (она повышается по мере увеличения яркости освещения) и со светочувствительностью (она, наоборот, уменьшается). Даже небольшой белый предмет в поле зрения может сильно изменить восприятие и переключить глаза ближе к дневному зрению. Но всё же отталкиваясь от особенностей дневного и ночного зрения, мы можем предугадать, как будет работать сумеречное.

Знаете ли вы, что холодный свет, или так называемый синий, даст больше освещённости для сумеречного зрения, чем тёплый, при одинаковом электропотреблении. Так что если хотите сэкономить на настольных лампах, выбирайте в сторону от 6400 K на коробке. В то же время еда кажется вкуснее в тёплом жёлтом свете, поэтому для столовой стоит выбрать 2700 K и меньше. Однако лучше всего глаза себя чувствуют в естественном белом свете около 4200 K. Это идеальный вариант для ванной, гардероба, рабочего места и любого помещения, где нужна максимальная чёткость и точность восприятия. Подробнее о том, как использовать свет и цвет в интерьере, изучается в эргономике.

Рис. 1. График показывает восприимчивость зрения при разной освещённости. Чем больше кривая стремится к горизонтальной оси, тем меньше световая эффективность. Это значит, что красный (длина волны 600 нм) в дневном зрении имеет эффективность от 400 лм/Вт и хорошо различим, а в ночном режиме зрения его эффективность падает ниже 200 лм/Вт. Как учесть этот эффект, разрабатывая интерфейс, мы обсудим ниже. А как вычисляются все данные графика, можно почитать в специальных статьях. Пиковые точки для ночного и дневного зрения рассчитаны давно и отражены на графике

Немного практики

Закончив с физикой, приступим к спасению глаз от выжигания с наступлением ночи. Рассмотрим несколько направлений, в которых может двигаться UI ночной темы, но универсального рецепта не выйдет. Всё же дизайн — дело тонкое и сильно зависит от продукта. Я затрону два самых больших аспекта, которые зачастую упускают из виду.

Цвет

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

Поговорим о красном, который в сумерках выпадает из восприятия. Из-за эффекта Пуркинье красный «темнеет» быстрее тех цветов спектра, что левее него, световая эффективность монохроматического излучения становится ниже. В результате сложнее увидеть «светлость» объекта из-за другого восприятия цветовой волны. При этом синий, наоборот, начинает казаться светлее прежнего.

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

На светлом фоне красный — максимально сигнализирующий цвет. Именно поэтому красными оттенками всегда выделяют самые важные знаки: стоп, стоять, запрет. Если мы говорим о диджитал-среде, это обычно сигналы ошибок, скидок, акций — всё, к чему мы хотим привлечь внимание и сказать: «Посмотри на меня, я важная вещь!» Но если мыслить так же, создавая тёмную тему, мы можем попасть в ловушку. Когда вокруг начинает превалировать тёмный цвет, а освещённость уменьшается, красный первым бежит в темноту и пропадает из видимости.

Рис. 3. Ещё раз посмотрим на рисунок 2 и на новый. Цвет уточек и освещение не поменялись, изменился лишь фон со светлого на тёмный. На светлом фоне красная уточка становилась едва различима лишь на последнем кадре, а теперь она пропадает уже со второго. Синяя же смотрится ярче с самого начала, хотя цвета не изменились. Так работает наше зрение, постоянно подстраиваясь под контекст

Сложно поменять в голове привычную логику использования красного цвета, но это может быть необходимо. Красный нередко тяжелее воспринимается в тёмном контексте: он либо начинает резать глаз, либо пропадает, теряясь в темноте. Бывают случаи, когда всё можно оставить как есть. Но если во время разработки начали закрадываться сомнения, возможно, и правда надо оставить красный для светлого времени суток.

Рис. 4. Яркие цвета левее красного (см. рис. 1) по цветовому спектру отлично выделяются на тёмном фоне. Даже если яркость будет уменьшаться, они не теряются с той же скоростью

Знаете ли вы, что ночной режим в телефоне желтит вовсе не потому, что производители пытаются облегчить восприятие новых цветов или сдвинуть представление спектра. Всё дело в одном исследовании, которое показывает, что синий свет снижает уровень мелатонина. Впрочем, его достоверность позже была поставлена под сомнение, но это совсем другая история. Вместе с тем и польза ночного режима так и не была доказана. Некоторым испытуемым даже становилось хуже! Так что если вам ночной режим не помогает, вы не сломанный. И телефон тоже не надо нести в ремонт, возможно, это просто не для вас ¯\_(ツ)_/¯

Контраст

Важный аспект сумеречного и ночного зрения — это монохромная светочувствительность, которая позволяет нам различать контраст. У монохромного зрения много невероятных способностей: повышенная скорость считывания информации, продвинутое боковое зрение, быстрое улавливание смены со статики на динамику. Благодаря этому опытные водители могут не смотреть прицельно на знаки и при этом знать, когда меняется зона действия скоростного режима. Эволюция устроила так, чтобы человек мог и защитить себя в темноте, и охотиться на свету — отсюда многие различия дневного и ночного зрения. Однако за большую силу приходится платить: наше монохромное зрение очень нечёткое.

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

Как же с этим работать, пока природа не выпустила багфикс? Тут всё проще, чем с цветами. Рассмотрим сначала плюсы: в тёмной теме очевидно больше разбег по игре с полутонами. То, что в светлой теме нуждалось минимум в 10–20% разницы по контрасту, в тёмной потребует всего 5–10%. Ведь в сумерках глаза лучше начинают отделять чёрный от почти чёрного, а мокрый асфальт вполне реально разделить на оттенки в зависимости от давности дождя.

Рис. 5. В первом и втором столбцах шаг, с которым меняются оттенки, одинаковый. Однако текст в левом столбце теряется быстрее, чем текст в правом столбце. Так найти текст в правом столбце будет ещё проще и быстрее, особенно если не будет мешать светлый контекст. Попробуйте закрыть себе обзор руками, оставив небольшое окно только для правого столбца, чем меньше будет света вокруг — тем виднее должен становиться текст

Минус монохромного зрения — та самая низкая чёткость в ночное время. В этот час и так всё плывёт перед глазами из-за усталости, а ещё и цветное зрение отказывается помогать и обрабатывать переходы градиентов. Это вызывает ещё большее размытие и раздражение. Если в светлой теме уместно использовать тени у блоков и кнопок, то в тёмной лучше использовать обводки, жёсткие переходы, а то и смену цвета или оттенка.

Рис. 6. Блоки, которые уместно смотрелись в светлом оформлении (первый столбец), в тёмном потеряли чёткость из-за тени (второй столбец). Если смотреть на такое оформление в ночное время, сконцентрироваться на границах будет трудно. Это значит, потеряется читабельность и, возможно, сложнее будет с первого раза попасть по элементу. Вместо этого стоит прибегать к решениям из третьего столбца кнопок: даже слабая обводка выделит блок в тёмной теме (первая строчка), как и небольшое изменение оттенка (вторая строчка), или же сочетание этих способов (последняя строчка)

Подытоживая, отмечу, как пользоваться сочетанием плюсов и минусов контраста для тёмной темы. Из-за повышенной светочувствительности и пониженной чёткости зрения, использование тонких линий с высоким контрастом может вызывать рябь. Так, чёрный текст на белом фоне нам привычен, однако абсолютно белый текст на чёрном фоне вызывает раздражение: глаза прекрасно воспринимают полутона, но не могут дать должной чёткости. То же самое касается обводок или разделителей — тут стоит не пренебрегать тестированием UX/UI до выпуска продукта хотя бы внутри компании. Разное восприятие и обратная связь помогут найти тот баланс, когда элемент и информацию уже видно, но они ещё не раздражают.

Знаете ли вы, что cветочувствительность — именно то, что заставляет нас слепнуть при резкой смене дневного зрения на ночное и наоборот. Несмотря на то что сумеречное зрение — промежуточное между двумя режимами работы глаз, оно настраивается не мгновенно. Глазам проще «перезагрузиться», чем устраивать плавные переходы работы с одного фоторецептора на другой. Поэтому после ночного зрения любой свет кажется сильным. И наоборот, если выключат свет, мы некоторое время не будем видеть ничего, пока глаза не подстроятся под новый режим. Эту яму восприятия тоже надо учитывать при проектировании интерфейса. Если в вашей ночной теме при переключении разделов где-то вылезет белый экран или большой светлый блок, это ослепит пользователя и вызовет негативную реакцию.

Тестируем тёмную тему

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

Первый инструмент для проверки цвета и контраста — стандарт WCAG , это руководство по обеспечению доступности веб-контента. Можно, конечно, идти и сверяться вручную с каждым пунктом этого громадного гайдлайна, но полезно знать автоматизированные инструменты, например, режим «Поддержка доступности» в Firefox или аналогичные расширения в других браузерах. С их помощью можно симулировать особенности восприятия. В частности, для проверки тёмной темы полезен режим симуляции ахроматопсии (нет восприятия цвета) и потери контраста (та самая куриная слепота). Первый режим подскажет, нет ли мест, где цвета из разных гамм сливаются, находясь рядом или друг на друге. Второй — не слишком ли продукт полагается на светочувствительность, ведь в зависимости от внешних источников света и самого монитора воспринимаемый контраст может быть разным. Firefox также позволяет автоматически пробежаться по проблемам на всей странице и посмотреть, почему какой-то элемент не проходит проверку.

Рис. 7. Имитировать настоящее ночное зрение не так уж и легко. Стоит различать различные механизмы получения чёрно-белого изображения. Основные способы (слева направо): вытеснение насыщенности, наложение градиента и сдвиг Пуркинье. Последний — самый близкий к истине, но воссоздать его сложнее всего: надо вручную выстраивать правильную кривую для всех оттенков. К тому же это лишено смысла: ведь мы не видим в ночном зрении диджитал-изображения — если источник светится, включается сумеречное зрение. А ещё важно не путать вытеснение насыщенности и наложение градиента (первое и второе изображение). Насыщенность обманывает и даёт неверные представления о монохромном зрении, поэтому лучше использовать второй метод. Многие устройства и браузеры будут использовать именно его, когда включат имитацию монохромного изображения (например, Firefox или монохромный режим в устройствах Apple)

Для ручной проверки можно использовать сайт webaim.org, где можно протестировать конкретную пару цветов. По стандарту WCAG для изображения ААА (наилучшее качество, увидят все) требуется такая контрастность: для обычного текста — минимум 7:1, для большого текста — 4,5:1, для графических элементов — 3:1. Если же ограничиться уровнем качества АА (могут не увидеть люди с проблемами зрения), то лучше не пренебрегать разбегом по контрастности 4,5 ~ 3. Для тёмной же темы зачастую хватает пограничных вариантов, ведь восприятие контраста при сумеречном зрении повышается.

Стоит упомянуть, что Google Chrome меняет цвета сайта в зависимости от устройства, автоматически приближая контраст к стандарту. Эту надстройку можно выключить, чтобы видеть настоящие цвета. Но главное, её надо учитывать при создании оформления — то, что видит разработчик в браузере, не всегда совпадает с тем, что увидит пользователь. Надстройка можно выключить аппаратно через тему устройства и в самом браузере. К тому же не у всех в качестве основного установлен браузер из семейства Chromium, а значит, при создании и проверке цветов лучше избегать излишних надстроек мониторов и браузеров. Чем сырее проверка во время разработки, тем чётче результат, ведь тогда будет проще отталкиваться от конкретных числовых значений при проверке.

Ещё один важный инструмент проверки, как это ни банально, — эмпирический. Дождитесь вечера, выключите свет в комнате, уберите подальше от экрана все светлые предметы, выключите лишние мониторы, налейте себе чёрного кофе без молока. Дайте глазам войти в night mode и приступайте к просмотру. Если постоянно тестировать тёмную тему днём и в светлом опенспейсе, потягивая латте, наверняка будет что-то упущено. Если не верите, включите тёмную тему в любом приложении и покопайтесь в нём, лёжа в кровати, перед сном. А потом откройте это же приложение на улице днём. Тёмную тему при солнечном свете почти не видно. Контекст имеет важное значение: отвлекающие факторы вокруг, постоянные переключения на светлые интерфейсы, лампа, светящая в глаза, или панорамные окна, открывающие вид на дневное небо, не дадут точно проверить тёмную тему. Современные проблемы требуют старых добрых решений: не пренебрегайте очевидными методами.

Немного лирики

Тёмная тема — это, безусловно, тонкие материи, и, как и всё творчество, оценивается она субъективно. Наверняка у вас, читатели, есть любимые тёмные темы и совершенно проигрышные. Делитесь ими в комментариях! Будет интересно послушать и обсудить, почему что-то выглядит хорошо, а что-то теряет интерактивность. Наверняка будут и диаметрально противоположные мнения об одних и тех же решениях.

Скажу за себя: мне нравится, как выглядят тёмные темы Visual Studio Code и Discord — грамотно представлены переходы и акценты. Кнопки видно, а долгая работа с приложениями не вызывает усталости.

Рис. 8. Команда Microsoft тоже делится гайдом по Visual Studio Code в сообществе Figma и в гитхабе для создания аддонов

Рис. 9. Discord UI Kit , собранный сообществом, показывает основные элементы интерфейса приложения и их цвета

А вот тёмная тема Windows режет глаз, особенно в разделе настроек: почему-то они используют слишком жёсткий контраст чёрного с белым, и долго смотреть на это слишком тяжело. И моя личная боль: я пишу эту статью в Google Docs, где вообще нет тёмной темы, и это очень печально.

Рис. 10. По какой-то причине в Windows 10 решили использовать белый текст на чёрном фоне. Очень утомляет…

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

Берегите зрение, не забывайте чаще моргать, делать перерывы, использовать, если вам надо, капли для глазок, носить очки с фильтрами, если доктор прописал. И главное, больше спите, дамы и господа! Фоторецепторов у вас десятки миллионов, а глаза всего два.

P. S. В статье использована модель уточки за авторством XcinnaY.

Нас читает уже более 35 000 человек

Подпишитесь и получите скидку 10% на ispmanager! Выбирайте интересное вам: новости ispmanager, подборка статей для начинающих веб-специалистов, всё для матёрых разработчиков или предложите свой вариант рассылки Архив рассылок

Благодарим за интерес к рассылке от ispmanager! На ваш почтовый адрес: отправлено письмо с просьбой подтвердить свой email. Сразу после подтверждения почтового адреса мы вышлем вам обещанную скидку за подписку. *Если вы не получили письмо, пожалуйста, проверьте правильно ли был указан почтовый адрес и попробуйте заполнить форму еще раз.