I was in need of an easy to use dark mode toggle that uses Beaver Builder’s Global Colours and came up with this plugin.
It’s free, fully open source, and released as-is > no support promises, no freemium, no upsell. Fork it, adapt it, do whatever you want with it.
What it does:
- Map any BB Global Colour to its dark-mode counterpart via a live swatch picker
- Dedicated light → dark background mapping for body and page content
- CSS variable bridge for colours defined outside BB (child themes etc.)
- Full toggle button styling — size, shape, colours, and hover states, all via Global Colours
- System preference sync (prefers-color-scheme)
- Exclude specific post types or page IDs from dark mode
- Drop it anywhere with [bb_dark_mode_toggle]
- Export / import settings as JSON
On the security side, all inputs are sanitized before hitting the database, export/import is nonce-verified and capability-checked, and no data leaves your server. On accessibility, the toggle button handles aria-pressed state, respects :focus-visible for keyboard users, and avoids a common stuck-focus bug you see on a lot of custom buttons.
Thought I share and hope someone finds it useful, but remove this post if not allowed!