如何正确切换动态页面上的主题？

Question

我使用以下jQuery代码在网站的两个主题（白天/夜晚）之间进行切换。

$('#switch').on('click', function () { $('*').toggleClass('switch-bg'); });

当我单击标识为“ switch”的按钮时，一切都会按预期进行，该按钮将为可用的CSS属性（在本例中为body属性）添加/删除类“ switch-bg”。

示例：

body {background: #fff;}   /* DAY mode (default) */
body.switch-bg {background: #000;}   /* NIGHT mode */

当我处于“夜间模式”并且某些内容以默认状态“白天模式”加载到页面时，我的问题就开始了，这导致了两者之间的混合。

更多详细信息：

• 所有动态内容（外部HTML）都通过导航菜单中的超链接加载到我主页的div（内部）中。这是使用jQuery实现的。
• 仅当动态内容已加载时，该开关才对动态内容起作用。如果重新加载相同或不同的内容，则在加载的内容处于默认状态“白天模式”而主页仍处于“夜间模式”时，将出现问题。

在选择该选项后，我希望所有内容都保持“夜间模式”。

Answer 1

使用localStorage保存用户的首选项。每次加载新内容并根据保存的选项设置类时，请阅读位置存储条目。

Answer 2

不要将类应用于所有内容（*）。只需将其应用于主体，并根据上下文进行样式设置即可。

例如

.some-element {background: #fff;}   /* DAY mode (default) */
.switch-bg .some-element {background: #000;}   /* NIGHT mode */

Answer 3

解决您的问题的好方法可以是：

• 只需更改html中的类即可代替更改所有元素的类。在这种情况下，每晚。

  $('#switch').on('click', function () { $('html').toggleClass('nightly'); });

• 与其基于父类的元素来为其主题设置主题，还不如根据父元素的类为其设置主题。在这种情况下，html。

  .button {
      background-color: #fff; // day mode
  }
  
  .nightly .button {
      background-color: #000; // night mode
  }