Title: Dark Mode Block
Author: Erik
Published: 2024년 1월 19일
Last modified: 2024년 3월 6일
---
플러그인 검색
이 플러그인은 **최근 3개의 주요 워드프레스 출시와 시험 되지 않았습니다**. 워드프레스의
좀 더 최근 버전으로 이용할 때 더 이상 관리되지 않고 지원되지 않고 호환성 문제가
있을 수 있습니다.
# Dark Mode Block
작성자: [Erik](https://profiles.wordpress.org/codekraft/)
[다운로드](https://downloads.wordpress.org/plugin/dark-mode-block.0.1.1.zip)
* [세부사항](https://ko.wordpress.org/plugins/dark-mode-block/#description)
* [평가](https://ko.wordpress.org/plugins/dark-mode-block/#reviews)
* [설치](https://ko.wordpress.org/plugins/dark-mode-block/#installation)
* [개발](https://ko.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.
## FAQ
### 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/)를 확인하시거나,
[개발 기록](https://plugins.trac.wordpress.org/log/dark-mode-block/)을 [RSS](https://plugins.trac.wordpress.org/log/dark-mode-block/?limit=100&mode=stop_on_copy&format=rss)
로 구독하세요.
## 변경이력
#### 0.1.0
* Initial release
## 기초
* 버전 **0.1.1**
* 최근 업데이트: **3년 전**
* 활성화된 설치 **10보다 적음**
* 워드프레스 버전 ** 5.7 또는 그 이상 **
* 다음까지 시험됨: **6.4.12**
* PHP 버전 ** 5.6 또는 그 이상 **
* 언어
* [English (US)](https://wordpress.org/plugins/dark-mode-block/)
* 태그:
* [block](https://ko.wordpress.org/plugins/tags/block/)[css](https://ko.wordpress.org/plugins/tags/css/)
[dark mode](https://ko.wordpress.org/plugins/tags/dark-mode/)[theme](https://ko.wordpress.org/plugins/tags/theme/)
* [고급 보기](https://ko.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/)