Question

尝试使用“ 按钮切换主题”的各种答案，我有代码，但无法正常工作

在引导程序4中，已选择引导表主题为“扁平”和“黑暗”，因为我想向用户提供我的网页选项，以选择他/她喜欢的主题
我已将完整的“ flatly.min.css”和“ darkly.min.css”放入我的静态文件文件夹（django项目），并将其重命名为“ light.css”和“ dark.css”
我从堆栈交换中尝试了各种答案，目前使用的是这个： create switch for changing theme intead of browser page style html

我的base.html：

<?php include('process_form.php'); ?>
<form method="POST" action="<?php $_SERVER['PHP_SELF']; ?>">
    <div class="form-row">
        <div class="col form-group">
            <label>Primeiro nome</label>
            <input type="text" class="form-control" title = "Inserir nome"  name="firstname" value="<?php echo $firstname ?>">
            <span class="error"><?php echo $firstnameErr ?></span>

我的css.html：

    <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no">
    ...

      {% include 'base/css.html' %}

      {% block base_head %}
      {% endblock %}
    </head>

    <body>
    ...
      {% include 'base/js.html' %}

      {% block javascript %}
      {% endblock %}
    </body>

当我仅使用'css / dark.css'（未声明'css / light.css'链接）时，我的页面呈暗色；如果我更改为“ css / light.css”（未声明“ css / dark.css”），则页面将呈现浅色主题。

我的js.html：

    <!-- custom styling -->
    <link rel="stylesheet"
          href="{% static 'css/base.css' %}">
    <!-- light styling  -->
    <link rel="stylesheet alternate"
          id="theme"
          href="{% static 'css/light.css' %}">
    <!-- dark styling  -->
    <link rel="stylesheet alternate"
          id="theme"
          href="{% static 'css/dark.css' %}">

toggle_theme.js说：

   ...

    <script src="{% static 'js/ecommerce.sales.js' %}"></script>
    <!-- toggle theme js -->
    <script src="{% static 'js/toggle_theme.js' %}"></script>

我要在导航栏中使用的按钮：

    console.log('now what') // works at django runserver first run
    document.getElementById('toggle-theme').onClick = function() {
      console.log('js works'); // not working, js is not run on click
      if (document.getElementById('theme').href == "{% static 'css/dark.css' %}") {
        document.getElementById('theme').href = "{% static 'css/light.css' %}";
      } else {
        document.getElementById('theme').href = "{% static 'css/dark.css' %}";
      }
    }

我做了通常的django东西，“ python manage.py collectstatic”和Ctrl-F5来刷新开发浏览器。我在这里想念什么？

谢谢您的帮助

编辑：尽管以上指向“ 在两个样式表之间切换”的链接确实解决了我的问题，但它并不完整，因为在刷新时，主题已设置为默认主题。我的完整解决方案是（黑暗是我的默认主题）：

          <!-- todo: toggle theme -->
          <div class="nav-item mx-auto my-auto">
            <!-- href="#" -->
            <!-- <a class="nav-link dark-theme" -->
            <a class="nav-link"
               id="toggle-theme"
               title="toggle theme">
              <!-- id="toggle-theme" -->
              <i class="fas fa-lg fa-square"
                 aria-hidden="true">
                <!-- <script src="{% static 'js/toggle_theme.js' %}"></script> -->
              </i> </a>
          </div>

如果设置了浅色主题，我确实会在刷新（F5）时遇到一些页面闪烁，但是现在我必须忍受这个问题。黑暗主题的作品不会闪烁。

最诚挚的问候，

西蒙爱妮娅

Answer 1

您是否尝试过将document.getElementById('toggle-theme').onClick = function() {更改为document.getElementById('toggle-theme').onclick = function() {？

不能保证这是唯一的问题，但是onclick应该全部小写，并且如果未识别出初始点击，则可能是您的问题。

Answer 2

好吧，当我刷新页面并查看页面源代码时，我得到：

<!-- light styling  -->
<link rel="stylesheet"
      id="theme"
      href="/static/css/light.css">
<!-- dark styling  -->
<link rel="stylesheet"
      id="theme"
      href="/static/css/dark.css">

如果检查元素，则会得到相同的代码。然后单击切换按钮，然后查看页面源代码，代码保持不变，但是当我检查元素时，我得到：

<!-- light styling  -->
<link rel="stylesheet"
      id="theme"
      href="/static/css/dark.css">
<!-- dark styling  -->
<link rel="stylesheet"
      id="theme"
      href="/static/css/dark.css">

href均为“ /static/css/dark.css”。因此，该代码可以正常工作，但不符合预期。这告诉我这不是要使用的代码。将继续我的搜索。

使用按钮更改/切换网页主题

2 个答案: