內容簡介
Dark Mode Block是一個簡單而強大的WordPress區塊外掛，可以讓您的網站啟用暗模式，增強可讀性，減少眼睛的壓力，而不會改變網站的顏色。給予使用者在明暗模式之間無縫切換的靈活性。
設計得輕量並且效率高，整個前端腳本gzipped後重量不到一半。
功能：
- 使用使用者友善的圖示切換暗模式。
- 在低光環境中提升可讀性的同時保留網站的顏色方案。
- 降低眼壓的增強使用者體驗。
- 可定制的。
透過提供暗模式選項，使您的網站更具可訪問性和使用友好性。使用Dark Mode Block，您的使用者可以享受您的內容，而不會影響美觀度。
使用方式：
- 啟用插件後，將“Dark Mode”區塊添加到您的WordPress頁面或文章編輯器。
- 發布或更新您的內容。
自定義：
發揮您的創造力！此區塊可以根據個人喜好或模板進行全面定制，並且由於完全基於CSS，因此對於任何人來說都很容易修改和適應。
您甚至可以控制如何應用暗模式！目前，我已將反轉濾鏡應用於背景，因為我不知道您的模板中的變量。
然而，您可以彈性地設定文本顏色為背景，反之亦然，使它更好。
以下是如何操作：
將以下代碼添加到您的functions.php文件中。
根據您的偏好編輯$custom_css。
首先按照以下方式取消佇列的當前樣式：
add_action( 'wp_enqueue_scripts', function () {
/** 取消佇列預設的暗模式 */
wp_dequeue_style( 'codekraft-dark-mode-style' );
}, 9 );
然後添加您自己的樣式！
add_action( 'wp_head', function () {
/** @var {string} $custom_css - 用於暗模式的自定義CSS */
$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 "<style id='dark-mode-custom'>$custom_css</style>";
}, 20 );
請在WordPress支援論壇中發布您的自定義樣式和螢幕截圖以支持這個外掛！
外掛標籤
開發者團隊
原文外掛簡介
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
After activating the plugin, add the “Dark Mode” block to your WordPress page or post editor.
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:
Add the following code to your functions.php file.
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!
