Добавление анимации при переходе в темный режим HTML

Question

Я создал темный режим для своей веб-страницы, перейдя по ссылке https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8 Я хочу добавить эффект анимации, чтобы при применении темного режима переход был плавным. Как мне это сделать?

Я знаю, CSS ключевые кадры используются для добавления анимации или, альтернативно, jQuery могут использоваться, но я не могу понять, как их использовать.

Answer 1

Вы можете использовать css переход . Ниже приведен простой пример, щелкните фрагмент, чтобы изменить цвет фона:

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