diff --git a/README.md b/README.md index 0faa555..77b9f2e 100644 --- a/README.md +++ b/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: -```javascript -const desired = prefersDark ? '01-evening' : 'default'; -``` +Edit [auto-style-switch.js](assets/js/auto-style-switch.js) to change the default variant names if needed. ## 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 diff --git a/assets/js/auto-style-switch.js b/assets/js/auto-style-switch.js index b13101a..a3128ef 100644 --- a/assets/js/auto-style-switch.js +++ b/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; - const cookie = document.cookie.split('; ').find(r => r.startsWith('style_variant=')); - const current = cookie ? cookie.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 getCookie(name) { + const match = document.cookie.split('; ').find(r => r.startsWith(name + '=')); + return match ? decodeURIComponent(match.split('=')[1]) : ''; } + + 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 })(); \ No newline at end of file diff --git a/dynamic-theme-style.php b/dynamic-theme-style.php new file mode 100644 index 0000000..067ec70 --- /dev/null +++ b/dynamic-theme-style.php @@ -0,0 +1,44 @@ +init(); \ No newline at end of file diff --git a/includes/Config.php b/src/Config.php similarity index 57% rename from includes/Config.php rename to src/Config.php index e895abd..0dc8ece 100644 --- a/includes/Config.php +++ b/src/Config.php @@ -1,9 +1,9 @@ init(); \ No newline at end of file