Onclick change border-bottom to a div by classname and set dark mode on/off

I have this dark mode JavaScript and it changes the background color and text font color perfect but I need it to also change the border-bottom of the div class name .veritas and that part is not working

Here is the code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var toggleBtn = document.getElementById("toggleBtn");
var body = document.getElementsByTagName("body")[0];
var borderBottom = document.getElementById(".veritas");
toggleBtn.addEventListener("click", function() {
var bgColor, textColor;
if (body.classList.contains("dark-mode")) {
body.classList.remove("dark-mode");
toggleBtn.textContent = "Dark mode is on";
bgColor = "#FFFFFF";
textColor = "#101010";
borderBottom = "#101010";
} else {
body.classList.add("dark-mode");
toggleBtn.textContent = "Dark mode is off";
bgColor = "#101010";
textColor = "#FFFFFF";
borderBottom = "#FFFFFF";
}
body.style.backgroundColor = bgColor;
body.style.color = textColor;
borderBottom.style.borderBottom = borderBottom;
// Save the chosen colors to localStorage
localStorage.setItem("bgColor", bgColor);
localStorage.setItem("textColor", textColor);
localStorage.setItem("borderBottom", borderBottom);
});
// Retrieve saved colors from localStorage
var savedBgColor = localStorage.getItem("bgColor");
var savedTextColor = localStorage.getItem("textColor");
var savedBordersColor = localStorage.getItem("borderBottom");
if (savedBgColor && savedTextColor) {
body.style.backgroundColor = savedBgColor;
body.style.color = savedTextColor;
borderBottom.style.borderBottom = borderBottom;
if (savedBgColor === "#101010" && savedTextColor === "#FFFFFF") {
body.classList.add("dark-mode");
toggleBtn.textContent = "Dark mode is off";
}
}

<!-- language: lang-css -->

body {
margin: 0;
height: 100%;
}
.dark-mode {
background-color: #101010;
color: #FFFFFF;
}
.veritas {
width: 90%;
border-bottom: 1px solid #101010;
}

<!-- language: lang-html -->

<button id="toggleBtn">Dark mode is on</button>
<div class="veritas">
border-bottom should change color in dark/light mode
</div>

<!-- end snippet -->

Any idea why this does not change the border-bottom in the div class name .veritas?

I created a Codepen to see it in action
https://codepen.io/familias/pen/gOQMrjX

There are a couple of errors

1 .veritas is a class and you are access it using

borderBottom=document.getElementById(".veritas");. 

Change it to using className

var borderBottom=document.getElementsByClassName("veritas")[0];

or querySelector

var borderBottom=document.querySelector(".veritas");

2 . borderBottom.style.borderBottom = borderBottom; this should contain width style color, while you are only supplying color,
change all the occurrences of

borderBottom = "#FFFFFF";

to

borderBottom = "1px solid #FFFFFF";

It works like this

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var toggleBtn = document.getElementById("toggleBtn");
var body = document.getElementsByTagName("body")[0];
var borderDiv=document.getElementsByClassName("veritas")[0];
toggleBtn.addEventListener("click", function() {
var bgColor, textColor,borderBottom;
if (body.classList.contains("dark-mode")) {
body.classList.remove("dark-mode");
toggleBtn.textContent = "Dark mode is on";
bgColor = "#FFFFFF";
textColor = "#101010";
borderBottom = "#101010";
} else {
body.classList.add("dark-mode");
toggleBtn.textContent = "Dark mode is off";
bgColor = "#101010";
textColor = "#FFFFFF";
borderBottom = "#FFFFFF";
}
body.style.backgroundColor = bgColor;
body.style.color = textColor;
borderDiv.style.borderBottomColor = borderBottom;
});

<!-- language: lang-css -->

body {
margin:0;
height:100%;
}
.dark-mode {
background-color: #101010;
color: #FFFFFF;
}
.veritas{width:90%;
border-bottom:1px solid #101010;
}

<!-- language: lang-html -->

<button id="toggleBtn">Dark mode is on</button>
<div class="veritas">
border-bottom should change color in dark/light mode
</div>

<!-- end snippet -->