Javascript 切换暗模式 新创建元素的问题

// DOM utility functions:

const el = (sel, par) => (par || document).querySelector(sel);
const els = (sel, par) => (par || document).querySelectorAll(sel);
const elNew = (tag, prop) => Object.assign(document.createElement(tag), prop);


// App: Tasks

const elInput = el(`#taskInput`);
const elAdd = el(`#taskAdd`);
const elForm = el(`#taskForm`);
const elTasks = el(`#tasks`);

const createTask = (task) => {
  tasks.push(task);
  const elTask = elNew(`li`, {textContent: task, className: "task"});
  elTasks.append(elTask);
};

elForm.addEventListener(`submit`, (evt) => {
  evt.preventDefault();
  const task = elInput.value.trim(); // Trim from whitespaces!
  if (!task) return alert(`Please, fill the input!`);
  createTask(task);
  elInput.value = ``;
});

// Init: Populate existing tasks
const tasks = ["Drink coffee", "Develop some app"];
tasks.forEach(createTask);


// App: Dark mode

const elBody = el(`body`);
const elToggleDark = el(`#toggleDark`);
elToggleDark.addEventListener("click", () => {
  elBody.classList.toggle("dark", elToggleDark.checked);
});

.dark {
  background: #333;
  color: #fff;
}

.dark #taskInput {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

.dark ol {
  border: 1px solid rgba(255,255,255,0.2);
}

<label><input type="checkbox" id="toggleDark"> Toggle Dark Mode</label>

<form id="taskForm">
  <input id="taskInput" type="text" placeholder="Task...">
  <button id="taskAdd">Add</button>
</form>

<ol id="tasks"></ol>