{"repo":"GoogleChromeLabs/dark-mode-toggle","free":true,"listed":false,"github":"https://github.com/GoogleChromeLabs/dark-mode-toggle","clone":"git clone https://github.com/GoogleChromeLabs/dark-mode-toggle.git","description":"A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:","language":"JavaScript","stars":1225,"topics":["dark-mode","dark-theme","dark-mode-switcher","dark-mode-toggle","dark-theme-switcher","dark-theme-toggle","prefers-color-scheme","web-components","custom-elements","custom-elements-v1"],"license":"Apache-2.0","category":"ui-components","readme_excerpt":"Element A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site, so you can initially adhere to your users' preferences according to prefers-color-scheme , but also allow them to (optionally permanently) override their system setting for just your site. 📚 Read all(!) about dark mode in the related article Hello Darkness, My Old Friend. Installation Install from npm: Or, alternatively, use a tag (served from unpkg's CDN): (See the original HD version so you can pause.) Usage There are three ways how you can use : ① Using different stylesheets per color scheme that are conditionally loaded The custom element assumes that you have organized your CSS in different files that you load conditionally based on the media attribute in the stylesheet's corresponding link element. This is a great performance pattern, as you don't force people to download CSS that they don't need based on their current theme preference, yet non-matching stylesheets still get loaded, but don't compete for bandwidth in the critical rendering path. You can also have more than one file per theme. The example below illustrates the principle. The above method might cause flashing (#77) when the page loads, as the dark mode toggle module is loaded after the page is rendered. A loader script can be used to apply the saved theme before the page is rendered. Wrap the stylesheet tags with ... and add the loader script as follows: ② Using a CSS class that you toggle If you prefer t","default_branch":null,"files":null,"tree":[],"storefront":"/r/GoogleChromeLabs","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/GoogleChromeLabs/dark-mode-toggle/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."}