Beaver Builder AI can generate a WordPress site with light and dark themes using a shared design system and the free Dark Mode Toggle skill. The toggle changes theme-aware colours across backgrounds, text, links and borders, rather than treating each page element as an isolated setting.

The setup uses an MCP-connected AI chat, giving the agent access to site pages, design-system settings and Beaver Themer layouts. On a visitor’s first visit, the site can follow the browser’s prefers-color-scheme setting; a manual selection overrides that preference and is stored in localStorage for later visits in the same browser, while storage remains available.

Custom Beaver Builder modules can apply design-system colours across a section while keeping text, links, images and repeating items editable in the module settings. Native modules can also support both themes, provided their colours are connected to the shared system instead of fixed values. The workflow includes generating a style guide to review palettes, then adding the toggle to a Themer header for consistent site-wide access. The AI skill guides design-system creation, toggle setup and page building; brand colours, fonts and examples help shape its output.

Author of the original text: Leah Finch (Beaver Builder)