Я работал над iOS 13 с бета-версией Xcode 11. Есть ли способ поддерживать темный режим в веб-просмотрах? Я создал набор цветов для всех остальных представлений, кроме WKWebviews. Как изменить фон веб-просмотра и цвет текста для темного режима?
Предполагая, что ваш вопрос спрашивает, как изменить цвета содержимого HTML, которое вы отображаете в WKWebView, в зависимости от того, действует ли светлый или темный режим, вы ничего не делаете в коде своего приложения. Все изменения должны быть в CSS, используемом вашим HTML-контентом.
У меня есть несколько локальных файлов HTML, которые я использую в WKWebView. Я смог поддерживать темный режим, обновив свой файл css.
Допустим, у вас в настоящее время есть файл css со следующим:
body {
background-color: white;
color: black;
}
a:link {
color: #0078b5;
text-decoration: none;
}
Они хороши в легком режиме. Чтобы также поддерживать темный режим, вы можете добавить раздел @media
в свой css:
@media (prefers-color-scheme: dark) {
body {
background-color: rgb(38,38,41);
color: white;
}
a:link {
color: #0096e2;
}
a:visited {
color: #9d57df;
}
}
В темном режиме цвета в этом разделе @media
переопределяют соответствующие цвета, определенные за пределами раздела @media
.
По какой-то причине это не сработало для меня на iOS13. В итоге я сделал это только для части CSS... NSString *cssString = @":root {color-scheme:light dark;}"; // 1
как я могу использовать это на xcode?
С той же проблемой я столкнулся, когда переносил свое приложение для iOS, потому что мы входим в систему с помощью WKWebView
, и когда я проконсультировался, я нашел ниже пример, чтобы справиться с этой ситуацией. Просто нужно создать переменную для цвета и обработать это в CSS.
До
body { color: black; }
h1 { color: white; }
.header {
background-color: #FFFFFF;
color: white;
}
После
:root {
color-scheme: light dark;
--h1-color: #333;
--header-bg-clr: #FFF1FF;
--header-txt-clr: white;
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: light dark;
--h1-color: #333;
--header-bg-clr: #FFF1FF;
--header-txt-clr: white;
}
}
body { }
h1 { color: var(--h1-color); }
.header {
background-color: var (--header-bg-clr);
color: var(--header-txt-clr);
}
После интеграции этого изменения вы можете использовать Safari для тестирования (сначала вам нужно включить опцию меню разработчика в Sarafi, «Настройки», «Дополнительно»). Откройте инспектор wen (используя Command + Options + I), и вы увидите этот экран с возможностью переключения светлого / темного режима.
ПРИМЕЧАНИЕ Просто добавить еще немного информации. Вы также можете обрабатывать различные изображения так же, как цвета.
ДО
<img src = "day.jpg">
ПОСЛЕ
<picture>
<source srcset = "light.jpg" media = "(prefers-color-scheme: light)">
<img src = "day.jpg">
</picture>
как я могу использовать это на xcode?
Корневой тег инвертирует цвет всех компонентов, кроме таблицы, а изображения будут в негативной форме.
Чтобы выполнить идеальное инвертирование цвета, проверьте приведенный ниже файл CSS.
@media (prefers-color-scheme: dark) {
/* root tag inverting all the components color except the table.*/
: root {
color-scheme: light dark;
filter: invert(100%);
-webkit-filter: invert(100%)
}
/*table tag needed for inverting table content.*/
table {
filter: invert(100%);
}
/* If We do color invert in : root , images will be color inverted and it will be in negative. If we invert again these negative images, it will be positive.*/
img {
filter: invert(100%);
}
}
как я могу использовать это на xcode?
Более просто, просто инвертируйте все цвета и стили, кроме изображений:
@media (prefers-color-scheme: dark) {
html{
filter: invert(1) hue-rotate(.5turn);
}
img {
filter: invert(1) hue-rotate(.5turn);
}
}
Свифт 5
Для WKWebView
у меня сработал приведенный ниже код.
extension RichTextController : WKNavigationDelegate {
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
let cssString = "@media (prefers-color-scheme: dark) {body {color: white;}a:link {color: #0096e2;}a:visited {color: #9d57df;}}"
let jsString = "var style = document.createElement('style'); style.innerHTML = '\(cssString)'; document.head.appendChild(style);"
webView.evaluateJavaScript(jsString, completionHandler: nil)
}
}
У меня не работает, вы можете мне помочь? stackoverflow.com/questions/69830561/…
Более конкретно. Что вам нужно, чтобы произошло с вашим веб-просмотром между светлым и темным режимом? Редактировать ваш вопрос с подробностями (не отвечайте в комментарии).