smooth transition dark/light mode chakraUI

Question

is there a way to smooth out the transition dark/light mode with chakraUI (react js project), instead of instant change ?

Answer 1

Chakra UI intentionally made the switch happen instantly. During the switching, Chakra UI inserts transition: none!important to disable all the transitions.

See https://github.com/chakra-ui/chakra-ui/pull/5946

But If you really want some transitions, yes it can be done by some hacky ways. We can just do the same thing. Here is the example, click the Toggle button to see the transition: 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);

The same as what Chakra UI does. We can temporarily insert the transition style, with !important as well, to override Chakra UI's style.