dark-mode-toggle - npm Package Compare versions

Comparing version 0.4.5 to 0.4.6

src/template-contents.tpl

package.json

		{
		"name": "dark-mode-toggle",
		"version": "0.4.5",
		"version": "0.4.6",
		"description": "Web Component that toggles dark mode 🌒",
		@@ -17,3 +17,3 @@ "main": "./src/dark-mode-toggle.mjs",
		"lint:js": "npx eslint './src/.mjs' --fix && npx eslint './demo/.mjs' --fix",
		"lint:css": "cp ./src/dark-mode-toggle.mjs ./src/dark-mode-toggle.html && npx stylelint './src/.html' --fix && cp ./src/dark-mode-toggle.html ./src/dark-mode-toggle.mjs && rm ./src/dark-mode-toggle.html && npx stylelint './demo/.css' --fix",
		"lint:css": "cp ./src/template-contents.tpl ./src/template-contents.html && npx stylelint './src/.html' --fix && cp ./src/template-contents.html ./src/template-contents.tpl && rm ./src/template-contents.html && npx stylelint './demo/.css' --fix",
		"lint": "npm run lint:js && npm run lint:css",
		@@ -20,0 +20,0 @@ "build": "npm run clean && npx terser ./src/dark-mode-toggle.mjs -m toplevel=true --comments /@license/ --ecma=8 -o ./dist/dark-mode-toggle.min.mjs",

README.md

		@@ -36,3 +36,3 @@ # `<dark-mode-toggle>` Element
		```html
		<script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
		<script type="module" src="https://unpkg.com/dark-mode-toggle"></script>
		```
		@@ -84,3 +84,3 @@
		```html
		<!-- In the `<head>`
		<!-- In the `<head>`
		<link rel="stylesheet" href="common.css">
		@@ -110,3 +110,3 @@ <link rel="stylesheet" href="light.css" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)">

		### ② Using a CSS class that you toggle
		### ② Using a CSS class that you toggle

		@@ -239,2 +239,25 @@ If you prefer to not split your CSS in different files based on the color scheme,

		## Hacking on `<dark-mode-toggle>`

		The core custom element code lives in
		[`src/dark-mode-toggle.mjs`](https://github.com/GoogleChromeLabs/dark-mode-toggle/blob/master/src/dark-mode-toggle.mjs).
		You can start hacking and testing your changes by running `npm run start`
		and then navigating to <http://localhost:8080/demo/>.
		No build step required 🎉, this happens automatically upon `npm publish`ing.
		If for whatever reason you want to build locally, run `npm run build`.
		You can lint by running `npm run lint`.

		The HTML and the CSS used by `<dark-mode-toggle>` is hard-coded as a template literal
		in the file `src/dark-mode-toggle.mjs`.
		For optimal performance, the contents of this literal are hand-minified.
		If you need to tweak the HTML or the CSS, find the unminified template literal contents
		in `src/template-contents.tpl` and copy them over to `src/dark-mode-toggle.mjs`.
		Once your changes are done, commit them to both the `*.tpl` file (in unminified form)
		and the `*.mjs` file (in minified form).

		(This is actually just making a strong argument for
		[CSS Modules](https://github.com/w3c/webcomponents/issues/759) and
		[HTML Modules](https://github.com/w3c/webcomponents/issues/645)
		that would allow for proper tools integration).

		## Notes
		@@ -241,0 +264,0 @@

dist/dark-mode-toggle.min.mjs

Sorry, the diff of this file is not supported yet

src/dark-mode-toggle.mjs

Sorry, the diff of this file is not supported yet

dark-mode-toggle - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics