navbarparagraphelements是元素列表。你必须为每一个单独设置。

// page elements for bright/dark mode

let brightOrDarkModeButton = document.querySelector('.sun-img-container')
let navBar = document.querySelector('.navBar')
let navBarParagraphElements = document.querySelectorAll('.nav-menu-option');

//

// DOM Events

brightOrDarkModeButton.addEventListener('click', changeBackgroundColour = () => {
    navBar.style.transition = 'background-color 0.15s linear';
    navBar.style.backgroundColor = 'white';
    for (let i = 0; i < navBarParagraphElements.length; i++) {
        navBarParagraphElements[i].style.color = 'black';
        navBarParagraphElements[i].style.transition = 'color 0.15s linear'; //Add this here
    }
});

<nav class="navBar">
  <a class="BP">BP</a>
  <div class="nav-menu">
    <a href="#" class="nav-menu-option">Home</a>
    <a href="#about-me" class="nav-menu-option">About Me</a>
    <a href="#projects" class="nav-menu-option">Projects</a>
  </div>
  <a class="CV-container">
    <p class="CV">CV</p>
  </a>
  <div class="sun-img-container">
    <img src="images/Sun.png" />
  </div>
</nav>

在我看来，最好使用单个css类来切换亮/暗

// page elements for bright/dark mode

let brightOrDarkModeButton = document.querySelector('.sun-img-container')
let navBar = document.querySelector('.navBar')

//

// DOM Events

brightOrDarkModeButton.addEventListener('click', () => navBar.classList.toggle("dark"));

.navBar.dark {
  transition: background-color 0.15s linear;
  background-color: white;
}

.navBar.dark .nav-menu-option {
  transition: color 0.15s linear;
  color: black;
}

<nav class="navBar">
  <a class='BP' href="REMOVED FOR PRIVACY">BP</a>
  <div class="nav-menu">
    <a href="#" class="nav-menu-option">Home</a>
    <a href="#about-me" class="nav-menu-option">About Me</a>
    <a href="#projects" class="nav-menu-option">Projects</a>
  </div>
  <a class="CV-container" href="REMOVED FOR PRIVACY">
    <p class="CV">CV</p>
  </a>
  <div class="sun-img-container">
    <img src="images/Sun.png">
  </div>
</nav>