wordpress js 运行短代码_只用一个js文件，为你的网站加个黑暗模式

在几秒钟内为您的网站添加黑暗模式/夜间模式

Darkmode.Js 是一款开源项目，只需要添加一段代码，就可以为网站添加夜晚模式/黑暗模式/夜间模式/护眼模式，让你的网站跟上 UI 界的潮流。

这个库使用css混合混合模式，以便为您的任何网站带来黑暗模式。只需复制粘贴片段，你就会得到一个小部件来打开和关闭暗模式。您也可以在没有小部件的情况下以编程方式使用它。这个插件是轻量级的，内置于VanillaJS中。默认情况下，它还使用localstorage，因此您的上一个设置将被记住！

• 小部件自动出现
• 保存用户选择
• 如果OS首选主题为深色(如果浏览器支持首选配色方案)，则自动显示暗模式
• 可以不使用小部件以编程方式使用

Wordpress插件

如果你正在使用Wordpress，你可能需要看看这些插件基于黑暗模式.js:

• https://wordpress.org/plugins/blackout-darkmode-widget/
• https://wordpress.org/plugins/darkmode/

如何使用

Darkmode.js 很容易使用，只需复制粘贴下面的代码或使用npm包。

简单方法(使用jsdeliver CDN)

只需将此代码添加到html页面：

如果要使用npm就用下面的代码：

npm install darkmode-js

以下是可用的选项：

const options = {  bottom: '64px', // default: '32px'  right: 'unset', // default: '32px'  left: '32px', // default: 'unset'  time: '0.5s', // default: '0.3s'  mixColor: '#fff', // default: '#fff'  backgroundColor: '#fff',  // default: '#fff'  buttonColorDark: '#100f2c',  // default: '#100f2c'  buttonColorLight: '#fff', // default: '#fff'  saveInCookies: false, // default: true,  label: '', // default: ''  autoMatchOsTheme: true // default: true}const darkmode = new Darkmode(options);darkmode.showWidget();

如果不想显示小部件并以编程方式启用/禁用Darkmode，可以使用toggle()方法。您还可以检查是否使用isActivated()方法激活了darkmode。请在下面的示例中查看它们的实际操作。

const darkmode =  new Darkmode();darkmode.toggle();console.log(darkmode.isActivated())

替代样式

• 当darkmode被激活时，一个CSS类darkmode--activated被添加到body标记中。您可以利用它替代样式并拥有自定义样式
• 在不想应用暗码的地方使用darkmode-ignore类
• 您还可以添加以下样式：isolation:isolate；在css中，这也会忽略暗码。
• 它也可以恢复黑暗模式与这种风格mix-blend-mode: difference;

.darkmode--activated p, .darkmode--activated li {  color: #000;}.button {  isolation: isolate;}.darkmode--activated .logo {  mix-blend-mode: difference;}

如果不起作用，您可能需要添加以下代码，但这将使要重写的类无效。

.darkmode-layer, .darkmode-toggle {  z-index: 500;}