manifest / themes / blocksy-simple-dark-mode-switch

Simple Theme Mode Switcher

A wordpress plugin with a dark mode switch intended for using in combination with Blocksy.

by Your Name · github.com/skaftedev/blocksy-simple-dark-mode-switch

★ 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/skaftedev/blocksy-simple-dark-mode-switch/archive/refs/heads/main.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/skaftedev/blocksy-simple-dark-mode-switch ↗

Description

A lightweight dark/light mode switcher with a customizable Blocksy-compatible dark palette floating toggle button.
This plugin does not require any premium theme or paid add-on.

Features

WordPress color picker settings page
Customizable dark palette:
- --theme-palette-color-1
- --theme-palette-color-2
- --theme-palette-color-3
- --theme-palette-color-4
- --theme-palette-color-5
- --theme-palette-color-6
- --theme-palette-color-7
- --theme-palette-color-8
Only affects dark mode (light mode uses your theme’s defaults)
Remembers user choice with localStorage
Works with any theme (optimized for Blocksy)
No dependencies, no bloat, no paid upgrades

Installation

Install the plugin via the Wordpress menu Plugins -> Add Plugin.

Changing colors

Use the menu: Settings -> Theme Mode Switcher and set each individual color to your liking.

Adding switch to Blocksy’s header

Go to Appearance → Customizer → Header Builder. Add an HTML element where you want the switch (e.g. right side of header). In the HTML content box, just put:

[stms_toggle]

Styling the header toggle separately

In simple-theme-toggle.css (or in Customizer → Additional CSS) you can tweak the header version:

/* Header version – inherits base .stms-toggle styles, override what you want */
.stms-toggle-header {
    position: static;      /* no fixed position in header */
    width: 2.4rem;
    height: 2.4rem;
    box-shadow: none;
    margin-left: 0.75rem;
    font-size: 1.4rem;
}

/* Example: remove floating behaviour when used in header only */
header .stms-toggle {
    position: static;
}