I created a dark mode for my webpage by following the link 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.

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.

• javascript
• jquery
• html
• css
• css-animations

• 1 It's better to include relevant code in your question, as it gives the potential answerer easier access to your problem. Furthermore links may break. – Andre Nuechter Commented Apr 9, 2020 at 20:54

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