Как изменить темный режим на айфоне

Помогла ли Вам статья?

Время прочтения
4 мин

Просмотры 7K

Всем привет!

Меня зовут Андрей, я из команды «Мой Брокер». Я рассĸажу Вам ĸаĸ добавлял поддержĸу темной темы в iOS.

Apple в iOS 13 добавила темную тему для всей системы, пользователи могут выбрать светлое или темное оформление на настройках iOS. В темном режиме система использует более темную цветовую палитру для всех экранов, видов, меню и элементов управления.

Кому интересно — заходите под кат.

Поддержка темного оформления

Приложение созданное в Xcode 11 по-умолчанию поддерживает темное оформление в iOS 13. Но для полноценной реализации темного режима, необходимо внести дополнительные правки:

• Цвета должны поддерживать светлое и темное оформление
• Изображения должны поддерживать светлое и темное оформление

В iOS 13 был представлен новый инициализатор UIColor:

init (dynamicProvider: @escaping (UITraitCollection) -> UIColor)

Добавим статическую функцию для создания цвета с поддержкой переключения между светлым и темным оформлением:

extension UIColor {
    
    static func color(light: UIColor, dark: UIColor) -> UIColor {
        if #available(iOS 13, *) {
            return UIColor.init { traitCollection in
                return traitCollection.userInterfaceStyle == .dark ? dark : light
            }
        } else {
            return light
        }
    }
}

CGColor не поддерживает автоматическое переключение между светлым и темным оформлением. 
Необходимо вручную менять CGColor после изменения оформления.

override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
        
    layer.borderColor = UIColor.Pallete.black.cgColor
}

Так же есть возможность добавить цвет для темного оформления в ресурсах.

Но я предпочитаю добавлять цвета в коде.

extension UIColor {
    
    struct Pallete {

        static let white = UIColor.color(light: .white, dark: .black)
        static let black = UIColor.color(light: .black, dark: .white)

        static let background = UIColor.color(light: .white, dark: .hex("1b1b1d"))
        static let secondaryBackground = UIColor(named: "secondaryBackground") ?? .black

        static let gray = UIColor.color(light: .lightGray, dark: .hex("8e8e92"))

    }
}

Для изображений достаточно добавить вариант изображения для темного оформления прям в ресурсах.

Сделаем небольшое приложение для примера.

Приложение будет содержать два окна и три экрана.

Первое окно: экран авторизации.

Второе окно: экран ленты и экран профиля пользователя.

Переключение светлой и темной темы

Создаем enum для темы:


enum Theme: Int, CaseIterable {
    case light = 0
    case dark
}

Добавляем возможность хранения текущей темы, чтобы восстановить её после перезапуска приложения.

extension Theme {
    
    // Обертка для UserDefaults
    @Persist(key: "app_theme", defaultValue: Theme.light.rawValue)
    private static var appTheme: Int
    
    // Сохранение темы в UserDefaults
    func save() {
        Theme.appTheme = self.rawValue
    }
    
    // Текущая тема приложения
    static var current: Theme {
        Theme(rawValue: appTheme) ?? .light
    }
}

@propertyWrapper
struct Persist<T> {
    let key: String
    let defaultValue: T
    
    var wrappedValue: T {
        get { UserDefaults.standard.object(forKey: key) as? T ?? defaultValue }
        set { UserDefaults.standard.set(newValue, forKey: key) }
    }
    
    init(key: String, defaultValue: T) {
        self.key = key
        self.defaultValue = defaultValue
    }
}

Чтобы принудительно установить оформление нужно изменить стиль всех окон приложения.

Реализуем переключение темы в приложении.


extension Theme {
    
    @available(iOS 13.0, *)
    var userInterfaceStyle: UIUserInterfaceStyle {
        switch self {
        case .light: return .light
        case .dark: return .dark
        }
    }
    
    func setActive() {
        // Сохраняем активную тему
        save()
        
        guard #available(iOS 13.0, *) else { return }
        
        // Устанавливаем активную тему для всех окон приложения
        UIApplication.shared.windows
            .forEach { $0.overrideUserInterfaceStyle = userInterfaceStyle }
    }
}

Так же необходимо менять стиль окна на текущую тему перед показом окна.

extension UIWindow {
    
    // Устанавливаем текущую тему для окна
    // Необходимо вызывать перед показом окна
    func initTheme() {
        guard #available(iOS 13.0, *) else { return }
        
        overrideUserInterfaceStyle = Theme.current.userInterfaceStyle
    }
}

Добавляем переключение на системной тему

Добавляем системную тему в enum темы.

enum Theme: Int, CaseIterable {
    case system = 0
    case light
    case dark
}

После принудительной установки светлой или темной темы, нельзя определить какое оформление включено в системе. Чтобы узнавать системное оформление добавляем окно в приложение, у которого не будем принудительно менять оформление. Так же необходимо реализовать изменение оформления, когда в приложении установлена системная тема и пользователь меняет оформление в iOS.

final class ThemeWindow: UIWindow {
    
    override public func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {

        // Если текущая тема системная и поменяли оформление в iOS, опять меняем тему на системную.
        // Например: Пользователь поменял светлое оформление на темное.
        if Theme.current == .system {
            Theme.system.setActive()
        }
    }
}

let themeWindow = ThemeWindow()

class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        ...
        // Добавляем окно к приложению, но не показываем его
        // Необходимо вызывать до установки главного окна приложения
        themeWindow.makeKey()
        ...
        return true
    }
}

extension Theme {
    
    @available(iOS 13.0, *)
    var userInterfaceStyle: UIUserInterfaceStyle {
        switch self {
        case .light: return .light
        case .dark: return .dark
        case .system: return themeWindow.traitCollection.userInterfaceStyle
        }
    }
    
    func setActive() {
        // Сохраняем активную тему
        save()
        
        guard #available(iOS 13.0, *) else { return }
        
        // Устанавливаем активную тему для всех окон приложения
        // Не красим это окно чтобы узнавать системную тему
        UIApplication.shared.windows
            .filter { $0 != themeWindow } 
            .forEach { $0.overrideUserInterfaceStyle = userInterfaceStyle }
    }
}

Результат

Поддержка темного оформления и переключение между системной, светлой и темной темой.

Ссылка на весь проект

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

На iPhone должна быть установлена версия ​​iOS 13 или выше, а на iPad должна быть установлена ​​iPadOS. Проверьте, какую версию вы используете, в разделе Настройки > Основные > Обновление ПО. Если доступно обновление, нажмите «Загрузить и установить».

Активация тёмного режима

На iPhone или iPad перейдите в Настройки > Экран и яркость и выберите тёмное оформление. Это автоматически изменит тему для предустановленных приложений, таких как Файлы, Сообщения, Музыка, Новости, Заметки, Фотографии, Safari и TV, а также в некоторых совместимых сторонних приложениях, таких как Gmail. В других, например Facebook, нужно будет активировать тёмный интерфейс из настроек самого приложения.

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

Установка расписания для тёмного режима

Если вы предпочитаете использовать тёмный режим в определённое время суток, можно задать расписание, когда устройство включает и выключает его. Перейдите в Настройки > Экран и яркость и включите параметр «Автоматически».

По умолчанию светлая тема будет использоваться до заката, а тёмная — до восхода солнца. Если вы хотите установить определённое время для тёмного и светлого режима, нажмите «Расписание» и установите время включения разных режимов.

Эти темы будут включаться каждый день, но вы не обязаны постоянно придерживаться этого времени. Даже если установлен автоматический режим, вы всё равно можете в любой момент включить тёмный режим в настройках или в Центре управления; светлый интерфейс после него включится по расписанию.