Возможно, я опоздал на эту вечеринку, но недавно я обновился до нового MacBook 14 M1 Pro, а вместе с ним пришли и все обновления программного обеспечения, которые я игнорировал на своем старом MacBook.
PS: если вы думаете об обновлении до M1 Pro или M1 Max, особенно с 16-дюймового MBP 2019 года, как я, сделайте это!
Через некоторое время после того, как я все настроил, я открыл Safari, чтобы проверить свой магазин наклеек на Etsy. К моему удивлению, весь заголовок Safari стал оранжевым! Сначала я не придал этому особого значения, тем более, что после открытия панели инструментов моего магазина он стал стандартным серым, но в течение следующих нескольких дней я видел все больше и больше сайтов с яркими, привлекающими внимание цветами в адресной строке.
Мое предположение состояло в том, что Safari просто выбирал цвет на основе содержимого сайта или, возможно, подбирал цвет из самого верха страницы, поэтому я посетил мой сайт-портфолио, чтобы посмотреть, будет ли адресная строка прохладного зеленого цвета для совпадать с фоном страницы…
Ничего! Просто обычный темный серый. Это не весело.
После небольшого поиска в Google я узнал, что вы можете установить цвет адресной строки (это адресная строка? или панель инструментов? заголовок? панель вкладок, может быть?) с помощью простого тега meta в вашем HTML. Давай сделаем это!
Согласно тому, что я нашел, метатег для статического цвета должен выглядеть так:
<meta name="theme-color" content="#ff0000">
Я выбрал свой цвет (#43AB85, чтобы соответствовать фону страницы) и добавил метатег в <head> моего документа следующим образом:
<head> <title>adam bowker | web dev</title> <meta name="theme-color" content="#43AB85"> </head>
…но не получилось! Я попробовал несколько других цветов, и все они работали, но я не смог найти никакой официальной документации о том, какие цвета разрешены (или запрещены).
Прежде чем сдаться, я попытался переключить свой Mac в светлый режим вместо темного, и вот оно! 🎉
Итак, похоже, что Safari/macOS решает, показывать ли цвет на основе предпочтений пользователя. Это, вероятно, хорошо, так что пользователи не ослеплены яркими цветами в темном режиме, но цвет заголовка Etsy все еще был довольно ярким в темном режиме… 🤔
Это работало, но я хотел создать опыт, который будет работать как в светлом режиме , так и в темном режиме. Я еще немного покопался и обнаружил, что вы можете установить два метатега для цвета темы, а затем использовать атрибут media, чтобы применить правильный тег для светлого или темного режима.
Я заменил свой оригинальный метатег на эти два новых:
<meta name="theme-color" content="#43AB85" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#373B44" media="(prefers-color-scheme: dark)">
С этими новыми метатегами у меня получился очень плавный смешанный заголовок в темном режиме и красивый ярко-зеленый заголовок в светлом режиме! ✨
Это некрасиво? Возможно
Я все еще люблю это? Абсолютно.
К сожалению, этот метатег в настоящее время поддерживается только в Safari на macOS и iOS и в Chrome на Android. Надеемся, что скоро мы увидим, как эта функция появится в других браузерах!
Теперь ваша очередь — сходите с ума на своем сайте с новым крутым цветом заголовка! Киньте ссылку в комментарии, когда сделаете, с удовольствием посмотрю.
