При загрузке страницы фон плавно меняется с белого на темный из-за transition. Как избавиться от этого эффекта при этом сохранив плавность смены тем?

Я реализую функционал смены цветовых тем приложения на реакте. Для плавности повесил transition на элементы. Когда страница загружается впервые, происходит переход цвета с белого на темный. Я хочу избавиться от такого перехода при начальной загрузке страницы, но при этом сохранить плавность смены тем при нажатии кнопки. Если убрать transition проблема пропадает, но и плавность вместе с ней.

.root {
  margin: 0;
  font-size: var(--font-size);
  line-height: var(--line-height);
  background-color: var(--main-bg-color);
  transition: background-color 500ms;
}

html[data-theme='dark'] {
  --main-bg-color: #1a1a1a;
  --header-color: #0d0d0d;
  --submit-button: #1e6f9f;
  --submit-button-hover: #0a6193;
  --input-bg-color: #262626;
  --list-item-bg: #262626;
  --input-focus-outline: #fff;
  --input-text: #fff;
  --text-todo: #f2f2f2;
  --text-completed-todo: #808080;
  --modal-window: #353535;
}

html[data-theme='light'] {
  --main-bg-color: #ffffff;
  --header-color: #1e4e74;
  --submit-button: #61a7cf;
  --submit-button-hover: #5897bb;
  --input-bg-color: #e2e2e2;
  --list-item-bg: #dbdbdb;
  --input-focus-outline: #5e5e5e;
  --input-text: #242424;
  --text-todo: #242424;
  --text-completed-todo: #242424;
  --modal-window: #363636;
}