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

Question

单击主题更改器按钮时，它会更改我网站的颜色我该怎么做，当用户再次单击该按钮时，它会变回原始颜色。

JS代码:

$(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 代码:

: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代码:

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

Answer 1

您可以使用 if 语句，并检查 --color1 值是什么，例如:

    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");
          }
        }
      );
    });