{"repo":"richtabor/dark-mode-toggle-block","free":true,"listed":false,"github":"https://github.com/richtabor/dark-mode-toggle-block","clone":"git clone https://github.com/richtabor/dark-mode-toggle-block.git","description":"A WordPress block to add a toggle between light and dark mode on a site.","language":"JavaScript","stars":53,"topics":["wordpress","wordpress-block","wordpress-plugin"],"license":null,"category":"self-hosted-apps","readme_excerpt":"Dark Mode Toggle Block A WordPress block to add a toggle between light and dark appearances, as seen on my blog. The block respects users' system color scheme preferences ( prefers-color-scheme ) while allowing them to override it. The theme state is saved in local storage and a theme-dark class is added to the element when dark mode is active. Read about it on my blog → Visual https://github.com/richtabor/dark-mode-toggle-block/assets/1813435/f7255865-6328-4f54-8284-6bb2432d8ab2 How it works The block automatically respects your visitors' system color scheme preference ( prefers-color-scheme ) while allowing them to override it with the toggle. Behavior: - On first visit, the site matches the user's system preference (light or dark mode) - Users can click the toggle to override their system preference - The user's choice is saved in local storage and persists across page loads - The toggle icons (sun/moon) accurately reflect the current mode When toggled, the block adds a .theme-dark class to the element. You can add CSS variables to target dark styles. Performance: The theme preference is applied in the before the page renders, preventing any flash of unstyled content (FOUC). I did it this way on my blog, which uses the theme.json settings.custom.color values for each color, unless there is a color created within the Site Editor with corresponding slug (i.e. theme-1-dark ). I used this method so that a user could manipulate any given color without having to modify theme.jso","default_branch":null,"files":null,"tree":[],"storefront":"/r/richtabor","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/richtabor/dark-mode-toggle-block/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}