Тема — это общий внешний вид и стиль вашего веб-сайта.
если вы хотите добавить несколько тем в свое приложение для реагирования, эта статья для вас. Сегодня я расскажу о том, как добавить несколько тем в ваше приложение для реагирования.
Есть много способов добиться этого, например, вы можете использовать модули CSS, CSS в JS, а также есть некоторые пакеты npm. Но для масштабируемых приложений я покажу вам действительно простой способ сделать это.
Я добавлю несколько тем, используя переменные CSS и атрибуты темы данных. С их помощью мы сможем создать мощную и простую в использовании систему тем.
Переменные CSS позволяют определять именованные переменные, содержащие определенные значения, которые можно повторно использовать в документе CSS.
Атрибут data-* дает нам возможность встраивать пользовательские атрибуты данных во все элементы HTML.
Теперь в теге :root я определяю переменные темы по умолчанию, в моем случае это светлая тема. Я устанавливаю свойство data-theme attribute для тега body и устанавливаю его для каждой конкретной темы, такой как темная тема, морская тема, острая тема.
И после этого я просто использую эти переменные в своих div.
При нажатии кнопки я меняю атрибуты темы данных на определенные темы. Вот как вы можете добавить несколько тем в свое приложение для реагирования.
Вы можете хранить значения атрибутов данных в локальном хранилище и устанавливать выбранное значение при обновлении страницы. Я также использовал тот же метод для своего проекта.
Надеюсь, вам понравилась статья, и теперь вы можете легко добавлять несколько тем в свои проекты 👍.
Пожалуйста, поставьте лайк и подпишитесь на меня, чтобы получать больше таких статей ❤️.
Дальнейшее чтение
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.
