Google Chrome Настройка темы разработчика/цветовой схемы

Ответ 1

• Установите тему DevTools, например Нулевая темная матрица
• Перейти к chrome://flags/#enable-devtools-experiments и включить Developer Tools experiments.
• Выберите Relaunch Now в нижней части страницы.
• F12 Чтобы открыть инструменты разработчика, перейдите на Settings, выберите вкладку Experiments и отметьте Allow custom UI themes.
• F12, Перезагрузить DevTools.

Ответ 2

Темная тема теперь поддерживается в DevTools: https://developers.google.com/web/updates/2016/02/devtools-digest-devtools-go-dark#a_dark_theme_for_devtools

Ответ 3

Как отмечено в этом ответе о переполнении стека: fooobar.com/questions/124984/..., официальный рекомендуемый метод создания оболочки инструментов разработчика Google Chrome заключается в создании расширения для переопределения стилей по умолчанию, которые применяются с использованием chrome.devtools.panels.applyStyleSheet.

Процесс создания расширения Chrome для этой цели может быть немного утомительным, чтобы обрабатывать каждый компонент вручную с нуля, поэтому я создал небольшой плагин, который предоставляет набор встроенных тем и дополнительных настроек редактора для Chrome Developer Tools. Расширения также предоставляют разработчикам возможность создавать дополнительные пользовательские темы, используя простую систему шаблонов Sass без написания собственного расширения.

1. Установите расширение DevTools Author Chrome из Интернет-магазина Chrome
2. Включить экспериментальные средства разработчика в chrome://flags/# enable-devtools-эксперименты. Перезапустите Chrome, чтобы флаги вступили в силу.
3. Откройте DevTools (cmd + opt + I); Настройки> Эксперименты> установите флажок Разрешить темы пользовательского интерфейса.

Это обеспечит из коробки следующие функции:

• Возможность выбора из +25 пользовательских тем редактора
• Поддержка пользовательских шрифтов через включенные системные шрифты
• Инкрементальный контроль размера шрифта, от 10 до 22 пикселей

Если вы хотите добавить дополнительные темы, вы можете выполнить следующие шаги:

Разветките репозиторий GitHub и следуйте инструкциям ниже. Расширение Devtools Author Chrome построено с использованием NodeJS и GruntJS.

Монтаж:

$ git clone [email protected]:micjamking/devtools-author.git
$ cd devtools-author
$ npm install

Разработка:

$ grunt serve

1. После запуска grunt, чтобы установить расширение для разработки в Chrome, откройте "Настройки"> "Дополнительные инструменты"> "Расширения" и нажмите кнопку " Загрузить распакованное расширение...". (также включите опцию Allow incognito ниже, если хотите).
   • (Отключите DevTools Author, если у вас установлено расширение из Интернет-магазина Chrome.)
   • Убедитесь, что эксперименты с Developer Tools включены и разрешены пользовательские темы интерфейса.
2. Перезапустите DevTools. Я считаю, что самый быстрый способ увидеть, как изменения вступают в силу, - это отсоединить DevTools в отдельном окне, а затем открыть последующее окно DevTools (cmd + opt + I пока текущее окно DevTools находится в фокусе) после того, как изменения будут сохранены, и grunt перезагрузит ресурсы. Затем вам нужно будет перезагрузить (закрыть и снова открыть) следующее окно DevTools после внесения изменений.

1. Сделайте копию одного из шаблонов из app/styles/themes/templates/ и переименуйте файл в название вашей темы без подчеркивания, т.е. если ваша тема называется aloha, то внутри app/styles/themes/ скопируйте templates/_theme-template.scss и переименуйте ее в aloha.scss
2. Добавьте значения цвета для палитры на основе переменных подсветки синтаксиса кода в файле scss.
   • Если вы хотите более конкретный таргетинг для вашей темы, чем тот, который поддерживается из коробки, вы можете добавить эти стили в конец файла вашей темы после @include styles().
3. Добавьте свой объект цветовой палитры (массив имен и цветов) в themes.json в app/scripts/
4. В DevTools выберите палитру тем на панели "Настройки автора".
5. Предварительный просмотр и настроить цвета по мере необходимости. См. Разработка - Шаг 2.
6. Передайте и внесите изменения в репозиторий, а затем создайте запрос на извлечение новой темы, как только она будет готова!

Ответ 4

Это связано с вашей темой, пожалуйста, посмотрите здесь: http://www.hongkiat.com/blog/chrome-devtools-theme/

или

http://devthemez.com/

Ответ 5

1. открыть браузер Chrome
2. нажмите клавишу F12. Теперь на экране появится окно инструментов разработчика.
3. выберите жало или нажмите F1
4. выберите → Настройки → Внешний вид → Тема.
5. выберите темный или светлый