I created a dark mode for my webpage by following the link https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8 I want to add an animation effect so that when the dark mode is applied, the transition is smooth. How do I do it?
I know CSS keyframes are used to add animations or alternatively jQuery can be used, but I can't seem to get how to use them.
You could use a css transition. Here follows a simple example, click in the snippet to transition the background color:
const rootDataset = document.documentElement.dataset;
document.onclick = () => {
const inDarkMode = (rootDataset.theme === 'dark');
rootDataset.theme = inDarkMode ? '' : 'dark';
}:root {
--primary-color: beige;
}
[data-theme="dark"] {
--primary-color: grey;
}
body {
background: var(--primary-color);
transition: background 2s;
}