LL Dynamic Theme Style

A dynamic theme style switcher for WordPress. This plugin allows users to select a theme variant (e.g., light or dark) or have it automatically match their system's color preference. The user's choice is persisted across sessions.

Features

• Automatic Mode: By default, the theme follows the system's color scheme (prefers-color-scheme) and updates live if the system setting changes.
• Manual Mode: Users can manually select a specific style (e.g., light or dark). This choice overrides the system preference and is remembered.
• Cookie-Based Persistence: The selected mode (auto or manual) and style variant are stored in cookies, preserving the user's preference across page loads.
• URL Control: Simple URL parameters allow for programmatic control of the theme style, making it easy to create theme-switcher buttons.
• JSON-Based Variants: Theme styles (color palettes) are defined in simple .json files, making them easy to create and manage.
• Lightweight & Performant: A single, small JavaScript file handles the client-side logic, and a PHP backend injects only the necessary CSS variables.

Requirements

• Theme variant files: styles/light.json and styles/dark.json

Configuration

Theme Variants

Create variant files in your theme:

your-theme/styles/
├── light.json      # Light theme
└── dark.json   # Dark theme

Example structure:

{
  "settings": {
    "color": {
      "palette": [
        { "slug": "primary", "color": "#0066cc" },
        { "slug": "secondary", "color": "#666666" }
      ]
    }
  },
  "styles": { "color": { "text": "#1a1a1a" } }
}

URL Parameter

You can control the theme style using the style URL parameter:

• ?style=your-variant: Sets a specific style variant (e.g., light, dark). This activates "manual" mode, and the choice is saved in a cookie.
• ?style=toggle: Switches between the light (light) and dark (dark) styles. This also activates "manual" mode.
• ?style=auto: Switches back to "auto" mode. The theme will then automatically follow the system's light/dark preference.

Customize Variants

Edit set-style-preference.js to change the default variant names if needed.

Architecture

• src/Plugin.php – Main class with hooks
• src/Config.php – Constants (PATH, URL, VERSION)
• src/Functions.php – Namespaced helper functions
• set-style-preference.js – Frontend detection

All code uses LasLie\DynamicThemeStyle namespace.

License

GPLv3 | https://www.gnu.org/licenses/gpl-3.0.html

---

Author

Lasse Liebler | dev.laslie.de

Credits

• AI-assisted development
• Repository icon by Freepik on flaticon.com