我有一个可切换网站主题的按钮，如果再次单击以更改回默认主题，该如何做相同的按钮？

Question

When the theme changer button is clicked it changes the colors of my website how do i make it so when the user clicks the button again it changes back to the original colors.

JS code:

$(document).ready(function () {
    $('#ChangeTheme').click(function () {
        document.body.style.setProperty("--color1", "orange")
        document.body.style.setProperty("--color2", "red")
        document.body.style.setProperty("--color3", "white")
        return false;
    });
});

CSS code:

:root {
    --color1: #3366cc;
    --color2: #2d2d2d;
    --color3: white;
}

#header {
    background-color: #3366cc;
    height: 110px;
    position: fixed;
    top: 0;
    width: 100%;
    display: table;
    border-bottom: 5px solid #0099ff;
    border-top: 5px solid #2d2d2d;
    background: linear-gradient(var(--color2), var(--color1));
}

#footer {
    background-color: darkblue;
    height: 150px;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: 5px solid #0099ff;
    background: linear-gradient(var(--color1), var(--color2));
}

HTML code:

      <asp:Button ID="ChangeTheme" runat="server" Text="Change Theme" Width="110px" CausesValidation="false" BackColor="#99CCFF" BorderColor="#000066" BorderStyle="Solid" />

Answer 1

You could use an if statement, and check what is the --color1 value, for example:

    jQuery(document).ready(function ($) {
      $('#ChangeTheme').click(
        function(){
          if($("body").css("--color1")!=="orange"){
            document.body.style.setProperty("--color1", "orange");
            document.body.style.setProperty("--color2", "red");
            document.body.style.setProperty("--color3", "white");
          } else {
            document.body.style.setProperty("--color1", "#3366cc");
            document.body.style.setProperty("--color2", "#2d2d2d");
            document.body.style.setProperty("--color3", "white");
          }
        }
      );
    });

Answer 2

You can try

document.body.classList.toggle('nameOfClass') //to toggle

document.body.classList.add('nameOfClass') //to add

document.body.classList.remove('nameOfClass') // to remove

Answer 3

You can do this with just css and js, keep all your classes with the default color, with or without variables, and create a named class that you can apply to the specific elements.

:root {
    --color1: #3366cc;
    --color2: #2d2d2d;
    --color3: white;
}

#header {
    background-color: #3366cc;
    height: 110px;
    position: fixed;
    top: 0;
    width: 100%;
    display: table;
    border-bottom: 5px solid #0099ff;
    border-top: 5px solid #2d2d2d;
    background: linear-gradient(var(--color2), var(--color1));
}

#footer {
    background-color: darkblue;
    height: 150px;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: 5px solid #0099ff;
    background: linear-gradient(var(--color1), var(--color2));
}

#header.theme2 {
    background: linear-gradient(red, orange);
}
#footer.theme2 {
    background: linear-gradient(orange, red);
}

Your js code can look like this then:

function toggleTheme2(){
    ['#header', '#footer'].forEach(x=>document.querySelectorAll(x).forEach(x=>x.classList.toggle('theme2')))
}

and the html button:

<asp:Button ID="ChangeTheme" runat="server" onclick="toggleTheme2" Text="Change Theme" Width="110px" CausesValidation="false" BackColor="#99CCFF" BorderColor="#000066" BorderStyle="Solid" />