Как использовать темный режим iOS 13 для wkwebview

Я работал над iOS 13 с бета-версией Xcode 11. Есть ли способ поддерживать темный режим в веб-просмотрах? Я создал набор цветов для всех остальных представлений, кроме WKWebviews. Как изменить фон веб-просмотра и цвет текста для темного режима?

Более конкретно. Что вам нужно, чтобы произошло с вашим веб-просмотром между светлым и темным режимом? Редактировать ваш вопрос с подробностями (не отвечайте в комментарии).

rmaddy 25.07.2019 18:33
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
19
1
11 255
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Ответ принят как подходящий

Предполагая, что ваш вопрос спрашивает, как изменить цвета содержимого 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

raeldor 30.03.2020 09:49

как я могу использовать это на xcode?

Yogesh Patel 03.11.2021 20:30

С той же проблемой я столкнулся, когда переносил свое приложение для 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?

Yogesh Patel 03.11.2021 20:30

Корневой тег инвертирует цвет всех компонентов, кроме таблицы, а изображения будут в негативной форме.

Чтобы выполнить идеальное инвертирование цвета, проверьте приведенный ниже файл 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?

Yogesh Patel 03.11.2021 20:30

Более просто, просто инвертируйте все цвета и стили, кроме изображений:

@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/…

Yogesh Patel 03.11.2021 20:31

Другие вопросы по теме