Each control below switches this whole site between Auto, Light and Dark. They are one block wearing the Material 3 treatments and settings it offers. Try one, then scroll: the page follows immediately, and the choice is remembered.<\\\/p>',\\n '',\\n '',\\n '',\\n '
With the labels off, each segment carries a tooltip instead. Hover one, or hold it on a touchscreen. Screen readers get the name either way.<\\\/p>',\\n '',\\n '',\\n '',\\n '',\\n '',\\n '
The same three schemes, advanced one press at a time. This one is a standard icon button: no container, the symbol carrying the state.<\\\/p>',\\n '',\\n '',\\n '',\\n '',\\n '',\\n '
Narrow the window past 600 pixels to watch this one compress. Only one of the two is ever in the page, so only one is ever announced.<\\\/p>',\\n '',\\n '',\\n '',\\n) );\\n\\n$page = wp_insert_post( array(\\n 'post_title' => 'Pick a colour scheme',\\n 'post_name' => 'theme-switcher-demo',\\n 'post_type' => 'page',\\n 'post_status' => 'publish',\\n 'post_content' => $content,\\n) );\\n\\nif ( $page && ! is_wp_error( $page ) ) {\\n update_option( 'show_on_front', 'page' );\\n update_option( 'page_on_front', $page );\\n}\\n\"}]}"}},"all_blocks":{"axismundi\/theme-switcher":{"$schema":"https:\/\/schemas.wp.org\/trunk\/block.json","apiVersion":3,"name":"axismundi\/theme-switcher","version":"0.1.9","title":"Theme Switcher","category":"design","icon":"admin-appearance","description":"Switches between Auto, Light, and Dark theme modes.","keywords":["theme","dark mode","color scheme","appearance","light","dark"],"textdomain":"axismundi-theme-switcher","attributes":{"cycleButtonVisibility":{"type":"string","default":""},"cycleButtonStandard":{"type":"boolean","default":false},"showLabels":{"type":"boolean","default":true},"showTooltips":{"type":"boolean","default":true},"size":{"type":"string","default":"small"}},"example":{"attributes":{}},"styles":[{"name":"filled","label":"Filled","isDefault":true},{"name":"tonal","label":"Tonal"},{"name":"outlined","label":"Outlined"}],"supports":{"html":false,"align":["wide","full"],"interactivity":true,"color":{"text":true,"background":true},"spacing":{"padding":true},"layout":{"allowSwitching":false,"allowInheriting":false,"allowEditing":true,"allowOrientation":false,"allowVerticalAlignment":false,"allowWrap":false,"default":{"type":"flex"}}},"editorScript":"file:.\/edit.js","style":"file:.\/style.css","render":"file:.\/render.php","viewScript":"file:.\/tooltip.js","viewScriptModule":"file:.\/view.js"}},"tagged_versions":["0.1.5","0.1.6","0.1.7","0.1.8","0.1.9"],"block_files":["\/tags\/0.1.9\/blocks\/theme-switcher\/edit.js","\/tags\/0.1.9\/blocks\/theme-switcher\/style.css"],"assets_screenshots":[],"screenshots":[]},"plugin_section":[172757],"plugin_tags":[2769,1220,3706,173231,1332],"plugin_category":[46],"plugin_contributors":[270183],"plugin_business_model":[],"class_list":["post-336512","plugin","type-plugin","status-publish","hentry","plugin_section-block","plugin_tags-appearance","plugin_tags-block","plugin_tags-color-scheme","plugin_tags-dark-mode","plugin_tags-editor","plugin_category-editor-and-writing","plugin_contributors-kimjiwoon","plugin_committers-kimjiwoon"],"banners":[],"icons":{"svg":false,"icon":"https:\/\/s.w.org\/plugins\/geopattern-icon\/axismundi-theme-switcher.svg","icon_2x":false,"generated":true},"screenshots":[],"raw_content":"\n
The The block reads its colors, corner sizes and motion from the Material Design\nsystem custom properties, so it looks as intended under any theme that publishes\nthem, and falls back to Material's own baseline where a theme publishes none.\nThe Axismundi theme supports the No. The switcher runs locally in WordPress and stores the selected mode in a\nfirst-party cookie named Yes. The block reads its colors, corner sizes and motion from the Material\nDesign system custom properties -- Earlier releases are listed in changelog.txt.<\/p>","raw_excerpt":"A light, dark, and auto color-scheme switcher block that remembers what the reader picked.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ky.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/336512","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ky.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/ky.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/ky.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=336512"}],"author":[{"embeddable":true,"href":"https:\/\/ky.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/kimjiwoon"}],"wp:attachment":[{"href":"https:\/\/ky.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=336512"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/ky.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=336512"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/ky.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=336512"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/ky.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=336512"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/ky.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=336512"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/ky.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=336512"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}axismundi\/theme-switcher<\/code> block puts an Auto \/ Light \/ Dark control on the\npage, as a connected button group or a single cycling button, and writes the\nchoice to html[data-theme]<\/code>. The choice is kept in a first-party cookie and\nreapplied before the next page paints, so returning to the site does not flash\nthe wrong scheme.<\/p>\n\nhtml[data-theme]<\/code> contract natively.<\/p>\n\n\n\n
html[data-theme]<\/code>. The Axismundi theme does so natively.<\/li>\n<\/ol>\n\n\n\n
Does this plugin require an external service?<\/h3><\/dt>\n
axismundi_theme<\/code>.<\/p><\/dd>\nCan this plugin be used without the Axismundi theme?<\/h3><\/dt>\n
--md-sys-color-*<\/code> and the shape and motion\nscales beside it -- so it looks as intended under any theme that publishes them.\nUnder a theme that publishes none it falls back to Material's own baseline\ncolors, and it still renders and still toggles the data-theme<\/code> attribute; the\nsite around it changes only if something consumes html[data-theme]<\/code>.<\/p><\/dd>\n\n<\/dl>\n\n\n0.1.9<\/h4>\n\n
\n