Site & theme widget
Color Scheme Switch
A sun and moon switch that lets visitors choose light or dark mode.
Build it with your AI
“Add a dark mode switch to the header, next to the menu.”
Live demo
Where it works
A sun / moon switch for visitors. It appears once dark mode is on in the Design System, where each color gets a dark value. See the Design System →
Settings
7 settings in three tabs
Every setting below is in the editor — and available to your AI through get_widget_schema.
Content
3 settings
Switch
Style
Accessible label
Alignment
Design
4 settings
Switch
Size
Icon color
Background
Switch color when dark
Behaviour
shared
On every element
Spacing & position
Background & border
Animations
Motion & effects
Scroll & mouse effects
Visibility
Conditions
Interactions
Attributes & CSS
Build it with AI
Just describe what you want
Your AI looks up the Color Scheme Switch settings over MCP and writes the element for you — real, editable and on brand.
Claude · connected to your site
You
Add a dark mode switch to the header, next to the menu.
Claude · using Uncoder
Done — it’s on your site and fully editable.
What the AI writes
{ "type": "scheme-switch", "settings": { "style": "switch", "label": "Dark mode" } }More site & theme widgets
Works well with
Archive Description
The description of the category, tag or author being viewed, for archive templates.
Archive Title
The name of the category, tag or search being viewed — without the “Category:” prefix if you like.
Author Box
The author of a post with photo, name, bio and links, at the end of every article.
Featured Image
The post’s featured image, cropped to any ratio, with a fallback for posts without one.
Language Switcher
Links to the other languages of a page on WPML and Polylang sites.
Loop Filter
Category pills, dropdowns or a search box that filter a grid of posts without reloading the page.