在Wordpress中切换正常的“浅色”配色方案和暗夜模式主题?

时间:2017-02-17 21:53:47

标签: html css wordpress stylesheet

我被要求在我正在维护的页面中实施日/夜模式。 我们的想法是,默认主题是浅色主题,背景为浅色,字体较暗,按下按钮切换到夜间模式并返回。

在手工制作的网站中,只需切换2个.css文件或在需要时用另一个文件覆盖颜色,这看起来更容易,至少我认为我会这样做。

但是在wordpress中,我不知道实现这一目标的最佳方法是什么。 我找了一个插件来执行此操作并以某种方式反转我的样式颜色以创建一个黑暗模式,但找不到这样的东西。 正如我所知,我将不得不亲自手动完成这项工作,这将是更好的逻辑方式吗?

只询问程序以及我应该修改或触摸的文件。 我应该创建另一个style.css并进行更改吗?它只会影响在他/她的浏览器上执行更改而不是全局的用户吗?

1 个答案:

答案 0 :(得分:2)

在使用“夜间模式”(script.js)时,将night-mode类附加到您的body元素。

$('#night-toggle').click(function(e) {
    e.preventDefault();
    $('body').addClass('night-mode');
});

然后添加一些CSS(style.css):

body.night-mode #somediv {
    //night mode styles go here
}

body.night-mode #someotherdiv {
    //night mode styles go here
}

body.night-mode #someotherdiv a {
    //night mode styles go here
}
// etc etc etc for each style you need to change

现在,这是一个非常糟糕的实现(并不是非常具有描述性),因为您还没有提供任何与您合作的代码的示例,因此我必须假设您对更改代码的访问权限非常有限站点/主题。