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 "<style id='dark-mode-custom'>$custom_css</style>";
}, 20 );

Please support the plugin posting your custom style and a screenshot in the WordPress support forum section!

適用於區塊編輯器

這個外掛提供 1 個可供 Gutenberg/區塊編輯器使用的區塊。

  • 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.

使用者評論

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!
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.
2024 年 2 月 29 日
So cool. Been waiting for something like this. Thanks for making it. You just made my day.
閱讀全部 4 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈Dark Mode Block〉的開發相關工作。

參與者

將〈Dark Mode Block〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

0.1.0

  • Initial release