Не меняется тема у новых элементов

const tasks = [
    {id: 1, completed: false, text: 'Посмотреть новый урок по JavaScript'},
    {id: 2, completed: false, text: 'Выполнить тест после урока'},
    {id: 3, completed: false, text: 'Выполнить ДЗ после урока'},
]
let maxIdNumber = 3;

let taskList = document.querySelector('.tasks-list');
function createHtmlTegs (tegBefore, task) {
    let div1 = document.createElement('div');
    let div2 = document.createElement('div');
    let div3 = document.createElement('div');
    let form = document.createElement('form');
    let input = document.createElement('input');
    let label = document.createElement('label');
    let span = document.createElement('span');
    let button = document.createElement('button');
    div1.className = 'task-item';
    div1.dataset.taskId = task.id;
    div2.className = 'task-item__main-container'
    div3.className = 'task-item__main-content';
    form.className = 'checkbox-form';
    input.className = 'checkbox-form__checkbox';
    input.type = 'checkbox';
    input.id = 'task-' + task.id;
    label.htmlFor = 'task-' + task.id;
    span.className = 'task-item__text';
    span.textContent = task.text;
    button.className = 'task-item__delete-button default-button delete-button';
    button.dataset.deleteTaskId = task.id;
    button.textContent = 'Удалить';

    form.append(input, '', label);
    div3.append(form, '', span);
    div2.append(div3, '', button);
    div1.append(div2)

    tegBefore.append(div1)
};

for (let task of tasks) {
    createHtmlTegs(taskList, task);
}
const body = document.querySelector('body');
const createTaskForm = body.querySelector('.create-task-block');
const span = document.createElement('span');
span.className = 'error-message-block';
createTaskForm.append(span);
const confirmWindow = createConfimWindow();
body.prepend(confirmWindow);
const modalOverlay = body.querySelector('.modal-overlay');
modalOverlay.classList.add('modal-overlay_hidden');
const taskItem = body.querySelectorAll('.task-item');
const tasksList = body.querySelectorAll('.tasks-list')[0];
const allButtons = body.querySelectorAll('button');


createTaskForm.addEventListener('submit', event => {
    event.preventDefault();
    const {target} = event;
    const taskNameInput = target.taskName;
    const taskValue = taskNameInput.value;
     let canAdd = false
    ++maxIdNumber;
    let task = {
        id: maxIdNumber,
        completed: false,
        text: taskValue
    }

    tasks.forEach(el => {
        if(el.text === taskValue) {
            span.textContent = 'Задача с таким названием уже существует.'
                 canAdd = true
 
        }
    })
    
    if(!taskValue) {
    canAdd = true
        span.textContent = 'Название задачи не должно быть пустым'
    }
    
    if(!canAdd) {
     createHtmlTegs(taskList, task);
         tasks.push(task);
         span.textContent = ''
    }
    
});


function createConfimWindow () {
    let div1 = document.createElement('div');
    let div2 = document.createElement('div');
    let div3 = document.createElement('div');
    let h3 = document.createElement('h3');
    let button1 = document.createElement('button');
    let button2 = document.createElement('button');
    div1.className = 'modal-overlay';
    div2.className = 'delete-modal';
    div3.className = 'delete-modal__buttons';
    h3.className = 'delete-modal__question';
    h3.textContent = 'Вы действительно хотите удалить эту задачу?';
    button1.className = 'delete-modal__button delete-modal__cancel-button';
    button1.textContent = 'Отмена';
    button2.className = 'delete-modal__button delete-modal__confirm-button';
    button2.textContent = 'Удалить'
    div3.append(button1, '', button2);
    div2.append(h3);
    div1.append(div2, '', div3);
    return div1;
}


taskList.addEventListener('click', event => {
    const isDeleteButton = event.target.closest('.task-item__delete-button');
    const isIdTask = event.target.closest('[data-task-id]');
    if(isDeleteButton) {
        modalOverlay.classList.remove('modal-overlay_hidden');
    }
    modalOverlay.addEventListener('click' , event => {
        const buttonCancel = event.target.closest('.delete-modal__cancel-button');
        const buttonDelete = event.target.closest('.delete-modal__confirm-button')
        if(buttonCancel) {
            modalOverlay.classList.add('modal-overlay_hidden')
        } else if (buttonDelete) {
            isIdTask.style.display = 'none';
            modalOverlay.classList.add('modal-overlay_hidden')
        }
    })
})

function makeDarkTheme () {
    body.style.background = '#24292E'
        if (tasksList.classList.contains('color-white')) tasksList.classList.remove('color-white');
        tasksList.classList.add('color-dark');
    allButtons.forEach(button => {
    button.style.border = '1px solid #ffffff'});
}
function makeWhiteTheme () {
    body.style.background = 'initial'

        if (tasksList.classList.contains('color-dark')) tasksList.classList.remove('color-dark');
        tasksList.classList.add('color-white');

        allButtons.forEach(button => {
            button.style.border = 'initial'
        });
        i = 0
}
let i = 1;
body.addEventListener('keydown', event => {
    const { key } = event;
    if(key === 'Tab' && i == 1) {
        makeDarkTheme();
    } else if (key === 'Tab' && i == 2) {
         makeWhiteTheme();
    }
    ++i;
});

:root {
    --primary-color: #546792;
    --text-color: #ffffff;
    --delete-button-background: #FF0000;
    --checkbox-checked-background: #546791;
    --checkbox-border-color: #000;
    --checkbox-text-color: #fff;
    --default-border-color: #000;
    --error-color: #FF0000;
    --modal-overlay: rgb(84, 103, 145, 0.6);
}

html {
    font-size: 10px;
    line-height: 10px;
}

body {
    padding: 0;
    margin: 0;
}

#tasks {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 20px;
}

.tasks__wrapper {
    max-width: 70%;
    width: 100%;
}

.tasks__wrapper_hidden {
    display: none;
}

.main-navigation {
    display: flex;
    justify-content: space-evenly;
    background-color: var(--primary-color);
}

.main-navigation__button-item {
    position: relative;
    background-color: var(--primary-color);
    color: var(--text-color);
    padding: 25px;
    text-decoration: none;
    font-size: 2rem;
    line-height: 2.5rem;
}

.main-navigation__button-item_selected {
    box-shadow: inset 0 0 0 4px #fff;
}

.create-task-block {
    position: relative;
}

.create-task-block__input {
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    color: var(--primary-color);
  
    font-size: 2rem;
    line-height: 2.5rem;
    height: 40px;
    width: 50%;
    padding: 0;
    margin-bottom: 40px;
}

.create-task-block__button {
    height: 44px;
}

.create-task-block__button,
.task-item__delete-button {
    cursor: pointer;

    background-color: var(--primary-color);
    color: var(--text-color);
    border: none;
    padding: 5px 20px;
    border-radius: 5px;
  
    font-size: 1.5rem;
    line-height: 2.5rem;
}

.task-item {
    width: 100%;
    font-size: 1.5rem;
    line-height: 2.5rem;
    border-bottom: 2px solid var(--primary-color);
    padding: 10px 0;

    display: flex;
    flex-direction: column;
}

.task-item__main-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.task-item__main-content {
    display: flex;
    align-items: center;
}

.task-item__delete-button {
    transition: 0.2s ease;
}

.task-item__delete-button {
    position: relative;
}

.task-item__delete-button:hover {
    background-color: var(--delete-button-background);
}

.task-item__text {
    font-size: 2rem;
    line-height: 2.5rem;
}

.checkbox-form__checkbox + label {
    display: block;
    margin: 0.2em;
    cursor: pointer;
    padding: 0.2em;
}
  
.checkbox-form__checkbox  {
    display: none;
}
  
.checkbox-form__checkbox + label:before {
    content: "\2714";
    border: 0.1em solid var(--checkbox-border-color);
    border-radius: 0.2em;
    display: inline-block;
    width: 1em;
    height: 1em;
    padding-left: 0.2em;
    padding-bottom: 0.3em;
    margin-right: 0.2em;
    vertical-align: bottom;
    color: transparent;
    transition: .2s;
}

.checkbox-form__checkbox + label:active:before {
    transform: scale(0);
}

.checkbox-form__checkbox:checked + label:before {
    background-color: var(--checkbox-checked-background);
    border-color: var(--checkbox-checked-background);
    color: var(--checkbox-text-color);
}

.checkbox-form__checkbox:disabled + label:before {
    transform: scale(1);
}

.checkbox-form__checkbox:checked:disabled + label:before {
    transform: scale(1);
    background-color: var(--checkbox-checked-background);
    border-color: var(--checkbox-checked-background);
}

.tooltip {
    position: absolute;
    left: -50%;
    bottom: calc(100% + 5px);
    margin: auto 0;

    background-color: var(--primary-color);
    color: var(--text-color);
    font-size: 1.5rem;
    line-height: 2rem;
    width: 200px;
    border: 2px solid var(--default-border-color);
}

.error-message-block {
    position: absolute;
    left: 0;
    bottom: 0;

    font-size: 1.5rem;
    line-height: 2rem;
    color: var(--error-color);
}

.modal-overlay {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--modal-overlay);
    z-index: 1000;
    transition: 0.2s ease;
    opacity: 1;
}

.modal-overlay_hidden {
    top: 100%;
    opacity: 0;
}

.delete-modal {
    position: relative;
    top: 0;
    width: 50%;
    height: fit-content;
    padding: 15px 25px;

    border: 2px solid var(--text-color);
    border-radius: 5px;
    background-color: var(--primary-color);
    transition: 0.3s ease-in;
}

.delete-modal__question {
    font-size: 2rem;
    line-height: 2.5rem;
    color: var(--text-color);
    margin: 0;
    margin-bottom: 30px;
    text-align: center;
}

.delete-modal__buttons {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.delete-modal__button {
    cursor: pointer;

    font-size: 2rem;
    line-height: 2.5rem;

    border: 1px solid var(--text-color);
    border-radius: 5px;

    background: none;
    color: var(--text-color);
    padding: 5px 10px;

    transition: 0.3s ease;
}

.delete-modal__button:hover {
    box-shadow: 0 0 0 1px var(--text-color);
}

.delete-modal__confirm-button {
    background-color: var(--delete-button-background);
    border: 1px solid var(--delete-button-background);
}

.tasks-list.color-dark .task-item {color: white}
.tasks-list.color-white .task-item {color: initial}

<div id="tasks">
    <div class="tasks__wrapper">
      <form class="create-task-block">
        <input
          name="taskName"
          class="create-task-block__input default-text-input"
          type="text"
          placeholder="Создайте новую задачу"
          value="Посмотреть урок по JavaScript"
        >
        <button
          type="submit"
          class="create-task-block__button default-button"
        >
          Создать
        </button>
      </form>
      <div class="tasks-list"></div>
    </div>
  </div>