Плавный переход темного/светлого режима chakraUI

Есть ли способ сгладить переход темного/светлого режима с помощью chakraUI (проект React JS) вместо мгновенного изменения?

Как настроить Tailwind CSS с React.js и Next.js?
Как настроить Tailwind CSS с React.js и Next.js?
Tailwind CSS - единственный фреймворк, который, как я убедился, масштабируется в больших командах. Он легко настраивается, адаптируется к любому...
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
Здесь представлена дополнительная информация о восьми репозиториях GitHub, о которых должен знать каждый веб-разработчик:
0
0
59
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Пользовательский интерфейс Chakra намеренно сделал переключение мгновенным. Во время переключения Chakra UI вставляет transition: none!important, чтобы отключить все переходы.

Смотрите https://github.com/chakra-ui/chakra-ui/pull/5946

Но если вам действительно нужны какие-то переходы, да, это можно сделать некоторыми хакерскими способами. Мы можем просто сделать то же самое. Вот пример, нажмите кнопку Toggle, чтобы увидеть переход: https://codesandbox.io/s/stack-overflow-chakra-ui-theme-transition-yl0ey3?file=/src/App.js

toggleColorMode();
const styleEl = document.createElement('style');
const cssText = document.createTextNode(
  'html * { transition: color, background-color 0.3s ease-out!important }',
);
styleEl.appendChild(cssText);
document.head.appendChild(styleEl);
setTimeout(() => {
  document.head.removeChild(styleEl);
}, 300);

То же самое, что и Chakra UI. Мы можем временно вставить стиль перехода с помощью !important, чтобы переопределить стиль пользовательского интерфейса Chakra.

Другие вопросы по теме