Большинство современных веб-браузеров поддерживают возможность запуска веб-сайтов в темном или светлом режиме. Blocs имеет ряд встроенных функций, предназначенных для поддержки процесса добавления темных и светлых тем на создаваемые вами сайты.
Как это работает?
Когда Blocs сайт просматривается на устройстве под управлением ОС в темном режиме, класс темная тема будет добавлен в основной тег страницы. Это полезно, поскольку позволяет легко стилизовать любой элемент с помощью класса, особенно в темном режиме.
Например, если у вас есть кнопка с примененным классом .my-кнопка, чтобы придать кнопке другой вид в темном режиме, все, что вам нужно сделать, это добавить новый класс, используя Классный менеджер и назовите файл .темная тема .моя кнопка. Любые значения стиля, добавленные к этому особому варианту класса, вступят в силу только тогда, когда сайт просматривается на устройстве, работающем в темном режиме.
Классы темной темы
Чтобы создать версию любого класса с темной темой, просто щелкните правой кнопкой мыши класс в Классный менеджер и в контекстном меню выберите Создать темную версию темы. Это создаст класс с правильным именем, поэтому его значения стиля будут действовать только при просмотре сайта в темном режиме.
Предварительный просмотр темного режима
Если вы хотите предварительно просмотреть стиль темной темы вашего сайта, вы можете смоделировать темный режим ОС, используя параметр темного режима сайта, находящийся в настройки холста.
Обратите внимание, что параметр холста в темном режиме сайта также влияет на режим предварительного просмотра в приложении, а также на основной холст дизайна.
Быстрый пример
Ниже приведен быстрый пример, который описывает процесс установки цвета фона для Bloc специально для темного режима, используя все методы, упомянутые в этом посте.
