Light and Dark Mode Themes in Framer (Fundamentals Lesson 20) - AI Dubbing & Video Translation
English→
UkrainianMultilingual Script for Light and Dark Mode Themes in Framer (Fundamentals Lesson 20)
Color styles in Framer have a major trick up their sleeve: the ability to split them between themes for light and dark mode, which means a single color style can dynamically switch themes based on your visitor's device settings. If a visitor's device is set to light mode, your site loads the light theme, and if their device is set to dark mode, your site automatically loads the dark theme instead. Let's take a look at how crazy easy it is to make this happen in Framer. In the previous lesson, we looked at how to create color styles and apply them to the properties of layers, which is how we ended up with this example project with some color styles that have already been created and applied to the appropriate layers. But each time we created a new color style, we were technically only defining the color for the light mode theme, which is always what'll happen by default. Think of the light mode theme as the base theme.
Кольорові стилі Framer мають головну особливість: здатність розділяти їх на світлий і темний режими. Це дозволяє одному стилю динамічно змінювати тему відповідно до налаштувань пристрою відвідувача. Якщо на пристрої відвідувача світлий режим, ваш сайт завантажить світлу тему, а якщо темний — автоматично завантажить темну. Погляньмо, як неймовірно просто це зробити у Framer. На минулому уроці ми розглядали, як створювати кольорові стилі та застосовувати їх до властивостей шарів. Так ми й отримали цей приклад проєкту, де кольорові стилі вже створені та застосовані до відповідних шарів. Але, створюючи новий кольоровий стиль, ми визначали колір лише для світлого режиму, що відбувається за замовчуванням. Вважайте світлий режим базовою темою.