Closes Data-theme global setting not work #52

Closes Dropdown arrow position issue - v2.2.9 #53

Releases for 2.2.10

Author: Yohn

README.md

@@ -50,21 +50,22 @@ With just the right amount of everything, Pico is great starting point for a cle
 ## Table of contents
 
 1. [Yohns Updated Version](#yohns-updated-version)
-2. [Minimal CSS Framework for Semantic HTML](#minimal-css-framework-for-semantic-html)
-3. [What’s new in v2?](#whats-new-in-v2)
-4. [A Superpowered HTML Reset](#a-superpowered-html-reset)
-5. [Table of contents](#table-of-contents)
-6. [Quick start](#quick-start)
+2. [Extras Built on top of PicoCSS](#extras-built-on-top-of-picocss)
+3. [Minimal CSS Framework for Semantic HTML](#minimal-css-framework-for-semantic-html)
+4. [What’s new in v2?](#whats-new-in-v2)
+5. [A Superpowered HTML Reset](#a-superpowered-html-reset)
+6. [Table of contents](#table-of-contents)
+7. [Quick start](#quick-start)
    1. [Install manually](#install-manually)
    2. [Usage from CDN](#usage-from-cdn)
    3. [Install with NPM](#install-with-npm)
    4. [Starter HTML template](#starter-html-template)
-7. [Class-less version](#class-less-version)
-8. [Limitations](#limitations)
-9. [Documentation](#documentation)
-10. [Browser Support](#browser-support)
-11. [Contributing](#contributing)
-12. [Copyright and license](#copyright-and-license)
+8. [Class-less version](#class-less-version)
+9. [Limitations](#limitations)
+10. [Documentation](#documentation)
+11. [Browser Support](#browser-support)
+12. [Contributing](#contributing)
+13. [Copyright and license](#copyright-and-license)
 
 ## Quick start
 
@@ -83,7 +84,7 @@ There are 4 ways to get started with pico.css:
 Alternatively, you can use [jsDelivr CDN](https://www.jsdelivr.com/package/npm/@yohns/picocss) to link pico.css.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.9/css/pico.min.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.min.css" />
 ```
 
 ### Install with NPM
@@ -141,7 +142,7 @@ Use the default `.classless` version if you need centered viewports:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.9/css/pico.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.classless.min.css"
 />
 ```
 
@@ -150,7 +151,7 @@ Or use the `.fluid.classless` version if you need a fluid container:
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.9/css/pico.fluid.classless.min.css"
+  href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.fluid.classless.min.css"
 />
 ```
 
@@ -165,7 +166,7 @@ Then just write pure HTML, and it should look great:
     <meta name="color-scheme" content="light dark" />
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.9/css/pico.classless.min.css"
+      href="https://cdn.jsdelivr.net/npm/@yohns/picocss@2.2.10/css/pico.classless.min.css"
     />
     <title>Hello, world!</title>
   </head>

docs/index.html

@@ -106,8 +106,7 @@
 							And then you'll need the js located at: js/SwitchColorMode.js
 						-->
 						<label>
-							<input aria-label="Toggle Light or Dark Mode" name="color-mode-toggle" value="1" type="checkbox"
-								role="switch">
+							<input aria-label="Toggle Light or Dark Mode" name="color-mode-toggle" value="1" type="checkbox" role="switch">
 						</label>
 					</div>
 					<!--<details class="dropdown">
@@ -187,6 +186,7 @@
 					<aside>
 						<nav>
 							<ul>
+								<li><a href="#color-mode-toggle">Color Mode Switch</a></li>
 								<li><a href="#tables">Tables</a></li>
 								<li><a href="#tabs">Tabs [role=tablist]</a></li>
 								<li><a href="#hamburger-menu">Hamburger Menu</a></li>
@@ -216,7 +216,7 @@
 			<main class="col-12 col-md-9 col-lg-10">
 				<article>
 					<header>
-						<h2>Yohns PicoCSS Fork v2.2.9</h2>
+						<h2>Yohns PicoCSS Fork v2.2.10</h2>
 					</header>
 					<p>I've merged some open pull requests from the <a href="https://github.com/picocss/pico">original Pico</a>
 						repository, and then added a few more enhancements that I either needed for a project (timeline) or wanted
@@ -230,13 +230,32 @@ <h2>Yohns PicoCSS Fork v2.2.9</h2>
 							href="https://github.com/Yohn/PicoCSS/tree/main/docs/js">Vanilla JavaScript Files</a> to work the same as
 						the preview here. I may get a build script going to compile the javascript plugins / components later. Let
 						me know if this feature would help you.</p>
-					<hr>
-					<h3>&lt;details class="hide-arrow"&gt;</h3>
-					<p>With classes enabled, adding the <code>hide-arrow</code> class to your <code>&lt;details class="hide-arrow"&gt;</code> will hide the arrow on the <code>&lt;summary&gt;</code> tag within the accordion and dropdown components.</p>
-
 					<footer>If this fork has helped you, please <a href="https://github.com/Yohn/PicoCSS">Like</a> this fork!
 					</footer>
 				</article>
+				<article id="color-mode-toggle">
+					<header>
+						<h2>Color Mode Switch</h2>
+						<h6 class="fw-n">Classless!</h6>
+					</header>
+
+					<div class="grid" style="justify-items: center;">
+						<label>Example:</label>
+						<label>
+							<input aria-label="Toggle Light or Dark Mode" name="color-mode-toggle" value="1" type="checkbox" role="switch">
+						</label>
+					</div>
+					<small class="pt-1" style="text-align: center; display: block;">Only the first switch on the page change the color mode currently. You can tap the other side on the left side abover the navbar to see the color modes change.</small>
+					<hr class="m-0">
+					<p>You will need to include the <a href="js/SwitchColorMode.js">SwitchColorMode.js</a> javascript at the end of your <code>&lt;body&gt;</code> tag.</p>
+					<p>For the switch itself, you really need to ensure the <code>name</code> and the <code>role</code> attributes are found, with the same values.</p>
+					<pre><code class="language-html">&lt;label&gt;
+	&lt;input name="color-mode-toggle" role="switch" type="checkbox" value="1" aria-label="Toggle Light or Dark Mode"&gt;
+&lt;/label&gt;</code></pre>
+					<p>Do not change the <code>name="color-mode-toggle"</code></p>
+					<p>You can assign the default color mode for new visitors by adding <code>data-theme="dark"</code> to your <code>&lt;html&gt;</code> tag. The value can be 1 of the following: <code>dark</code>, <code>light</code>, <code>auto</code>. If auto is set, it will default to the viewers prefered color mode.</p>
+					<p>Color modes are saved across page loads.</p>
+				</article>
 				<hr>
 				<article id="tables">
 					<header>
@@ -933,7 +952,7 @@ <h2>Rows</h2>
 					<p>
 						<code>.row</code> has a max width set to the viewport of your <code>xl</code> viewport (1300px by default)
 					</p>
-					<code>.row-fluid</code> max width is 100%. </>
+					<code>.row-fluid</code> max width is 100%. </a>
 					<div class="row-fluid">
 						<div class="col-3">
 							<article style="background-color:var(--pico-primary-background); color:var(--pico-primary-inverse);">col-3
@@ -1182,6 +1201,9 @@ <h2>Popover</h2>
 					<header>
 						<h2>Accordions</h2>
 					</header>
+					<h3>&lt;details class="hide-arrow"&gt;</h3>
+					<p>With classes enabled, adding the <code>hide-arrow</code> class to your <code>&lt;details class="hide-arrow"&gt;</code> will hide the arrow on the <code>&lt;summary&gt;</code> tag within the accordion and dropdown components.</p>
+					<hr>
 					<details name="example-accordion">
 						<summary>Accordion 1</summary>
 						<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam, tincidunt nec porta
@@ -1641,7 +1663,7 @@ <h3>Modal with a Form!</h3>
 			function changeTheme(newTheme) {
 				const linkElement = document.getElementById('theme-color-ss');
 				if (linkElement) {
-					linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.9/css/pico.' + newTheme + '.min.css');
+					linkElement.setAttribute('href', 'https://cdn.jsdelivr.net/gh/Yohn/PicoCSS@2.2.10/css/pico.' + newTheme + '.min.css');
 				}
 			}
 

docs/js/SwitchColorMode.js

@@ -2,7 +2,7 @@
  * Minimal theme switcher using a checkbox
  *
  * Pico.css - https://picocss.com
- * Copyright 2019-2024 - Licensed under MIT
+ * Copyright 2019-2025 - Licensed under MIT
  * Modified by Yohn https://github.com/Yohn/PicoCSS
  */
 
@@ -20,29 +20,33 @@ const SwitchColorMode = {
 			console.error("Theme switcher toggle not found");
 			return;
 		}
-		this.scheme = this.schemeFromLocalStorage;
-		this.initToggle();
+
+		// If first visit, use the theme from <html> attribute; otherwise, use stored preference
+		this.scheme = this.schemeFromLocalStorage ?? this.schemeFromHTML;
+
+		// Set checkbox state based on the applied theme
+		this.checkbox.checked = this.scheme === "dark";
+
+		// Listen for user changes
+		this.checkbox.addEventListener("change", () => {
+			this.scheme = this.checkbox.checked ? "dark" : "light";
+			this.schemeToLocalStorage();
+		});
 	},
 
 	// Get color scheme from local storage
 	get schemeFromLocalStorage() {
-		return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme;
+		return window.localStorage?.getItem(this.localStorageKey);
 	},
 
-	// Preferred color scheme
-	get preferredColorScheme() {
-		return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+	// Get the default theme from the <html> attribute
+	get schemeFromHTML() {
+		return document.documentElement.getAttribute(this.rootAttribute) ?? "auto";
 	},
 
-	// Initialize the toggle switch
-	initToggle() {
-		// Set initial checkbox state based on the current scheme
-		this.checkbox.checked = this.scheme === "dark";
-
-		// Listen for changes to the checkbox
-		this.checkbox.addEventListener("change", () => {
-			this.scheme = this.checkbox.checked ? "dark" : "light";
-		});
+	// Preferred color scheme from system
+	get preferredColorScheme() {
+		return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 	},
 
 	// Set scheme
@@ -53,7 +57,6 @@ const SwitchColorMode = {
 			this._scheme = scheme;
 		}
 		this.applyScheme();
-		this.schemeToLocalStorage();
 	},
 
 	// Get scheme
@@ -63,7 +66,7 @@ const SwitchColorMode = {
 
 	// Apply scheme
 	applyScheme() {
-		document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme);
+		document.documentElement.setAttribute(this.rootAttribute, this._scheme);
 	},
 
 	// Store scheme to local storage
@@ -73,4 +76,4 @@ const SwitchColorMode = {
 };
 
 // Init
-SwitchColorMode.init();
+SwitchColorMode.init();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yohns/picocss",
-  "version": "2.2.9",
+  "version": "2.2.10",
   "description": "Minimal CSS Framework for semantic HTML, updated with enhanced capabilities.",
   "authors": [
     {

scss/helpers/_copyright.scss

@@ -1,4 +1,4 @@
 /*!
- * Pico CSS ✨ v2.2.9 (https://github.com/Yohn/PicoCSS)
+ * Pico CSS ✨ v2.2.10 (https://github.com/Yohn/PicoCSS)
  * Copyright 2019-2025 - Licensed under MIT
  */