My Dark Mode

by Matysiewicz Studio · github.com/lukasz-matysiewicz/my-dark-mode · website

★ 0stars

0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/lukasz-matysiewicz/my-dark-mode/archive/refs/heads/main.zip

Readme github.com/lukasz-matysiewicz/my-dark-mode ↗

A super lightweight WordPress plugin to enable dark mode on your site.

Free and open source — licensed under GPLv2 or later.

Description

"My Dark Mode" lets you add a dark mode switcher anywhere on your page, with full control over the button's appearance and position. It's extremely lightweight, so your site's performance remains unaffected.

Features:

Two built-in switchers with adjustable size, or your own custom button code
Widget and shortcode: [my_dark_mode_toggle_button]
Color mapping table — define dark-mode colors for any element and CSS attribute
Custom CSS with automatic html[my-dark-mode='dark'] prefixing
Separate logo for light and dark mode
Remembers the visitor's choice (localStorage), no cookies, no FOUC

Requirements

WordPress 6.0 or higher
PHP 7.4 or higher

Installation

Download the latest .zip from the releases page, or clone this repository into wp-content/plugins/.
Upload the plugin via Plugins → Add New → Upload Plugin in WordPress (skip if you cloned).
Click Activate Plugin.

Usage

Open My Dark Mode in the WordPress admin menu.
Pick one of the built-in switchers (and adjust its size), or choose No Switcher and paste your own button code — just include the data-dark-mode-toggle attribute.
Place the switcher anywhere using the Dark Mode Toggle Button widget or the [my_dark_mode_toggle_button] shortcode.
Define dark-mode colors in the color table, add custom CSS (auto-prefixed with html[my-dark-mode='dark']), and optionally upload separate light/dark logos.

Structure

my-dark-mode/
├── assets/
│   ├── css/                        # Frontend, switcher, and admin styles
│   ├── img/                        # Menu icon
│   └── js/
│       ├── my-dark-mode-switcher.js      # Early head script (applies saved mode, no FOUC)
│       ├── my-dark-mode-save.js          # Toggle handling + localStorage
│       ├── my-dark-mode-logo-replace.js  # Swaps logo per mode
│       ├── my-dark-mode-admin.js         # Settings page (code editors, color pickers)
│       ├── my-dark-mode-logo.js          # Logo upload (media library)
│       └── my-dark-mode-reset-button.js  # Reset button code to default
├── my-dark-mode.php                # Main plugin file
├── my-dark-mode-fields.php         # Settings fields
├── my-dark-mode-colors.php         # Color table + generated CSS
├── my-dark-mode-widget.php         # Toggle button widget
└── uninstall.php                   # Cleanup on uninstall

Licensing

This plugin is free and open source, licensed under the GPLv2 or later. Use it on as many sites as you like. See the LICENSE file for full terms.

Support

For support inquiries:

Email: lukasz@matysiewicz.studio
Website: https://matysiewicz.studio

Version History

1.1.0: Removed the license system — free and open source (GPLv2 or later), all features unlocked. Fixed logo upload buttons (media library scripts were never loaded) and color pickers (wp-color-picker was never enqueued). Added sanitization for all saved settings. Removed dead code.
1.0.3: Custom CSS validation
1.0.2: Change function names
1.0.1: Major security fixes
1.0.0: Stable version, compatibility with WordPress 6.3.1