Как изменить цвет веб-страницы на Android

Обновлено: 30.09.2022

Тим Фишер имеет более чем 30-летний опыт работы в сфере технологий. Он пишет о технологиях более двух десятилетий и является вице-президентом и генеральным директором Lifewire.

Что нужно знать

В этой статье подробно описаны варианты изменения цвета и значков приложений для Android.

Инструкции в этой статье были созданы с использованием Google Pixel под управлением Android 12, поэтому доступные вам параметры будут отличаться, если вы используете телефон другой компании или телефон с более старой операционной системой.

Как изменить цвет приложений на телефоне?

По умолчанию значки приложений на некоторых телефонах Android, таких как Pixel, не изменяются ни в цвете, ни в самом значке. Spotify, например, зелено-черный, и изменить это непросто.

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

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

Вот одобренные Google варианты изменения цвета значка приложения:

Использование тематических значков

Один из способов быстро изменить цвет значка приложения — использовать тематические значки. Но есть одна загвоздка: меняются не все значки, а только предоставленные Google, такие как Chrome, YouTube, Камера, Телефон, Сообщения, Play Маркет, Gmail и т. д.

Откройте «Настройки» > «Обои и стиль» > «Тематические значки» и выберите то, что вы хотите использовать.

Значки темы Android 12 переключаются до и после

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

Включить цвета обоев

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

Например, если вы хотите, чтобы эти приложения Google были фиолетовыми, вы можете выбрать этот цвет в меню "Настройки" > "Обои и стиль" > "Основные цвета". Если вы хотите, чтобы цвета значков приложений были сбалансированы с обоями, откройте «Настройки» > «Обои и стиль» > «Цвета обоев» и выберите одну из этих цветовых комбинаций (комбинации, которые вы там видите, меняются в зависимости от используемых вами обоев).

Настройки обоев и стилей Android

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

Как вы меняете значки приложений на Android?

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

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

Однако в некоторых редких случаях разработчик приложения включает параметр настройки значка приложения в настройках приложения. Одним из примеров является браузер DuckDuckGo в магазине Google Play. В настройках этого приложения есть экран под названием «Значок приложения», который имеет несколько параметров. Неважно, какой у вас цвет обоев или какой другой переключатель вы включили в настройках своего телефона; значок этого приложения определяется тем, что вы решаете в его настройках.

Настройки браузерного приложения DuckDuckGo и список значков приложений

Если приложение, для которого вы пытаетесь изменить цвет значка, не имеет такого уровня настройки, рассмотрите возможность использования стороннего инструмента.Для этого вам может понадобиться программа запуска Android, отличная от той, что поставляется с телефоном.

Чтобы изменить цвет приложений на телефоне Samsung, нажмите и удерживайте пустую область на главном экране, а затем нажмите "Обои и стиль". Нажмите «Цветовая палитра», а затем выберите нужный цвет. Нажмите Установить как цветовую палитру. Изменения цветовой палитры коснутся стандартных приложений и значков.

Чтобы изменить цвет приложений в iOS 14, вы будете использовать приложение "Быстрые команды", чтобы изменить внешний вид ваших приложений. В этом случае вы не меняете цвет приложения напрямую; скорее, это обходной путь, который создает «кнопку», которая может быть разных цветов. Для этого запустите приложение «Ярлыки» и нажмите «Добавить» (плюс); на экране «Новый ярлык» нажмите «Добавить действие». Найдите и выберите «Открыть приложение», а затем на странице «Новый ярлык» нажмите «Выбрать». Найдите приложение, внешний вид которого вы хотите изменить. Вернувшись на страницу «Новый ярлык», вы увидите имя приложения; коснитесь «Еще» (три точки), измените название приложения, коснитесь его значка, выберите «Цвет» и выберите новый цвет. Используйте другие параметры настройки, чтобы еще больше изменить его внешний вид.

Я просматривал новости BBC и заметил, что они окрашивают адресную строку в красный цвет на моем телефоне. Мое любопытство возросло, когда я изучил исходный код и нашел простую однострочную строку, которая говорит браузерам изменить цвет. Трюк называется Meta Theme Color, и, по словам разработчиков Google, он предназначен для Chrome, Firefox OS и Opera. Он принимает форму в метатеге theme-color. Дополнительная информация доступна в журнале изменений самого Chrome.

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

Зачем вам это делать?

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

На самом деле я подумал: «А почему бы и нет?» после того, как увидел, что такие громкие имена, как веб-приложение Facebook, делают это.

Он прекрасно дополняет наш индикатор выполнения чтения, так как его левая сторона окрашена в тот же зеленый цвет. По мере продвижения по статье зеленый цвет поглощает все оставшиеся желтые. Да, нам нравится создавать этот красочный сайт!

Как добавить метатег цвета темы в WordPress?

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

Измените цвет с нашего зеленого на ваш код цвета HEX. Он вставит метатег в файл . раздел вашего сайта. Вы можете проверить результат на реальном Android-устройстве, запустив браузер Chrome.

 До изменения цвета адресной строки Android Chrome

Как насчет других платформ?

Несмотря на то, что я изучил возможности этой настройки для iOS или Windows Phone, я не могу рекомендовать решения, с которыми лично я не добился успеха. Однако было ясно, что Safari не хочет разрешать изменение цвета адресной строки. iPhone X 11.4 на момент написания этой статьи даже не реагирует на специфический стиль Safari, как написано в Google Developers. Учитывая ограниченные возможности настройки, я бы не стал с этим заморачиваться.

Возможно, стоит упомянуть, что плитки Windows 10 (при закреплении из браузера Edge) также поддерживают настройку с помощью метатегов. Дополнительную информацию об этом можно получить в Microsoft, так как это не является предметом данной статьи.

Площадка для цвета адресной строки

Аттила интересовался, можем ли мы изменить этот метатег вживую. Чтобы начать игры, я подключил свой телефон к настольному Chrome с удаленной отладкой. Изменение источника мобильной вкладки с помощью инспектора на рабочем столе всегда весело. К счастью, цвет адресной строки сразу же отразил ручные изменения. Затем я запустил однострочник jQuery, чтобы изменить свойство содержимого уже существующего метатега, доказав, что окрашивание из кода также работает.

Это означает, что вы можете изменить цвет адресной строки в зависимости от положения прокрутки, отреагировать на всплывающее диалоговое окно или связать его с каким-либо другим взаимодействием. Я бы не стал анимировать его, потому что, по моему опыту, изменение не на 100% гладкое. В конце концов, я решил дать вам кнопку, которую вы можете нажать, только на Android — заметьте. Вот немного интерактивности для всех вас!

Строка состояния в Android — привлекательная часть экрана. Здесь отображается вся индикация уведомлений, время работы от батареи, время, сила соединения и многое другое.Пользователь Android может просматривать строку состояния несколько раз при использовании приложения Android. Очень важной частью дизайна является то, что цвет строки состояния должен соответствовать цветовой комбинации макета. Вы можете просмотреть множество приложений для Android на своем телефоне и увидеть, как они изменили его в соответствии с его основными цветами. Может быть несколько способов изменить цвет строки состояния, но мы собираемся рассказать вам о двух лучших выбранных вручную методах, которые вы можете использовать либо в Java, либо в Kotlin.

Способ 1. Создание новой темы

Этот метод можно использовать в приложениях, созданных с помощью Kotlin или Java. Он будет работать в обоих случаях.

Шаг 1. Откройте Android Studio и запустите новый проект, выбрав пустое действие. Дайте ему имя по вашему выбору, затем выберите язык и уровень API. Наконец, нажмите «Готово».

Шаг 2. Найдите файл XML с именем styles.xml, перейдя по ссылке res/values/styles.xml.

Шаг 3. Найдите другой XML-файл, перейдя в res/values/colors.xml, а также добавьте сюда тот цвет, который вы хотите изменить для строки состояния.

Шаг 4. Теперь в файле style.xml добавьте приведенный ниже код непосредственно перед тегом и измените его цвета по своему выбору. ColorPrimaryDark всегда будет отвечать за цвет строки состояния.

То же самое можно сделать с android:statusBarColor, но это будет работать только на уровне API выше 21. ColorPrimaryDark для строки состояния также не будет поддерживаться на уровне API 19. По умолчанию на большинстве уровней API ColorPrimaryDark будет цвет по умолчанию для statusBarColor, поэтому лучше изменить ColorPrimaryDark.

Совет. Вы можете создать несколько тем и использовать их в любом действии. В любой теме существует набор цветов, который необходимо определить. Вы также можете создать новые цвета в файле colors.xml в том же каталоге и использовать их в файле styles.xml.

Шаг 6. Теперь перейдите в файл manifest/AndroidManifest.xml и найдите здесь действие, для которого вы хотите применить эту тему или изменить цвет строки состояния. и добавьте атрибут android:theme="@style/DemoTheme".

Готово! Проверьте свое приложение, запустив его на эмуляторе или физическом устройстве.

Способ 2. Использование метода setStatusBarColor

Этот метод можно использовать только на указанном выше уровне API 21. Официально цвет строки состояния не поддерживается ниже уровня API 21. Хотя здесь мы добавили условие if, потому что в случае, если вы не выбрали выше или равно API 21, затем он проверит версию Android API, а затем выполнит код. Он не изменит цвет строки состояния ниже уровня API 21, но остальной код будет работать хорошо.

Шаг 1. После открытия студии Android и создания нового проекта с пустой активностью.

Шаг 2. Перейдите к файлу res/values/colors.xml и добавьте цвет, который вы хотите изменить для строки состояния.

Шаг 3. В MainActivity добавьте этот код в метод onCreate. Не забудьте заменить нужный цвет на colorName.

Сегодняшняя запись в блоге будет короткой. Вчера я наткнулся на старую запись в блоге Симо Ахавы — Динамически добавляемые метаданные, проиндексированные поисковыми роботами Google. В нем описывается, как вы можете вводить метаданные SEO на веб-сайт с помощью Диспетчера тегов Google, такие как описание или ключевые слова. Поэтому я подумал: а как насчет изменения цвета адресной строки Google Chrome?

Если вы не знакомы с тем, о чем я говорю, позвольте мне проиллюстрировать. Если вы используете браузер Google Chrome на своем Android-устройстве, у вас уже есть цвет адресной строки по умолчанию — серый. Но с помощью небольшого фрагмента кода этот цвет можно легко изменить (как в примере ниже).

Цвет адресной строки Chrome – до и после

P.S. Этот параметр не влияет на цвет окна в режиме инкогнито.

Технические требования

Начиная с версии 39 Chrome для Android на платформе Lollipop разработчики теперь могут использовать метатег theme-colorr для установки цвета панели инструментов — это означает, что больше нет серых панелей инструментов!

Синтаксис довольно прост: добавьте метатег на свою страницу с именем="theme-color" и установите для содержимого любой допустимый цвет CSS.

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

В своем блоге Симо поделился небольшим фрагментом кода, который вставляет метатег в файлы . Поэтому я позаимствовал его и немного изменил. Вот результат:

Этот тег создает новый тег и добавляет его в качестве последнего дочернего элемента HTML-элемента head.

Создать собственный HTML-тег

Перейдите в свою учетную запись Диспетчера тегов Google, нажмите "Теги", а затем кнопку "Создать". Вы должны увидеть что-то вроде этого:

Безымянный тег

Нажмите на блок "Конфигурация тега" (в любом месте) и выберите тип тега: Пользовательский HTML. Вставьте код, который я разместил выше.

В разделе «Триггеры» также нажмите в любом месте блока и выберите Все страницы в качестве триггера. Окончательный результат должен выглядеть так:

изменить цвет адресной строки Android Chrome - настраиваемый HTML-тег диспетчера тегов Google

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

О чем нужно помнить

  1. После того как вы добавите код и протестируете его на своем веб-сайте (с помощью Android Chrome), вы заметите, что на несколько секунд адресная строка отображается серым цветом и только затем меняется на желаемый цвет. Это происходит потому, что Диспетчеру тегов Google требуется некоторое время для загрузки. Поэтому, если у вас есть возможность добавить метатег цвета темы в виде простого текста непосредственно в исходный код веб-сайта, сделайте это. Так вы избежите эффекта мерцания.
  2. Если вы хотите поэкспериментировать с цветами и изменить их несколько раз, каждый раз, когда вы вносите изменения и публикуете их, очищайте кеш Android Chrome. В противном случае в вашем мобильном браузере будет отображаться один и тот же цвет (независимо от настроек опубликованного тега GTM).

Заключение

Итак, вот оно. Быстрый способ изменить цвет адресной строки Android Chrome с помощью Google Tag Manager. Все, что для этого требуется, — это небольшой фрагмент кода, который вставляется в качестве последнего дочернего элемента HTML-элемента head.

Если у вас есть прямой доступ к коду веб-сайта, я рекомендую добавлять эти метаданные напрямую в виде простого текста. Так вы избежите эффекта мерцания.

Но если у вас нет другого выхода, но вы все равно хотите изменить цвет адресной строки Chrome, Диспетчер тегов Google — неплохой вариант.

Читайте также: