# LL Theme Style Darkmode

Automatically switches between light and dark theme stil variantes based on system/browser color scheme preference.

## Features

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

## Requirements

- Theme stil 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" } }
}
```

### Customize Variants

Edit [auto-style-switch.js](assets/js/auto-style-switch.js) line 8:
```javascript
const desired = prefersDark ? '01-evening' : 'default';
```

## 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\ThemeStyleDarkmode` 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)