Let me show you how to create a color mode changing system as you see on this website see in just two steps

Step 1

For the first step, we need to create some variables and replace them with all colors to be changed

your code would be looking like this now. With repeating color values

.header{
    background-color: #c9c9c9;
}
.footer{
    background-color: #c9c9c9;
}
h1{
    color: #000
}
p{
    color: #000
}
h3{
    color: #000
}

But now we have to replace with CSS variables

this is how it would look like

:root{
    --backgroundColor: #fff;
    --textColor: #000;
}
.header{
    background-color: var(--backgroundColor);
}
.footer{
    background-color: var(--backgroundColor);
}
h1{
    color: var(--textColor);
}
p{
    color: var(--textColor);
}
h3{
    color: var(--textColor);
}

Step 2

Now we have assigned variables to all the colors. We have to change those variable values with JS

for making the colors change you can use event listeners. this is for dark mode

document.getElementById('darkButtion').addEventListener('click', function (params) {
    const r = document.querySelector(':root');
    r.style.setProperty('--backgroundColor', 'rgb(25, 25, 25)');
    r.style.setProperty('--textColor',       '#fff');
});

and for the light theme put the same values you put in the CSS file something like this

document.getElementById('light').addEventListener('click', function (params) {
    const r = document.querySelector(':root');
    r.style.setProperty('--backgroundColor', '#fff');
    r.style.setProperty('--textColor',       '#000');
});