Title: Dark Mode Block
Author: Erik
Published: 2024 年 1 月 19 日
Last modified: 2024 年 3 月 6 日
---
搜索插件
**该插件尚未通过WordPress的最新3个主要版本进行测试**。 当与较新版本的WordPress一起
使用时，可能不再受到维护或支持，并且可能会存在兼容性问题。
# Dark Mode Block
作者：[Erik](https://profiles.wordpress.org/codekraft/)
[下载](https://downloads.wordpress.org/plugin/dark-mode-block.0.1.1.zip)
* [详情](https://cn.wordpress.org/plugins/dark-mode-block/#description)
* [评价](https://cn.wordpress.org/plugins/dark-mode-block/#reviews)
* [安装](https://cn.wordpress.org/plugins/dark-mode-block/#installation)
* [开发进展](https://cn.wordpress.org/plugins/dark-mode-block/#developers)
[支持](https://wordpress.org/support/plugin/dark-mode-block/)
## 描述
Dark Mode Block is a simple yet powerful WordPress block plugin that allows you
to enable dark mode for your website, enhancing readability and reducing eye strain
without altering your website’s colors. Give your users the flexibility to switch
between light and dark modes seamlessly.
Designed to be lightweight and efficient
the whole frontend script weights less than half of a kb gzipped 😉
Features:
– Toggle dark mode with a user-friendly icon. – Preserve your website’s
color scheme while improving readability in low-light environments. – Enhanced user
experience with reduced eye strain. – Customizable
Make your website more accessible and user-friendly by offering a dark mode option.
With Dark Mode Block, your users can enjoy your content without compromising on
aesthetics.
### Usage
1. After activating the plugin, add the “Dark Mode” block to your WordPress page or
post editor.
2. Publish or update your content.
### Customization
Unleash your creativity! This block is designed to be fully customizable graphically,
and since it’s entirely CSS-based, it’s straightforward for anyone to modify and
adapt it according to their own taste or template.
You even have control over how the dark mode is applied! Currently, I’ve applied
an invert filter on the background as I don’t know the variables in your template.
However, you have the flexibility to make it even better by setting the text color
as the background and vice versa.
Here’s how to do it:
1. Add the following code to your functions.php file.
2. Edit the $custom_css in order to fit your preferences
First dequeue the current style in this way:
```
add_action( 'wp_enqueue_scripts', function () {
/** dequeue the default dark mode */
wp_dequeue_style( 'codekraft-dark-mode-style' );
}, 9 );
```
Then add yours!
```
add_action( 'wp_head', function () {
/** @var {string} $custom_css - your custom css for the dark mode */
$custom_css = "html.dark-mode body {
--wp--preset--color--background: #232323;
--wp--preset--color--foreground: #f3f3f3;
}
.dark-mode-switch::before {
width: 1.6rem;
cursor: pointer;
display: flex;
font-size: 1.6rem;
line-height: 1.6rem;
content: '🌞'
}
.dark-mode .dark-mode-switch::before {
content: '🌚'
}";
echo "";
}, 20 );
```
Please support the plugin posting your custom style and a screenshot in the WordPress
support forum section!
## 区块
该插件提供了 1 个区块.
* Dark Mode Switch Enables the dark mode for your website
## 安装
1. Upload the ‘dark-mode-block’ folder to the ‘/wp-content/plugins/’ directory.
2. Activate the plugin through the ‘Plugins’ menu in WordPress.
## 常见问题
### Q: Does this plugin work with all WordPress themes?
A: Dark Mode Block is designed to be compatible with most of FSE WordPress themes.
However, some themes may require additional styling adjustments for optimal dark
mode functionality.
## 评价
### [Finally a good solution!](https://wordpress.org/support/topic/finally-a-good-solution/)
[newslicer](https://profiles.wordpress.org/newslicer/) 2024 年 4 月 25 日
This is a great plugin – something i really looked after for a long time. Unlike
most of the other plugins this is simple, small and very easy to integrate into
FSE themes as you only have to add a block. Also it’s possible to make customisations
to the dark mode to fit the need of the own site. This plugin needs more attention
while it meets a very important feature with easy. Great work!
### [Elegantly simple and versatile](https://wordpress.org/support/topic/elegantly-simple-and-versatile/)
[mrbehemo](https://profiles.wordpress.org/mrbehemo/) 2024 年 3 月 28 日
Elegantly simple and versatile dark mode plugin, and the dev is incredibly helpful
too.
### [100% pure Gold!](https://wordpress.org/support/topic/100-pure-gold/)
[soundflix](https://profiles.wordpress.org/soundflix/) 2024 年 3 月 6 日 1 回复
This little plugin is really great. Installing was easy. The customization is done
completely in CSS code, which may seem a bit intimidating at first. But heading
over to the plugin support forum, the developers at codekraft were super-helpful
and all my issues were answered and fixed shortly. And I learned a few things I
can and did use in other places of my WordPress-Site. I am very happy that this
is not one of those bloated, brainwashed premium-nagwares, as unfortunately many
WP-plugins are.
### [Superb!](https://wordpress.org/support/topic/superb-1012/)
[snoop23](https://profiles.wordpress.org/snoop23/) 2024 年 2 月 29 日
So cool. Been waiting for something like this. Thanks for making it. You just made
my day.
[ 阅读所有4条评价 ](https://wordpress.org/support/plugin/dark-mode-block/reviews/)
## 贡献者及开发者
「Dark Mode Block」是开源软件。 以下人员对此插件做出了贡献。
贡献者
* [ Erik ](https://profiles.wordpress.org/codekraft/)
[帮助将「Dark Mode Block」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/dark-mode-block)
### 对开发感兴趣吗?
您可以[浏览代码](https://plugins.trac.wordpress.org/browser/dark-mode-block/)，查看
[SVN仓库](https://plugins.svn.wordpress.org/dark-mode-block/)，或通过[RSS](https://plugins.trac.wordpress.org/log/dark-mode-block/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/dark-mode-block/)。
## 更新日志
#### 0.1.0
* Initial release
## 额外信息
* 版本 **0.1.1**
* 最后更新：**2 年前**
* 活跃安装数量 **不到10**
* WordPress 版本 ** 5.7 或更高版本 **
* 已测试的最高版本为 **6.4.8**
* PHP 版本 ** 5.6 或更高版本 **
* 语言
* [English (US)](https://wordpress.org/plugins/dark-mode-block/)
* 标签
* [block](https://cn.wordpress.org/plugins/tags/block/)[css](https://cn.wordpress.org/plugins/tags/css/)
[dark mode](https://cn.wordpress.org/plugins/tags/dark-mode/)[theme](https://cn.wordpress.org/plugins/tags/theme/)
* [高级视图](https://cn.wordpress.org/plugins/dark-mode-block/advanced/)
## 评级
5 星（最高 5 星）。
* [ 4 条 5 星评价 ](https://wordpress.org/support/plugin/dark-mode-block/reviews/?filter=5)
* [ 0 条 4 星评价 ](https://wordpress.org/support/plugin/dark-mode-block/reviews/?filter=4)
* [ 0 条 3 星评价 ](https://wordpress.org/support/plugin/dark-mode-block/reviews/?filter=3)
* [ 0 条 2 星评价 ](https://wordpress.org/support/plugin/dark-mode-block/reviews/?filter=2)
* [ 0 条 1 星评价 ](https://wordpress.org/support/plugin/dark-mode-block/reviews/?filter=1)
[Your review](https://wordpress.org/support/plugin/dark-mode-block/reviews/#new-post)
[查看全部评论](https://wordpress.org/support/plugin/dark-mode-block/reviews/)
## 贡献者
* [ Erik ](https://profiles.wordpress.org/codekraft/)
## 支持
有话要说吗？是否需要帮助？
[查看支持论坛](https://wordpress.org/support/plugin/dark-mode-block/)