---
title: "Тёмный режим пейвола"
description: "Включите тёмный режим для пейволов в Adapty, чтобы улучшить пользовательский опыт."
---

Тёмный режим стал неотъемлемой частью мобильных приложений — особенно для пользователей, которые подолгу работают с контентом. Большинство приложений с поддержкой тёмного режима делают две версии пейвола (светлую и тёмную) для единообразия, и Adapty позволяет сделать именно это.

Когда тёмный режим включён, пейвол автоматически подстраивается под текущий режим устройства: показывает светлую версию в светлом режиме и тёмную — в тёмном.

  <img src="/assets/shared/img/darkmode.webp"
  style={{
    border: 'none', /* border width and color */
    width: '400px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

:::warning

Тёмный режим поддерживается:

- iOS: начиная с v3.1.0
- Android: начиная с v3.1.1
- React Native: начиная с v3.1.0
- Flutter: начиная с v3.2.0
- Unity: начиная с v3.3.0

Также доступен в резервных пейволах.

:::

Чтобы настроить тёмный режим для пейвола:

1. Сначала включите тёмный режим в **Layout settings** пейвола:

  <img src="/assets/shared/img/dark-mode.webp"
  style={{
    border: 'none', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

2. Теперь вы можете настраивать светлый и тёмный режимы отдельно. Чтобы переключиться в тёмный режим, активируйте переключатель **Dark Mode** в левом меню пейвола:

     <img src="/assets/shared/img/dark-mode-switch.webp"
     style={{
       border: 'none', /* border width and color */
       width: '700px', /* image width */
       display: 'block', /* for alignment */
       margin: '0 auto' /* center alignment */
     }}
     />
     

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

  <img src="/assets/shared/img/dark-mode-done.webp"
  style={{
    border: 'none', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
  />