有几种方法可以定位其他元素。在CSS的最后，我会简单地使用**.light-mode element{}**。
这将为您提供更多的控制，在一个元素的基础上，如果你真的想做更多的事情。

function myFunction() {
  var element = document.body;
  element.classList.toggle("light-mode");
}

h1 {
  font-family: 'Roboto', sans-serif;
}

h3 {
  font-family: 'Roboto', sans-serif;
}

h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
}

h5 {
  margin-top: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
}

body {
  background-color: #424447;
  margin: 0;
}

.navbar {
  background-color: #2e3033;
  height: 25px;
  width: 100%;
  border-bottom: solid #65676b;
  font-family: "Segoe UI";
  text-align: center
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  width: 50%;
  float: left;
}

.navbar li {
  float: center;
}

.navbar a {
  font-family: 'Roboto', sans-serif;
  display: block;
  width: 100%;
  font-size: 20px;
  color: white
}

.navbar a:link,
.navbar a:visited {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
}

.navbar a:hover,
.navbar a:active {
  background-color: #373b44;
}

.homepage {
  margin-top: 10px;
  margin-left: 15px;
  color: white;
  font-family: "Segoe UI";
}

.motivepage {
  height: 100%;
  width: 45%;
  margin-top: 10px;
  margin-left: 7.5px;
  margin-right: 7.5px;
  border: 4px solid #65676b;
  border-radius: 5px;
  color: white;
  background-color: #56585b;
  font-family: "Segoe UI";
}

.light-mode {
  background-color: rgb(220, 220, 220);
}

.light-mode .motivepage{
  background:#fff;
}

.light-mode .motivepage,
.light-mode h1,
.light-mode h3{
  color: #000;
}

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

<div class="navbar">
  <ul>
    <li><a href="google.com">Home</a></li>
    <li><a href="google.com">Motives</a></li>
  </ul>
</div>

<div class="homepage" id="homepage">
  <button onclick="myFunction()" style="float: right; height: 20px; width: 19%; margin: 5px; background-color: whitesmokel; border: 0px solid white; border-radius: 8px;">
    Toggle Light Mode
  </button>

  <h1>Home</h1>

  <h3>
    We look to bring you powerful, empowering, and inspirational motives that will help push you further through life.
  </h3>
</div>

<div class="motivepage" style="float: left;">
  <h2 style="margin-left: 8px; margin-bottom: 0px;">
    xxx
  </h2>
  <h4 style="margin-left: 8px; margin-top: 2px; margin-bottom: 0px;">
    xxx
  </h4>
  <h5 style="margin-left: 8px;">
    xxx
  </h5>
</div>

<div class="motivepage" style="float: right">
  <h2 style="margin-left: 8px; margin-bottom: 0px;">
    xxx
  </h2>
  <h4 style="margin-left: 8px; margin-top: 2px; margin-bottom: 0px;">
    xxx
  </h4>
  <h5 style="margin-left: 8px;">
    xxx
  </h5>
</div>

您的.light-mode文本颜色被.homepage颜色覆盖，该颜色在此处具有更高的特异性。您可以通过使用 * 选择器（或您选择的另一个选择器）添加更多特异性来解决此问题：
在灯光模式选择器后，添加：

.light-mode * {
  color: black;
}