Generalized to dynamic-theme-style

README.md

@@ -1,6 +1,6 @@
-# LL Theme Style Darkmode
+# LL Dynamic Theme Style
 
-Automatically switches between light and dark theme stil variantes based on system/browser color scheme preference.
+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
 
@@ -9,7 +9,7 @@ Automatically switches between light and dark theme stil variantes based on syst
 
 ## Requirements
 
-- Theme stil variant files: `styles/default.json` and `styles/01-evening.json`
+- Theme variant files: `styles/default.json` and `styles/01-evening.json`
 
 ## Configuration
 
@@ -38,12 +38,13 @@ Example structure:
 }
 ```
 
+### 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](assets/js/auto-style-switch.js) line 8:
+Edit [auto-style-switch.js](assets/js/auto-style-switch.js) to change the default variant names if needed.
-```javascript
-const desired = prefersDark ? '01-evening' : 'default';
-```
 
 ## Architecture
 
@@ -52,7 +53,7 @@ const desired = prefersDark ? '01-evening' : 'default';
 - **Functions.php** – Namespaced helper functions
 - **auto-style-switch.js** – Frontend detection
 
-All code uses `LasLie\ThemeStyleDarkmode` namespace.
+All code uses `LasLie\DynamicThemeStyle` namespace.
 
 ## License
 

assets/js/auto-style-switch.js

@@ -1,15 +1,59 @@
 /**
- * Detects system/browser color scheme and sets the "style_variant" cookie accordingly.
+ * Detects preferred style variant and sets the "style_variant" cookie accordingly.
  * Reloads the page if the variant changes.
  */
 
 (function () {
-  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  function getCookie(name) {
-  const cookie = document.cookie.split('; ').find(r => r.startsWith('style_variant='));
+    const match = document.cookie.split('; ').find(r => r.startsWith(name + '='));
-  const current = cookie ? cookie.split('=')[1] : '';
+    return match ? decodeURIComponent(match.split('=')[1]) : '';
-  const desired = prefersDark ? '01-evening' : 'default'; // Customize variant names as needed
-  if (current !== desired) {
-    document.cookie = "style_variant=" + desired + "; path=/; max-age=31536000";
-    location.reload();
   }
+
+  function setCookie(name, value, maxAgeSeconds) {
+    document.cookie = name + '=' + encodeURIComponent(value) + '; path=/; max-age=' + maxAgeSeconds;
+  }
+
+  function getUrlParam(name) {
+    try {
+      return new URLSearchParams(window.location.search).get(name) || '';
+    } catch (e) {
+      return '';
+    }
+  }
+
+  const urlStyle = getUrlParam('style');
+  const current = getCookie('style_variant');
+  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  const desired = prefersDark ? '01-evening' : 'default';
+  const MAX_AGE = 31536000; // 1 year
+
+  // If URL parameter is present
+  if (urlStyle) {
+    if (current !== urlStyle) {
+      setCookie('style_variant', urlStyle, MAX_AGE);
+      location.reload();
+    }
+    return;
+  }
+
+  // No cookie yet -> set according to preference
+  if (!current) {
+    setCookie('style_variant', desired, MAX_AGE);
+    location.reload();
+    return;
+  }
+
+  // If cookie already equals desired, nothing to do
+  if (current === desired) {
+    return;
+  }
+
+  // Allow automatic switching between default and 01-evening based on preference
+  if ((current === 'default' || current === '01-evening') && desired !== current) {
+    setCookie('style_variant', desired, MAX_AGE);
+    location.reload();
+    return;
+  }
+
+  // Cookie contains another custom variant -> do not override automatically
 })();

dynamic-theme-style.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Plugin Name:         LL Dynamic Theme Style
+ * Plugin URI:          https://git.laslie.de/wp/plugin-dynamic-theme-style
+ * Description:         Dynamic selection of theme style variants. Supports URL-based selection and automatic switching based on browser preference.
+ * Version: 			1.0.0
+ 
+ * Requires at least: 	
+ * Requires PHP:		
+ 
+ * Author:              Lasse Liebler
+ * Author URI:          https://dev.laslie.de
+ 
+ * License:             GPLv3
+ * License URI:         https://www.gnu.org/licenses/gpl-3.0.html
+ *
+ * Text Domain:         dynamic-theme-style
+ * Domain Path:         /languages
+  
+ * Network:
+ 
+ * Update URI:          https://git.laslie.de/wp/plugin-dynamic-theme-style
+ 
+ * Requires Plugins:
+ */
+
+namespace LasLie\DynamicThemeStyle;
+
+// Abort if accessed directly.
+if ( ! defined( 'ABSPATH' ) ) exit;
+
+// Define constants for Config class.
+if ( ! defined( 'LasLie\DynamicThemeStyle\DIRNAME' ) ) {
+	define( 'LasLie\DynamicThemeStyle\DIRNAME', plugin_dir_path( __FILE__ ) );
+	define( 'LasLie\DynamicThemeStyle\DIRURL', plugin_dir_url( __FILE__ ) );
+}
+
+// Load config and main plugin file.
+require_once plugin_dir_path( __FILE__ ) . 'src/Config.php';
+require_once plugin_dir_path( __FILE__ ) . 'src/Plugin.php';
+
+// Initialize the plugin.
+$plugin = new Plugin();
+$plugin->init();

src/Config.php

@@ -1,9 +1,9 @@
 <?php
 /**
- * Configuration constants for Theme Style Darkmode plugin.
+ * Configuration constants
  */
 
-namespace LasLie\ThemeStyleDarkmode;
+namespace LasLie\DynamicThemeStyle;
 
 class Config {
     public const PATH = DIRNAME;

src/Functions.php

@@ -1,10 +1,6 @@
 <?php
-/**
- * Theme Style Darkmode Functions.
- * Load and enqueue variant-specific CSS based on system color scheme preference.
- */
 
-namespace LasLie\ThemeStyleDarkmode;
+namespace LasLie\DynamicThemeStyle;
 
 /**
  * Load and enqueue variant-specific CSS.
@@ -58,9 +54,9 @@ function enqueue_variant_styles(): void {
     }
 
     // Register an empty style handle and add the generated inline CSS
-    wp_register_style( 'll-tsd-variant-generated', false );
+    wp_register_style( 'll-dts-variant-generated', false );
-    wp_enqueue_style( 'll-tsd-variant-generated' );
+    wp_enqueue_style( 'll-dts-variant-generated' );
-    wp_add_inline_style( 'll-tsd-variant-generated', $css );
+    wp_add_inline_style( 'll-dts-variant-generated', $css );
 }
 
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_variant_styles', 99 );

src/Plugin.php

@@ -1,10 +1,9 @@
 <?php
 /**
- * Main Plugin class for Theme Style Darkmode.
  * Handles initialization and hooks registration.
  */
 
-namespace LasLie\ThemeStyleDarkmode;
+namespace LasLie\DynamicThemeStyle;
 
 class Plugin {
     /**
@@ -23,7 +22,7 @@ class Plugin {
      * @return void
      */
     public function load_files(): void {
-        require_once Config::PATH . 'includes/Functions.php';
+        require_once Config::PATH . 'src/Functions.php';
     }
 
     /**
@@ -33,7 +32,7 @@ class Plugin {
      */
     public function enqueue_scripts(): void {
         wp_enqueue_script(
-            'll-tsd-auto-style-switch',
+            'll-dts-auto-style-switch',
             Config::URL . 'assets/js/auto-style-switch.js',
             [],
             Config::VERSION,

theme-style-darkmode.php

@@ -1,44 +0,0 @@
-<?php
-/**
- * Plugin Name:         LL Theme Style Darkmode
- * Plugin URI:          https://git.laslie.de/wp/plugin-theme-style-darkmode
- * Description:         Enables automatic switching the theme style variant between light and dark based on the system/browser default.
- * Version: 1.0.0
- 
- * Requires at least: 
- * Requires PHP:
- 
- * Author:              Lasse Liebler
- * Author URI:          https://dev.laslie.de
- 
- * License:             GPLv3
- * License URI:         https://www.gnu.org/licenses/gpl-3.0.html
- 
- * Text Domain:         theme-style-darkmode
- * Domain Path:         /languages
-  
- * Network:
- 
- * Update URI:          https://git.laslie.de/wp/plugin-theme-style-darkmode
- 
- * Requires Plugins:
- */
-
-namespace LasLie\ThemeStyleDarkmode;
-
-// Abort if accessed directly.
-if ( ! defined( 'ABSPATH' ) ) exit;
-
-// Define constants for Config class.
-if ( ! defined( 'LasLie\ThemeStyleDarkmode\DIRNAME' ) ) {
-	define( 'LasLie\ThemeStyleDarkmode\DIRNAME', plugin_dir_path( __FILE__ ) );
-	define( 'LasLie\ThemeStyleDarkmode\DIRURL', plugin_dir_url( __FILE__ ) );
-}
-
-// Load config and main plugin file.
-require_once plugin_dir_path( __FILE__ ) . 'includes/Config.php';
-require_once plugin_dir_path( __FILE__ ) . 'includes/Plugin.php';
-
-// Initialize the plugin.
-$plugin = new Plugin();
-$plugin->init();