70 lines
1.8 KiB
Markdown
70 lines
1.8 KiB
Markdown
# 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:
|
||
```json
|
||
{
|
||
"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](assets/js/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](https://dev.laslie.de)
|
||
|
||
**Credits**
|
||
- AI-assisted development
|
||
- Repository icon by Freepik on [flaticon.com](https://www.flaticon.com) |