WP Manifestindependent plugin directory
manifest / themes / theme_light_dark

Theme Light Dark

by Joan Fernandez · github.com/papamundodev/theme_light_dark · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/papamundodev/theme_light_dark/archive/refs/heads/main.zip
Updates itself. It ships its own updater (Update URI header), so new versions appear under Dashboard → Updates.
Readme github.com/papamundodev/theme_light_dark ↗

Theme Light Dark WordPress Plugin

A simple and elegant WordPress plugin that adds a light/dark theme toggle functionality to your website. The plugin automatically detects the user's system preferences and allows manual toggling between themes.

Features

  • Automatic system theme detection
  • Manual theme toggle button
  • Theme preference persistence using localStorage
  • Smooth icon animation

Installation

  1. Download or clone this plugin into your WordPress plugins directory (wp-content/plugins/)
  2. Activate the plugin through the WordPress admin panel
  3. Add the shortcode [theme_light_dark] where you want the toggle button to appear

Usage

Adding the Toggle Button

The most common placement is in the header. Add this code to your theme's header.php:

<?php if (function_exists('theme_light_dark_form')): ?>
    <div class="wrapper-theme-light-dark">
        <?=do_shortcode('[theme_light_dark]'); ?>
    </div>
<?php endif; ?>

Theme Integration

To make the theme switching work properly, ensure your theme's CSS uses these variables:

:root {
  --background-color: #ffffff; /* Light theme background */
  --default-color: #000000; /* Light theme text color */
}

body.dark-theme {
  --background-color: #1a1a1a; /* Dark theme background */
  --default-color: #ffffff; /* Dark theme text color */
}

How It Works

  1. The plugin first checks the user's system preferences using prefers-color-scheme
  2. If no preference is saved, it applies the system preference
  3. When the toggle button is clicked, it switches between light and dark themes
  4. The user's preference is saved in localStorage for future visits
  5. The theme toggle is accompanied by a smooth rotation animation

Requirements

  • WordPress 5.2 or higher
  • PHP 7.2 or higher

Author

Joan Fernandez - joan909fernandez.com

License

This plugin is licensed under the GPL v2 or later.