Why does the button be pressed the second time?

Question

Hi, created a button, and to change the theme of the site the first time you need to click twice, and then everything works fine! How i can fix this?
Code:
HTML:
<button onclick = "theme()" id = "themeButton">
<font face = "Arial" size = "4" color = "#fff3d1"><b>Change theme</b></font>
</button>
CSS:
#themeButton {
position: fixed;
height: 112px;
width: 112px;
border: 6px solid #ffdca2;
border-radius: 50%;
background: #140e07;
padding: 1px;
right: 18px;
bottom: 218px;
outline: none;
}
JavaScript doesn't fit, that's part of the theme counter, the default on the site is a dark theme, but in other functions (darkTheme, brightTheme)just replace the color on all items by loop:
function theme() {
if (clicks % 2 === 0) {
darkTheme();
} else {
brightTheme();
}
}
Example var and loop: JavaScript
var txt = document.getElementsByTagName("font");
The cycle doesn't fit ;(

Answer 1

If you expect a really useful answer please copy the needed code to Sololearn‘s Playground and provide a link here to it. Did you know it?
By the way, I would like to code the
var dark = false;
function theme(){
if(!dark){
darkTheme();
dark = !dark;
} else {
brightTheme();
dark = !dark;
}
}