网站暗黑模式切换脚本Chrome正常但Safari报错求助

问题原因 #

你的脚本在Safari中抛出SyntaxError: Unexpected token ';'，根源是Django模板渲染后，var darkMode = {{ ... }};这一行生成了空值，变成var darkMode = ;，违反JS语法规范。Safari对JS语法校验更严格，直接报错；Chrome有一定容错机制，所以能正常运行。

这种空值情况通常是request.session.is_dark_mode为非None的假值（比如空字符串）时，default_if_none过滤器不会生效，导致模板输出空内容，再经过lower处理后依然为空。

解决方案 #

使用Django的yesno过滤器替代原来的default_if_none+lower组合，确保无论会话变量是什么状态，都能生成合法的JS布尔字面量：

修改setInitialDarkMode函数中的变量赋值行：

var darkMode = {{ request.session.is_dark_mode|yesno:"true,false,false" }};

过滤器说明

yesno:"true,false,false"的作用：

• 当is_dark_mode为True时，输出JS布尔值true
• 当is_dark_mode为False时，输出JS布尔值false
• 当is_dark_mode为None（会话中无此变量）时，输出false

这样可以彻底避免空值导致的语法错误，同时直接生成JS原生布尔值，避免字符串转布尔的潜在兼容性问题。

修改后的完整脚本 #

<script>
      document.addEventListener("DOMContentLoaded", function () {
        var modeToggle = document.getElementById("modeToggle");

        function setInitialDarkMode() {
          var darkMode = {{ request.session.is_dark_mode|yesno:"true,false,false" }};
          modeToggle.checked = darkMode;

          if (darkMode) {
            document.body.classList.add("dark-mode");
          }
        }

        modeToggle.addEventListener("change", function () {
          var darkMode = modeToggle.checked;

          fetch("{% url 'toggle-mode' %}", {
            method: 'POST',
            headers: {
              'X-CSRFToken': '{{ csrf_token }}',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ dark_mode: darkMode }),
          })
            .then(response => response.json())
            .then(data => {
              if (darkMode) {
                document.body.classList.add("dark-mode");
              } else {
                document.body.classList.remove("dark-mode");
              }
              console.log(data);
            })
            .catch(error => console.error(error));
        });

        setInitialDarkMode();

      });
</script>

内容的提问来源于stack exchange，提问作者Alex