Free Theme Switcher for Etch Builder

A production-ready dark/light mode toggle built in Etch Visual Development Environment

We’re releasing a complete, production-ready theme switching component built directly in Etch. This showcases the clean, semantic code that Etch generates while providing all the functionality you need for dark/light mode switching.

What You Get

This theme switcher demonstrates the power of building with Etch:

Clean, minimal code with maximum functionality
Full keyboard navigation, screen reader support, and proper focus management
System preference detection (respects OS dark mode)
Persistent user preferences with localStorage
Zero dependencies – pure vanilla JavaScript
Etch-generated markup with proper data attributes
AutomaticCSS ready
Public API for programmatic control

The Complete Code

JSON

{"type":"block","gutenbergBlock":{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","name":"Theme Switcher","script":{"code":"J3VzZSBzdHJpY3QnOwoKLyoqCiAqIEV0Y2hiZXJnIFRoZW1lIFN3aXRjaGVyCiAqIEhhbmRsZXMgbGlnaHQvZGFyayB0aGVtZSBzd2l0Y2hpbmcgd2l0aCBzdXBwb3J0IGZvciBBdXRvbWF0aWNDU1MgYW5kIGJyb3dzZXIgc3RhbmRhcmQgY29sb3Igc2NoZW1lcwogKiBJbmNsdWRlcyBzcGVjaWFsIGhhbmRsaW5nIGZvciBpZnJhbWUgY29udGV4dHMgKEV0Y2ggZWRpdG9yIGludGVncmF0aW9uKQogKi8KCi8qKgogKiBEZXRlY3RzIGlmIEF1dG9tYXRpY0NTUyBzeXN0ZW0gaXMgcHJlc2VudCBvbiB0aGUgcGFnZQogKiBDaGVja3MgZm9yIENTUyBjdXN0b20gcHJvcGVydGllcywgY2xhc3MgcHJlZml4ZXMsIGFuZCBzdHlsZXNoZWV0IGxpbmtzCiAqIEByZXR1cm5zIHtib29sZWFufSBUcnVlIGlmIEF1dG9tYXRpY0NTUyBpcyBkZXRlY3RlZAogKi8KZnVuY3Rpb24gaGFzQUNTU1N5c3RlbSgpIHsKICAgIGNvbnN0IHN0eWxlID0gZ2V0Q29tcHV0ZWRTdHlsZShkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQpOwogICAgcmV0dXJuIHN0eWxlLmdldFByb3BlcnR5VmFsdWUoJy0tYmFzZS0wJykgIT09ICcnIHx8IAogICAgICAgICAgIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ1tjbGFzcyo9ImFjc3MtIl0nKSAhPT0gbnVsbCB8fAogICAgICAgICAgIGRvY3VtZW50LnF1ZXJ5U2VsZWN0b3IoJ2xpbmtbaHJlZio9ImF1dG9tYXRpYyJdJykgIT09IG51bGw7Cn0KCi8vIEluaXRpYWxpemUgc3lzdGVtIGRldGVjdGlvbiBhbmQgdGhlbWUgc3dpdGNoZXIgZWxlbWVudApjb25zdCB1c2VBQ1NTU3lzdGVtID0gaGFzQUNTU1N5c3RlbSgpOwpjb25zdCB0aGVtZVN3aXRjaGVyID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvcignLmV0Yi10aGVtZS1zd2l0Y2gnKTsKY29uc3QgaXNEYXJrVGhlbWUgPSAodGhlbWUpID0+IHRoZW1lID09PSAnZGFyayc7CgovKioKICogRGV0ZXJtaW5lcyB0aGUgaW5pdGlhbCB0aGVtZSBiYXNlZCBvbiBzYXZlZCBwcmVmZXJlbmNlIG9yIHN5c3RlbSBwcmVmZXJlbmNlCiAqIFByaW9yaXR5OiBsb2NhbFN0b3JhZ2UgLT4gc3lzdGVtIHByZWZlcmVuY2UgLT4gZGVmYXVsdCB0byBsaWdodAogKiBAcmV0dXJucyB7c3RyaW5nfSAnbGlnaHQnIG9yICdkYXJrJwogKi8KZnVuY3Rpb24gZ2V0SW5pdGlhbFRoZW1lKCkgewogICAgY29uc3Qgc2F2ZWRUaGVtZSA9IGxvY2FsU3RvcmFnZS5nZXRJdGVtKCdldGItdGhlbWUnKTsKICAgIGlmIChzYXZlZFRoZW1lID09PSAnbGlnaHQnIHx8IHNhdmVkVGhlbWUgPT09ICdkYXJrJykgewogICAgICAgIHJldHVybiBzYXZlZFRoZW1lOwogICAgfQogICAgcmV0dXJuIHdpbmRvdy5tYXRjaE1lZGlhPy4oJyhwcmVmZXJzLWNvbG9yLXNjaGVtZTogZGFyayknKT8ubWF0Y2hlcyA/ICdkYXJrJyA6ICdsaWdodCc7Cn0KCi8qKgogKiBBcHBsaWVzIHRoZSBzcGVjaWZpZWQgdGhlbWUgdG8gdGhlIGRvY3VtZW50CiAqIEBwYXJhbSB7c3RyaW5nfSB0aGVtZSAtICdsaWdodCcgb3IgJ2RhcmsnCiAqLwpmdW5jdGlvbiBhcHBseVRoZW1lKHRoZW1lKSB7CiAgICBjb25zdCBpc0RhcmsgPSBpc0RhcmtUaGVtZSh0aGVtZSk7CiAgICBjb25zdCBpc0luSWZyYW1lID0gd2luZG93LnNlbGYgIT09IHdpbmRvdy50b3A7IC8vIENoZWNrIGlmIHdlJ3JlIGluc2lkZSBhbiBpZnJhbWUgKEV0Y2ggZWRpdG9yKQogICAgY29uc3QgZXRjaEh0bWwgPSBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQ7IC8vIEhUTUwgZWxlbWVudCBvZiB0aGUgaWZyYW1lCiAgICBjb25zdCBldGNoQm9keSA9IGRvY3VtZW50LmJvZHk7IC8vIENhbnZhcyB3aGVyZSB3ZSBwbGFjZSBlbGVtZW50cwogIAogICAgLy8gU3BlY2lhbCBoYW5kbGluZyBmb3IgaWZyYW1lIGNvbnRleHQgKEV0Y2ggZWRpdG9yIGludGVncmF0aW9uKQogICAgaWYgKGlzSW5JZnJhbWUgJiYgZXRjaEJvZHkpIHsKICAgICAgICBldGNoSHRtbC5zdHlsZS5iYWNrZ3JvdW5kQ29sb3IgPSAnd2hpdGUnOyAvLyBLZWVwIEhUTUwgYmFja2dyb3VuZCB3aGl0ZQogICAgICAgIAogICAgICAgIC8qCiAgICAgICAgICogQXBwbHkgdGhlbWUgY29sb3JzIHRvIHRoZSBib2R5IChjYW52YXMpCiAgICAgICAgICovCiAgICAgICAgZXRjaEJvZHkuc3R5bGUuYmFja2dyb3VuZENvbG9yID0gaXNEYXJrID8gJyMwMDAwMDAnIDogJyNmZmZmZmYnOwogICAgICAgIGV0Y2hCb2R5LnN0eWxlLmNvbG9yID0gaXNEYXJrID8gJyNmZmZmZmYnIDogJyMwMDAwMDAnOwogICAgfQogIAogICAgLy8gQXBwbHkgdGhlbWUgYmFzZWQgb24gZGV0ZWN0ZWQgc3lzdGVtCiAgICBpZiAodXNlQUNTU1N5c3RlbSkgewogICAgICAgIC8vIEF1dG9tYXRpY0NTUyB1c2VzIGEgY2xhc3MtYmFzZWQgY29sb3Igc2NoZW1lIHN5c3RlbQogICAgICAgIGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5jbGFzc0xpc3QudG9nZ2xlKCdjb2xvci1zY2hlbWUtLWFsdCcsIGlzRGFyayk7CiAgICB9IGVsc2UgewogICAgICAgIC8vIEJyb3dzZXIgc3RhbmRhcmQgY29sb3Igc2NoZW1lIGltcGxlbWVudGF0aW9uCiAgICAgICAgZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LnN0eWxlLmNvbG9yU2NoZW1lID0gdGhlbWU7CiAgICAgICAgZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LmRhdGFzZXQudGhlbWUgPSB0aGVtZTsKICAgIH0KCiAgICAvLyBVcGRhdGUgdGhlbWUgc3dpdGNoZXIgYnV0dG9uIGFwcGVhcmFuY2UgYW5kIGFjY2Vzc2liaWxpdHkKICAgIGlmICh0aGVtZVN3aXRjaGVyKSB7CiAgICAgICAgdGhlbWVTd2l0Y2hlci5zZXRBdHRyaWJ1dGUoJ2FyaWEtcHJlc3NlZCcsIGlzRGFyay50b1N0cmluZygpKTsKICAgICAgICAKICAgICAgICAvLyBUb2dnbGUgaWNvbiB2aXNpYmlsaXR5IGJhc2VkIG9uIGN1cnJlbnQgdGhlbWUKICAgICAgICBjb25zdCBtb29uSWNvbiA9IHRoZW1lU3dpdGNoZXIucXVlcnlTZWxlY3RvcignLmV0Yi10aGVtZS1zd2l0Y2gtLWljb246Zmlyc3QtY2hpbGQnKTsKICAgICAgICBjb25zdCBzdW5JY29uID0gdGhlbWVTd2l0Y2hlci5xdWVyeVNlbGVjdG9yKCcuZXRiLXRoZW1lLXN3aXRjaC0taWNvbjpsYXN0LWNoaWxkJyk7CiAgICAgICAgCiAgICAgICAgaWYgKG1vb25JY29uICYmIHN1bkljb24pIHsKICAgICAgICAgICAgLy8gU2hvdyBtb29uIGljb24gaW4gZGFyayBtb2RlLCBzdW4gaWNvbiBpbiBsaWdodCBtb2RlCiAgICAgICAgICAgIG1vb25JY29uLnN0eWxlLnNldFByb3BlcnR5KCdkaXNwbGF5JywgaXNEYXJrID8gJ2ZsZXgnIDogJ25vbmUnLCAnaW1wb3J0YW50Jyk7CiAgICAgICAgICAgIHN1bkljb24uc3R5bGUuc2V0UHJvcGVydHkoJ2Rpc3BsYXknLCBpc0RhcmsgPyAnbm9uZScgOiAnZmxleCcsICdpbXBvcnRhbnQnKTsKICAgICAgICB9CiAgICB9Cn0KCi8qKgogKiBHZXRzIHRoZSBjdXJyZW50bHkgYWN0aXZlIHRoZW1lCiAqIEByZXR1cm5zIHtzdHJpbmd9ICdsaWdodCcgb3IgJ2RhcmsnCiAqLwpmdW5jdGlvbiBnZXRDdXJyZW50VGhlbWUoKSB7CiAgICBpZiAodXNlQUNTU1N5c3RlbSkgewogICAgICAgIHJldHVybiBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuY2xhc3NMaXN0LmNvbnRhaW5zKCdjb2xvci1zY2hlbWUtLWFsdCcpID8gJ2RhcmsnIDogJ2xpZ2h0JzsKICAgIH0gZWxzZSB7CiAgICAgICAgcmV0dXJuIGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5zdHlsZS5jb2xvclNjaGVtZSA9PT0gJ2RhcmsnID8gJ2RhcmsnIDogJ2xpZ2h0JzsKICAgIH0KfQoKLyoqCiAqIFRvZ2dsZXMgYmV0d2VlbiBsaWdodCBhbmQgZGFyayB0aGVtZXMKICogU2F2ZXMgdGhlIG5ldyBwcmVmZXJlbmNlIGFuZCBkaXNwYXRjaGVzIGEgY3VzdG9tIGV2ZW50CiAqLwpmdW5jdGlvbiB0b2dnbGVUaGVtZSgpIHsKICAgIGNvbnN0IGN1cnJlbnRUaGVtZSA9IGdldEN1cnJlbnRUaGVtZSgpOwogICAgY29uc3QgbmV3VGhlbWUgPSBjdXJyZW50VGhlbWUgPT09ICdkYXJrJyA/ICdsaWdodCcgOiAnZGFyayc7CiAgICBhcHBseVRoZW1lKG5ld1RoZW1lKTsKICAgIGxvY2FsU3RvcmFnZS5zZXRJdGVtKCdldGItdGhlbWUnLCBuZXdUaGVtZSk7CgogICAgLy8gRGlzcGF0Y2ggY3VzdG9tIGV2ZW50IGZvciBvdGhlciBjb21wb25lbnRzIHRvIGxpc3RlbiB0byB0aGVtZSBjaGFuZ2VzCiAgICB3aW5kb3cuZGlzcGF0Y2hFdmVudChuZXcgQ3VzdG9tRXZlbnQoJ2V0Yi10aGVtZS1jaGFuZ2VkJywgeyAKICAgICAgICBkZXRhaWw6IHsgdGhlbWU6IG5ld1RoZW1lLCBzeXN0ZW06IHVzZUFDU1NTeXN0ZW0gPyAnYWNzcycgOiAnYnJvd3NlcicgfSAKICAgIH0pKTsKfQoKLyoqCiAqIEFkZHMgY2xpY2sgYW5kIGtleWJvYXJkIGV2ZW50IGxpc3RlbmVycyB0byB0aGUgdGhlbWUgc3dpdGNoZXIgYnV0dG9uCiAqIFN1cHBvcnRzIGJvdGggbW91c2UgY2xpY2tzIGFuZCBrZXlib2FyZCBhY3RpdmF0aW9uIChFbnRlci9TcGFjZSkKICovCmZ1bmN0aW9uIGFkZFRoZW1lU3dpdGNoTGlzdGVuZXJzKCkgewogICAgaWYgKCF0aGVtZVN3aXRjaGVyKSByZXR1cm47CgogICAgLy8gSGFuZGxlIG1vdXNlIGNsaWNrcwogICAgdGhlbWVTd2l0Y2hlci5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uKGUpIHsKICAgICAgICBlLnByZXZlbnREZWZhdWx0KCk7CiAgICAgICAgdG9nZ2xlVGhlbWUoKTsKICAgIH0pOwoKICAgIC8vIEhhbmRsZSBrZXlib2FyZCBhY3RpdmF0aW9uIGZvciBhY2Nlc3NpYmlsaXR5CiAgICB0aGVtZVN3aXRjaGVyLmFkZEV2ZW50TGlzdGVuZXIoJ2tleWRvd24nLCBmdW5jdGlvbihlKSB7CiAgICAgICAgaWYgKGUua2V5ID09PSAnRW50ZXInIHx8IGUua2V5ID09PSAnICcpIHsKICAgICAgICAgICAgZS5wcmV2ZW50RGVmYXVsdCgpOwogICAgICAgICAgICB0b2dnbGVUaGVtZSgpOwogICAgICAgIH0KICAgIH0pOwp9CgovKioKICogSW5pdGlhbGl6ZXMgdGhlIEV0Y2hiZXJnIHRoZW1lIHN3aXRjaGluZyBzeXN0ZW0KICogU2V0cyB1cCBldmVudCBsaXN0ZW5lcnMsIHN5c3RlbSBwcmVmZXJlbmNlIGRldGVjdGlvbiwgYW5kIGluaXRpYWwgdGhlbWUKICovCmZ1bmN0aW9uIGluaXRFVEJUaGVtZVN3aXRjaCgpIHsKICAgIC8vIFNldCB1cCB0aGVtZSBzd2l0Y2hlciBidXR0b24gbGlzdGVuZXJzCiAgICBhZGRUaGVtZVN3aXRjaExpc3RlbmVycygpOwoKICAgIC8vIExpc3RlbiBmb3Igc3lzdGVtIGNvbG9yIHNjaGVtZSBjaGFuZ2VzCiAgICBpZiAod2luZG93Lm1hdGNoTWVkaWEpIHsKICAgICAgICB3aW5kb3cubWF0Y2hNZWRpYSgnKHByZWZlcnMtY29sb3Itc2NoZW1lOiBkYXJrKScpLmFkZEV2ZW50TGlzdGVuZXIoJ2NoYW5nZScsIGZ1bmN0aW9uKGUpIHsKICAgICAgICAgICAgLy8gT25seSBhcHBseSBzeXN0ZW0gcHJlZmVyZW5jZSBpZiB1c2VyIGhhc24ndCBzZXQgYSBtYW51YWwgcHJlZmVyZW5jZQogICAgICAgICAgICBpZiAoIWxvY2FsU3RvcmFnZS5nZXRJdGVtKCdldGItdGhlbWUnKSkgewogICAgICAgICAgICAgICAgYXBwbHlUaGVtZShlLm1hdGNoZXMgPyAnZGFyaycgOiAnbGlnaHQnKTsKICAgICAgICAgICAgfQogICAgICAgIH0pOwogICAgfQoKICAgIC8vIEFwcGx5IGluaXRpYWwgdGhlbWUgYW5kIHNhdmUgcHJlZmVyZW5jZQogICAgY29uc3QgaW5pdGlhbFRoZW1lID0gZ2V0SW5pdGlhbFRoZW1lKCk7CiAgICBhcHBseVRoZW1lKGluaXRpYWxUaGVtZSk7CiAgICBsb2NhbFN0b3JhZ2Uuc2V0SXRlbSgnZXRiLXRoZW1lJywgaW5pdGlhbFRoZW1lKTsKCiAgICAvLyBFeHBvc2UgcHVibGljIEFQSSBmb3IgZXh0ZXJuYWwgdXNlCiAgICB3aW5kb3cuZXRiVGhlbWVTd2l0Y2ggPSB7CiAgICAgICAgLyoqCiAgICAgICAgICogR2V0IHRoZSBjdXJyZW50bHkgYWN0aXZlIHRoZW1lCiAgICAgICAgICogQHJldHVybnMge3N0cmluZ30gJ2xpZ2h0JyBvciAnZGFyaycKICAgICAgICAgKi8KICAgICAgICBnZXRDdXJyZW50VGhlbWUsCiAgICAgICAgCiAgICAgICAgLyoqCiAgICAgICAgICogU2V0IGEgc3BlY2lmaWMgdGhlbWUKICAgICAgICAgKiBAcGFyYW0ge3N0cmluZ30gdGhlbWUgLSAnbGlnaHQnIG9yICdkYXJrJwogICAgICAgICAqIEByZXR1cm5zIHtib29sZWFufSBUcnVlIGlmIHRoZW1lIHdhcyBzZXQgc3VjY2Vzc2Z1bGx5CiAgICAgICAgICovCiAgICAgICAgc2V0VGhlbWU6ICh0aGVtZSkgPT4gewogICAgICAgICAgICBpZiAodGhlbWUgPT09ICdkYXJrJyB8fCB0aGVtZSA9PT0gJ2xpZ2h0JykgewogICAgICAgICAgICAgICAgYXBwbHlUaGVtZSh0aGVtZSk7CiAgICAgICAgICAgICAgICBsb2NhbFN0b3JhZ2Uuc2V0SXRlbSgnZXRiLXRoZW1lJywgdGhlbWUpOwogICAgICAgICAgICAgICAgcmV0dXJuIHRydWU7CiAgICAgICAgICAgIH0KICAgICAgICAgICAgcmV0dXJuIGZhbHNlOwogICAgICAgIH0sCiAgICAgICAgCiAgICAgICAgLyoqCiAgICAgICAgICogVG9nZ2xlIGJldHdlZW4gbGlnaHQgYW5kIGRhcmsgdGhlbWVzCiAgICAgICAgICovCiAgICAgICAgdG9nZ2xlVGhlbWUsCiAgICAgICAgCiAgICAgICAgLyoqCiAgICAgICAgICogUmVzZXQgdGhlbWUgdG8gc3lzdGVtIHByZWZlcmVuY2UKICAgICAgICAgKiBSZW1vdmVzIHNhdmVkIHByZWZlcmVuY2UgYW5kIGFwcGxpZXMgc3lzdGVtIGRlZmF1bHQKICAgICAgICAgKi8KICAgICAgICByZXNldDogKCkgPT4gewogICAgICAgICAgICBsb2NhbFN0b3JhZ2UucmVtb3ZlSXRlbSgnZXRiLXRoZW1lJyk7CiAgICAgICAgICAgIGNvbnN0IHN5c3RlbVRoZW1lID0gd2luZG93Lm1hdGNoTWVkaWE/LignKHByZWZlcnMtY29sb3Itc2NoZW1lOiBkYXJrKScpPy5tYXRjaGVzID8gJ2RhcmsnIDogJ2xpZ2h0JzsKICAgICAgICAgICAgYXBwbHlUaGVtZShzeXN0ZW1UaGVtZSk7CiAgICAgICAgfSwKICAgICAgICAKICAgICAgICAvKioKICAgICAgICAgKiBHZXQgaW5mb3JtYXRpb24gYWJvdXQgdGhlIGNvbG9yIHNjaGVtZSBzeXN0ZW0gYmVpbmcgdXNlZAogICAgICAgICAqIEByZXR1cm5zIHtzdHJpbmd9ICdBdXRvbWF0aWNDU1MnIG9yICdCcm93c2VyIFN0YW5kYXJkJwogICAgICAgICAqLwogICAgICAgIGdldFN5c3RlbTogKCkgPT4gdXNlQUNTU1N5c3RlbSA/ICdBdXRvbWF0aWNDU1MnIDogJ0Jyb3dzZXIgU3RhbmRhcmQnCiAgICB9Owp9CgovLyBJbml0aWFsaXplIHRoZSB0aGVtZSBzd2l0Y2hpbmcgc3lzdGVtIHdoZW4gc2NyaXB0IGxvYWRzCmluaXRFVEJUaGVtZVN3aXRjaCgpOw==","id":"gr6bt9j"},"styles":["kvocs00","pqisfrq","etch-global-variable-style"],"attributes":{"aria-label":"Toggle between light and dark mode","aria-pressed":"false","class":"etb-theme-switch header__button"},"block":{"type":"html","tag":"button"}},"name":"Theme Switcher"}},"innerBlocks":[{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","name":"Icon","styles":["5d7xp4j","wwb63nb","etch-global-variable-style"],"attributes":{"style":"display: none !important;","class":"etb-theme-switch--icon header__div"},"block":{"type":"html","tag":"div"}},"name":"Icon"}},"innerBlocks":[{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","name":"Moon","styles":["0z59e0s","etch-global-variable-style"],"attributes":{"viewBox":"0 0 24 24","width":"24","height":"24","color":"currentColor","fill":"none","class":"header__svg"},"block":{"type":"html","tag":"svg"}},"name":"Moon"}},"innerBlocks":[{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","styles":["fwu9gap","etch-global-variable-style"],"attributes":{"d":"M21.5 14.078A8.557 8.557 0 0 1 9.922 2.5C5.668 3.497 2.5 7.315 2.5 11.873a9.627 9.627 0 0 0 9.627 9.627c4.558 0 8.376-3.168 9.373-7.422Z","stroke":"white","stroke-width":"1.5","stroke-linecap":"round","stroke-linejoin":"round","class":"header__path"},"block":{"type":"html","tag":"path"}}}},"innerBlocks":[],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">","</div>"]}],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">",null,"</div>"]}],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">",null,"</div>"]},{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","name":"Icon","styles":["5d7xp4j","wwb63nb","etch-global-variable-style"],"attributes":{"style":"display: flex !important;","class":"etb-theme-switch--icon header__div"},"block":{"type":"html","tag":"div"}},"name":"Icon"}},"innerBlocks":[{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","name":"Sun","styles":["0z59e0s","etch-global-variable-style"],"attributes":{"viewBox":"0 0 24 24","width":"24","height":"24","color":"currentColor","fill":"currentColor","class":"header__svg"},"block":{"type":"html","tag":"svg"}},"name":"Sun"}},"innerBlocks":[{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","styles":["fwu9gap","etch-global-variable-style"],"attributes":{"style":"color: transparent","d":"M17 12a5 5 0 1 1-10 0 5 5 0 0 1 10 0Z","stroke":"black","stroke-width":"1.5","class":"header__path"},"block":{"type":"html","tag":"path"}}}},"innerBlocks":[],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">","</div>"]},{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","styles":["fwu9gap","etch-global-variable-style"],"attributes":{"d":"M12 2v1.5m0 17V22m7.07-2.929-1.06-1.06M5.99 5.989 4.928 4.93M22 12h-1.5m-17 0H2m17.071-7.071-1.06 1.06M5.99 18.011l-1.06 1.06","stroke":"black","stroke-width":"1.5","stroke-linecap":"round","class":"header__path"},"block":{"type":"html","tag":"path"}}}},"innerBlocks":[],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">","</div>"]}],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">",null,null,"</div>"]}],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">",null,"</div>"]}],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">",null,null,"</div>"]},"styles":{"kvocs00":{"type":"class","selector":".etb-theme-switch","collection":"default","css":"width: 24px;\n height: 24px;\n min-width: max-content;\n cursor: pointer;\n padding: 0;\n border-radius: 50%;\n\n // Icon container\n &--icon {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n }","readonly":false},"pqisfrq":{"type":"class","selector":".header__button","collection":"default","css":"","readonly":false},"5d7xp4j":{"type":"class","selector":".etb-theme-switch--icon","collection":"default","css":"","readonly":false},"wwb63nb":{"type":"class","selector":".header__div","collection":"default","css":"","readonly":false},"0z59e0s":{"type":"class","selector":".header__svg","collection":"default","css":"","readonly":false},"fwu9gap":{"type":"class","selector":".header__path","collection":"default","css":"","readonly":false}}}

^{Code improved thanks to @hakira}

Basic Implementation

Just copy the JSON and paste it inside Etch —it works out of the box in any Etch website with or without AutomaticCSS.

Customizing Icons: To change the sun/moon icons, simply replace the SVG elements in the HTML. Make sure your new SVGs use currentColor or set a fixed color.

Important: If using AutomaticCSS, make sure “Alternate Color” is turned on in all your active colors.

If you want to learn more about how to properly set up your dark mode colors, follow this guide: Practical tips for dark mode in AutomaticCSS

Perfect for Professional Projects

This component demonstrates why Etch is perfect for professional WordPress development:

Minimal, clean code that doesn’t bloat your project
Maximum flexibility to style according to your design system
Professional functionality with accessibility and UX built-in
Easy integration with any CSS framework or design system

Browser Support

Works in all modern browsers:

Chrome 88+
Firefox 85+
Safari 14+
Edge 88+

More Professional Components Coming

This theme switcher is part of our growing library of Etch-built components that prioritize clean code and professional functionality.

Explore Etchberg → – Professional resources for WordPress developers who value quality code.