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:

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

Customize Variants

Edit auto-style-switch.js line 8:

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

Credits

AI-assisted development
Repository icon by Freepik on flaticon.com

1.5 KiB Raw Blame History Unescape Escape