Adding Animation while switching to dark mode HTML

问题

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.

回答1:

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;
}

来源：https://stackoverflow.com/questions/61129414/adding-animation-while-switching-to-dark-mode-html