Один класс для стилизации в JavaScript

Пусть у нас есть два класса, которые мы даем элементу в зависимости от его состояния:

div.active {
	color: red;
}
div.passive {
	color: black;
}

На самом деле наличие двух классов здесь может мешать. В этом случае мы можем переписать стили следующим образом через селектор :not:

div.active {
	color: red;
}
div:not(active) {
	color: black;
}

В этом случае мы сможем удобным образом тогглить наш класс, делая элемент активным или неактивным:

elem.classList.toggle('active');

Даны абзацы. Сделайте так, чтобы каждый абзац по первому клику на него красился в красный цвет, а по второму клику - красился обратно в черный.