MDC JavaScript dark theme conditionals always taking same route suddenly

Question

I've been using this function to toggle the dark mode on my website and it has been working great but now whenever I flip the switch, dark mode is enabled correctly as can be seen in the console but when trying to toggle it again, it says "Switched to dark mode" again and will not return to light mode.

I did recently transition my JS to using let and const instead of just var if that might be the problem.

The logic is based off of the value of currentColor which is equal to getComputedStyle(document.documentElement).getPropertyValue("--mdc-theme-background"); The value starts off as #fafafa and is changed to #121212 when dark mode is enabled and back to #fafafa when switching to light mode again.

With dark mode enabled, I even enter getComputedStyle(document.documentElement).getPropertyValue("--mdc-theme-background"); into the console and the string it returns is indeed #121212 so I'm not sure why it is still taking the route designated for when it is equal to #fafafa. I even have the else statement put an error message into the console but it is not going that route; it always goes down the if currentColor === #fafafa || #fafafa route.

Here is my function:

function toggleDarkMode() {
const currentColor = getComputedStyle(document.documentElement).getPropertyValue("--mdc-theme-background");
// const hrs =
if (currentColor === "#fafafa" || " #fafafa") {
    document.documentElement.style.setProperty("--mdc-theme-background", "#121212");
    document.documentElement.style.setProperty("--mdc-theme-surface", "#1d1d1d");
    document.documentElement.style.setProperty("--mdc-theme-on-surface", "rgba(255,255,255,.87)");
    document.documentElement.style.setProperty("--mdc-theme-text-primary-on-light", "rgba(255,255,255,.6)");
    console.log("Switched to dark mode.");
} else if (currentColor === "#121212") {
    document.documentElement.style.setProperty("--mdc-theme-background", "#fafafa");
    document.documentElement.style.setProperty("--mdc-theme-surface", "#fff");
    document.documentElement.style.setProperty("--mdc-theme-on-surface", "rgba(0,0,0,0.87)");
    document.documentElement.style.setProperty("--mdc-theme-text-primary-on-light", "rgba(0,0,0,.6)");
    console.log("Switched to light mode.");
} else {
    console.log("Something went wrong with toggling dark mode.");
}
}

Edit: If I remove the or part of the statement, it seems to work again. Why would that matter? While dark mode is enabled, currentColor is neither #fafafa nor #fafafa so the statement should be false. The only reason I have the or statement there is because the value starts off with a space before it and I would rather not have a space before it when I change it in JS.

Edit 2: So I removed the conditional and changed it to just be if currentColor === "#fafafa" and I removed the space before the # in my CSS. I would still love to know why this doesn't work as I would expect though, as it's bugging me and I would rather not have my code functionality dependent on if there is a space in my CSS or not.