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:

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:

Browser Support

Works in all modern browsers:

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.

Copy the code for…

HTML
CSS
JavaScript








   
 
   
 Review Your Cart 
 0
 
  
 
 
 Add Coupon Code
 
 
 
 
 
 
  Subtotal
 
 
  
 
   Checkout