theme-change - npm Package Compare versions

		{
		"name": "theme-change",
		"version": "2.2.0",
		"version": "2.3.0",
		"description": "Change CSS theme with toggle, buttons or select using CSS Variables and localStorage",
		@@ -5,0 +5,0 @@ "keywords": [

126

README.md

		@@ -24,3 +24,3 @@ # 🎨 CSS Theme Change

		```
		```html
		<script src="https://cdn.jsdelivr.net/npm/theme-change@2.0.2/index.js"></script>
		@@ -62,3 +62,3 @@ ```
		<summary>
		or if it's a Vue 3 project:
		or if it's a Vue 3 project (using composition API):
		</summary>
		@@ -69,3 +69,3 @@
		```js
		import { onMounted, onUpdated, onUnmounted } from 'vue'
		import { onMounted } from 'vue'
		import { themeChange } from 'theme-change'
		@@ -85,3 +85,3 @@
		<summary>
		or if it's a Vue 2 project:
		or if it's a Vue 2 project (using options API):
		</summary>
		@@ -121,3 +121,119 @@
		</details>
		<details>
		<summary>
		or if it's a SolidJS project:
		</summary>

		Install: `npm i theme-change --save` and use it in your js/jsx/tsx file:

		```js
		import { onMount } from 'solid-js'
		import { themeChange } from 'theme-change'
		onMount(async () => {
		themeChange();
		})
		```


		</details>
		<details>
		<summary>
		or if it's a Astro project:
		</summary>

		Install: `npm i theme-change --save` and use it in your .astro file(s):

		Astro is a bit tricky because of how is rendering html page as a MPA (Multiple Pages Application)
		Astro projects are therefore subject to [FART](https://css-tricks.com/flash-of-inaccurate-color-theme-fart/) problem. To prevent this we will use the [is:inline](https://docs.astro.build/en/reference/directives-reference/#isinline) astro directive.

		If you want to apply themes on a single [astro page](https://docs.astro.build/en/core-concepts/astro-pages/) (remember Astro is an MPA framework) :

		`src/pages/mypage.astro`

		```js
		---
		---

		<html lang="en">
		<head>
		<script is:inline>
		// ☝️ This script prevent the FART effect.
		if (localStorage.getItem("theme") === null) {
		document.documentElement.setAttribute("data-theme", "light");
		} else
		document.documentElement.setAttribute("data-theme",localStorage.getItem("theme"));
		// "theme" LocalStorage value is set by the package to remember user preference.
		// The value is checked and applyed before rendering anything.
		</script>
		<script>
		import { themeChange } from "theme-change";
		themeChange();
		// 👆 you could import the CDN directly instead of these two lines
		</script>
		<title>My crazy credit page</title>
		</head>
		<body>
		<h1>Welcome to my credit page!</h1>
		</body>
		</html>
		```

		If you want to apply themes to all your [astro pages](https://docs.astro.build/en/core-concepts/astro-pages/), you need to execute both scripts in a Astro [layout](https://docs.astro.build/en/core-concepts/layouts/#sample-layout), it would need to wrap all your astro pages like so:

		`src/layouts/MyCrazyLayout.astro`

		```html
		---
		---

		<html lang="en">
		<head>
		<script is:inline>
		// ☝️ This script prevent the FART effect.
		if (localStorage.getItem("theme") === null) {
		document.documentElement.setAttribute("data-theme", "light");
		} else
		document.documentElement.setAttribute(
		"data-theme",
		localStorage.getItem("theme")
		);
		// "theme" LocalStorage value is set by the package to remember user preference.
		// The value is checked and applyed before rendering anything.
		</script>
		<script>
		import { themeChange } from 'theme-change';
		themeChange();
		// 👆 you could import the CDN directly instead of these two lines
		</script>
		<meta charset="utf-8" />
		<title>My Cool Astro Layout Wraping All My Pages</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		</head>
		<body>
		<nav>
		<a href="#">Home</a>
		<a href="#">Posts</a>
		<a href="#">Contact</a>
		</nav>
		<article>
		<slot />
		<!-- your content from src/pages/index.astro is injected here -->
		</article>
		</body>
		</html>
		```

		`src/pages/index.astro`

		```js
		---
		import MyCrazyLayout from '../layouts/MyCrazyLayout.astro';
		---
		<MySiteLayout>
		<p>My page content, wrapped in a layout!</p>
		</MySiteLayout>
		```

		</details>

		## CSS
		@@ -193,3 +309,3 @@

		```
		```css
		@media (prefers-color-scheme: dark){
		@@ -196,0 +312,0 @@ :root{

Improved metrics