Dark Mode is a WordPress ability from The Plus Addons for Elementor — usable via Easy MCP AI, which connects Claude, ChatGPT, and any AI assistant to your site.
Install Free Plugin →Dark Mode
WriteAdds the The Plus "Dark Mode" widget (tp-dark-mode) to an Elementor container.
Requires the The Plus Addons for Elementor plugin (which registers under the 'tpae' ability category) on WordPress 6.9+, with Elementor active. Every ability requires the current user to have the 'edit_posts' capability (and 'edit_post' for the specific post being modified); abilities that create or edit content also verify Elementor and, where relevant, the target The Plus widget are available. A subset of abilities (theme templates, template conditions, dynamic tags, popups, and some custom-code abilities) only register when Elementor Pro is active, and many widget abilities load only in the free plugin when the Pro add-on is inactive.
What it does
The execute_callback tpae_mcp_add_theplus_dark_mode_ability() reads the target post's Elementor page data, builds a widget element of type tp-dark-mode from the mapped input settings (dark mode type/style, background color, mix-blend-mode, position offsets, cookie persistence, OS theme auto-match, ignore-classes, and switcher size/color style controls), inserts it into the specified parent container at the requested position, and saves the updated Elementor data back to the post. It requires Elementor to be active and the tp-dark-mode widget to be registered on the site, and requires non-empty post_id and parent_id, with the target post existing.
See it in action
You ask your AI assistant
"Add a Dark Mode toggle widget to container footer-widgets on page 1 with dm_style tp_dm_style2 and dm_save_in_cookies set to yes."
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| post_id | integer | Yes | Elementor page/post ID |
| parent_id | string | Yes | Target Elementor container ID |
| position | integer | No | Insert position. Use -1 to append. |
| dm_type | string | No | Type (enum: dm_type_gc, dm_type_mb) |
| dm_style | string | No | Style (enum: columns, tp_dm_style1, tp_dm_style2) |
| dm_backgroundcolor_activate | string | No | Background Color (Color Hex/RGBA) |
| dm_mix_blend_mode | string | No | Mix Blend Mode |
| dm_time | object | No | Animation Time |
| dm_right | string | No | Right Offset (enum: yes, no) |
| dm_right_offset | object | No | Right (Slider/Size Object) |
| dm_bottom | string | No | Bottom Offset (enum: yes, no) |
| dm_bottom_offset | object | No | Bottom (Slider/Size Object) |
| loop_label | string | No | Label |
| loop_color | string | No | Color (Color Hex/RGBA) |
| loop_content | array | No | Global Color |
| dm_save_in_cookies | string | No | Save in Cookies (enum: yes, no) |
| dm_auto_match_os_theme | string | No | Auto Match OS Theme (enum: yes, no) |
| dm_ignore_class | string | No | Ignore Dark Mode (enum: yes, no) |
| dm_ignore | string | No | Ignore Dark Mode Classes |
| dm_ignore_pre_class | string | No | The Plus Ignore Class Default (enum: yes, no) |
| tpae_theme_builder | string | No | tpae_theme_builder |
| st2_size_d | object | No | Icon Size (Slider/Size Object) |
| st2_bg_size_d | object | No | Background Size (Slider/Size Object) |
| st2_bg | string | No | Background (Color Hex/RGBA) |
| st2_br | object | No | Border Radius (Dimensions Object) |
| st2_bg_d | string | No | Background (Color Hex/RGBA) |
| st2_br_d | object | No | Border Radius (Dimensions Object) |
| switcher_overall_size | object | No | Switcher Size (Slider/Size Object) |
| switcher_overall_size_height | object | No | Switcher Height (Slider/Size Object) |
| switcher_dot_size | object | No | Dot Size (Slider/Size Object) |
| switcher_dot_offset | object | No | Dot Offset (Slider/Size Object) |
| si_switch_normal_border_color | string | No | Box Shadow Color (Color Hex/RGBA) |
| si_switch_active_border_color_n | string | No | Box Shadow Color (Color Hex/RGBA) |
| switcher_before_text | string | No | Switcher Before Text |
| switcher_before_text_offset | object | No | Offset (Slider/Size Object) |
| switcher_after_text | string | No | Switcher After Text |
| switcher_after_text_offset | object | No | Offset (Slider/Size Object) |
| switcher_b_a_text_typ_color | string | No | Color (Color Hex/RGBA) |
| settings | object | No | Raw Elementor control key/value pairs to merge. Supports system-preference sensing, persistent state storage, and custom CSS selector inverse logic. |
Returns
Returns element_id (string), widget_type (string), and post_id (integer) of the created widget.
Permission
Requires the current user to have the edit_posts capability, and if a post_id is provided, also requires edit_post capability on that specific post.
More The Plus Addons for Elementor abilities
Accordion
Adds The Plus Addons "Accordion" widget (tp-accordion) to an Elementor container.
Add Code Snippet
Creates a site-wide Custom Code snippet using Elementor Pro, injecting CSS/JS/meta into the head or body on all pages.
Add Container
Adds a new Elementor flex container to a page or nests it inside another existing container.
Add Container
Adds a flex or grid container to a page, optionally nested inside a parent container.
Add Custom CSS
Adds custom CSS to a specific element or to the entire page (requires Elementor Pro).
Add Custom JavaScript
Adds a custom JavaScript snippet to a page by inserting an HTML widget containing a <script> tag; works with free Elementor.