LL Dynamic Theme Style

Dynamic selection of theme style variants. Supports URL-based selection and automatic switching based on system/browser preference. Cookie-based selections persist and are only changed via the URL parameter (except default <-> 01-evening preference switch).

Features

🌓 Auto-detects system color scheme via prefers-color-scheme
🎨 Injects theme colors as CSS variables from styles/*.json

Requirements

Theme variant files: styles/default.json and styles/01-evening.json

Configuration

Theme Variants

Create variant files in your theme:

your-theme/styles/
├── default.json      # Light theme
└── 01-evening.json   # Dark theme

Example structure:

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

URL Parameter

Change the active variant by adding ?style=your-variant to the URL. This will store the selection in a cookie and is the only way to change the stored variant programmatically. Example: ?style=01-evening or ?style=default.

Customize Variants

Edit auto-style-switch.js to change the default variant names if needed.

Architecture

Plugin.php – Main class with hooks
Config.php – Constants (PATH, URL, VERSION)
Functions.php – Namespaced helper functions
auto-style-switch.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

1.8 KiB Raw Permalink Blame History Unescape Escape