Check CSS value in javascript

I want to make JavaScript check my css code and return me if background color = #222327 it will change background color to #29fd53 But if old background color = #29fd53 it will change background color to #222327

My Js code

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

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

function changeBgC(){
var body = document.getElementsByTagName("body")[0];

var computedStyle = window.getComputedStyle(body)

var bodyBackgroundValue = computedStyle.getPropertyValue("background-color")
console.log(bodyBackgroundValue);
if (bodyBackgroundValue == "#222327") {
    document.querySelector('body').style.backgroundColor = "#29fd53"
  } else {
    document.querySelector('body').style.backgroundColor = "#222327"
  }
}

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

.body{
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background: #222327;
}

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

<div class="box">
<button onclick="changeBgC()" class="menuButton">≣</button>
</div>

<!-- end snippet -->

I just try to use i++ (I use onclick on my html code) but it only changes the background color to #29fd53. When I press the button again it doesn't do anything.

Here is what I try

function changeBgC(){
    var i = 0
    if (i % 2 === 0){
        document.querySelector('.body').style.backgroundColor = "#29fd53"
        console.log(i);
        i+=1
    }else{
        document.querySelector('.body').style.backgroundColor = "#222327"
        i+=1
    }
}

Your problem lies in setting the i variable inside the function scope. So every time you call changeBgC() it will set i = 0.

Declare i outside the function and it should work

let i = 0;
function changeBgC(){
    if (i % 2 === 0){
        document.querySelector('.body').style.backgroundColor = "#29fd53"
        console.log(i);
        i+=1
    }else{
        document.querySelector('.body').style.backgroundColor = "#222327"
        i+=1
    }
}

This can be achieved using a class instead of a function. This way the i variable can be encapsulated. I have used private members (#) as they are not required ouside of the class.

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

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

class backg {

#i=0;
#elem=document.body.style;

change() {
this.#i=!this.#i;
this.#elem.backgroundColor = this.#i?"#29fd53":"#222327";
}
}

bkg=new backg();

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

.body{
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background: #222327;
}

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

<div class="box">
<button onclick="bkg.change();" class="menuButton">≣</button>
</div>

<!-- end snippet -->

as @Teemu mentioned above getComputedStyle() returns an rgb() value
so to get the HEX code you can use a css variable rather than writing a function to convert from RGB to HEX,

trim function used to remove trailing spaces

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

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

function changeBgC(){
  let bgColor = getComputedStyle(document.body).getPropertyValue('--bg-color').trim();
  if(bgColor == "#222327"){
    document.body.style.setProperty('--bg-color', '#29fd53');
  } else {
    document.body.style.setProperty('--bg-color', '#222327');
  }
}

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

body{
   --bg-color: #222327;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    background-color: var(--bg-color);
}

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

<div class="box">
<button onclick="changeBgC()" class="menuButton">≣</button>
</div>

<!-- end snippet -->

You should not use JavaScript to directly change the styles of elements for the purpose of switching themes.

However, a better solution for switching themes is to use CSS variables instead of directly changing the styles of elements with JavaScript.

This approach has several benefits, including better performance, easier maintenance, and more flexibility.
Here's an example of how you could use CSS variables to switch between light and dark themes:

1. Use CSS variables for color changes:

.theme-light {
  --bg-primary: #29fd53;
}

.theme-dark {
  --bg-primary: #222327;
}

body {
  background: var(--bg-primary);
}

2. Switching between themes:

function switchTheme() {
    let themes = ['theme-light', 'theme-dark'];
    let currentTheme = [...document.body.classList].find(c => themes.includes(c)) ?? themes[0]
    let nextTheme = themes[themes.indexOf(currentTheme)+1] ?? themes[0]
    document.body.classList.remove(...themes) // removes all theme classes, including the current one
    document.body.classList.add(nextTheme)
}

3. HTML snippet:

<div class="box">
  <button onclick="switchTheme()" class="menuButton">≣</button>
</div>

4. Don't forget to add the initial class for the body with one of the themes:

<body class="theme-light">

<body class="theme-dark">