update color theme in demo.

save current theme preference to localstorage.
update to v0.10.0.

README.md

@@ -58,7 +58,7 @@ A function that takes the constituent parts of a "twt" and generates an
 [extension-compatible hash](https://twtxt.dev/exts/twt-hash.html) for it, which is then returned.
 
 Version 0.10.0 and above includes support for
-[V2 of the Hashing Spec](https://git.mills.io/yarnsocial/twtxt.dev/pulls/28):
+[V2 of the Hashing Spec](https://twtxt.dev/exts/twt-hash-v2.html):
 
 - A specific hashing version can be provided as an optional argument.
 - When no version argument is provided, it defaults to using version 1 for all twts with a created

dist-demo/demo/styles.css

@@ -11,6 +11,7 @@
     --link-active: lch(from var(--main-link) calc(l + 20) c h);
 
     --gray-light: #5F758E;
+    --gray-dark: #404f60;
 }
 
 @keyframes riseInDetails {
@@ -59,9 +60,10 @@ a:active {
 }
 
 a:hover {
+    background-color: var(--link-active);
     border-color: var(--link-active);
     border-radius: .5rem;
-    color: var(--link-active);
+    color: var(--bg-main);
 }
 
 button {
@@ -77,6 +79,7 @@ code {
 }
 
 details figure {
+    background-color: transparent;
     margin: 1rem .5rem;
 }
 
@@ -141,6 +144,8 @@ textarea {
 summary {
     cursor: pointer;
 }
+
+/** Classes */
  
 .code-cmd {
     color: var(--gray-light);
@@ -218,6 +223,10 @@ summary {
     padding: 0;
 }
 
+.tab:target .tab-link {
+    background-color: var(--bg-main);
+}
+
 .tab:target .tab-panel {
     display: block;
 }
@@ -226,10 +235,6 @@ body:not(:has(:target)) #tabOverview-panel {
     display: block;
 }
 
-.tab:target .tab-link {
-    background: linear-gradient(var(--bg-dark), var(--bg-main));
-}
-
 .tab:target + .tab {
     margin-top: auto;
 }
@@ -317,7 +322,7 @@ body:not(:has(:target)) #tabOverview-link {
     }
 
     .tab-link {
-        background-color: transparent;;
+        background-color: transparent;
         border: 2px solid var(--fg-main);
         border-bottom-color: transparent;
         margin-top: -4.5rem;
@@ -358,15 +363,15 @@ body:not(:has(:target)) #tabOverview-link {
     }
 
     .tab:target .tab-link {
+        background-color: var(--bg-main);
         border-bottom: 0;
         font-size: 1.2rem;
         margin-top: -4.55rem;
     }
 
     .tab:target .tab-link:hover {
+        background-color: var(--link-active);
         border-radius: .5rem .5rem 0 0;
-        background-color: var(--bg-dark);
-        color: var(--main-link);
         font-size: 1.2rem;
         margin-top: -4.55rem;
     }
@@ -411,19 +416,27 @@ body.invertedTheme {
     color: var(--bg-main);
 }
 
+body.invertedTheme a {
+    color: var(--gray-dark);
+}
+
 body.invertedTheme a:hover {
-    background-color: var(--main-link);
+    background-color: var(--bg-dark);
     border-color: var(--bg-dark);
     color: var(--fg-main);
 }
 
+body.invertedTheme code {
+    background-color: var(--bg-light);
+    color:  var(--bg-main);
+}
 
 body.invertedTheme figcaption {
     border-color: var(--bg-main);
 }
 
 body.invertedTheme figure {
-    background-color: var(--gray-light);
+    background-color: transparent;
     border-color: var(--bg-main);
 }
 
@@ -442,27 +455,33 @@ body.invertedTheme .code-cmd {
     color: var(--bg-dark);
 }
 
+body.invertedTheme .code-cmnt {
+    color: var(--bg-dark);
+}
+
+
 body.invertedTheme .code-str {
     color: var(--bg-dark);
 }
 
 body.invertedTheme .tab-link {
-    color: var(--bg-dark);
     background-color: var(--fg-main);
     border-color: var(--bg-main);
 }
 
-body.invertedTheme .tab:target .tab-link {
-    background: linear-gradient(var(--link-active), var(--fg-main));
-}
-
 body.invertedTheme .tab-link:hover {   
-    background-color: var(--main-link);
+    background-color: var(--bg-dark);
     border-color: var(--bg-dark);
 }
 
 body.invertedTheme .tab:target .tab-link {
+    background-color: var(--fg-main);
     border-color: var(--bg-main);
+    border-color: var(--bg-main);
+}
+
+body.invertedTheme .tab:target .tab-link:hover {   
+    background-color: var(--bg-dark);
 }
 
 body.invertedTheme .tab-panel {

dist-demo/demo/theme-toggle.js

@@ -8,6 +8,11 @@ document.addEventListener("DOMContentLoaded", () => {
 
 	toggle.addEventListener("click", () => {
 		document.body.classList.toggle("invertedTheme");
+
+		localStorage.setItem(
+			"useInvertedTheme",
+			document.body.classList.contains("invertedTheme") ? "true" : "",
+		);
 	});
 
 	toggle.innerHTML = `
@@ -28,6 +33,9 @@ document.addEventListener("DOMContentLoaded", () => {
     `.trim();
 
 	document.body.appendChild(toggle);
+
+	if (!!localStorage.getItem("useInvertedTheme"))
+		document.body.classList.add("invertedTheme");
 });
 
 // @license-end

dist-demo/index.html

@@ -171,7 +171,7 @@
 
 					<p>
 						Version 0.10.0 and above includes support for
-						<a href="https://git.mills.io/yarnsocial/twtxt.dev/pulls/28">V2 of the
+						<a href="https://twtxt.dev/exts/twt-hash-v2.html">V2 of the
 							Hashing Spec</a>:
 
 						<ul>

index.html

@@ -171,7 +171,7 @@
 
 					<p>
 						Version 0.10.0 and above includes support for
-						<a href="https://git.mills.io/yarnsocial/twtxt.dev/pulls/28">V2 of the
+						<a href="https://twtxt.dev/exts/twt-hash-v2.html">V2 of the
 							Hashing Spec</a>:
 
 						<ul>

jsr.json

@@ -1,6 +1,6 @@
 {
   "name": "@itsericwoodward/twtxt-lib",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "license": "MIT",
   "exports": "./src/index.ts"
 }

package.json

@@ -1,11 +1,11 @@
 {
   "name": "twtxt-lib",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "An isomorphic TypeScript library of utility functions for parsing and interacting with twtxt.txt files.",
   "license": "MIT",
   "author": {
     "name": "Eric Woodward",
-    "email": "hey@itsericwoodward.com",
+    "email": "codemaster@itsericwoodward.com",
     "url": "https://www.itsericwoodward.com"
   },
   "repository": {

public/demo/styles.css

@@ -11,6 +11,7 @@
     --link-active: lch(from var(--main-link) calc(l + 20) c h);
 
     --gray-light: #5F758E;
+    --gray-dark: #404f60;
 }
 
 @keyframes riseInDetails {
@@ -59,9 +60,10 @@ a:active {
 }
 
 a:hover {
+    background-color: var(--link-active);
     border-color: var(--link-active);
     border-radius: .5rem;
-    color: var(--link-active);
+    color: var(--bg-main);
 }
 
 button {
@@ -77,6 +79,7 @@ code {
 }
 
 details figure {
+    background-color: transparent;
     margin: 1rem .5rem;
 }
 
@@ -141,6 +144,8 @@ textarea {
 summary {
     cursor: pointer;
 }
+
+/** Classes */
  
 .code-cmd {
     color: var(--gray-light);
@@ -218,6 +223,10 @@ summary {
     padding: 0;
 }
 
+.tab:target .tab-link {
+    background-color: var(--bg-main);
+}
+
 .tab:target .tab-panel {
     display: block;
 }
@@ -226,10 +235,6 @@ body:not(:has(:target)) #tabOverview-panel {
     display: block;
 }
 
-.tab:target .tab-link {
-    background: linear-gradient(var(--bg-dark), var(--bg-main));
-}
-
 .tab:target + .tab {
     margin-top: auto;
 }
@@ -317,7 +322,7 @@ body:not(:has(:target)) #tabOverview-link {
     }
 
     .tab-link {
-        background-color: transparent;;
+        background-color: transparent;
         border: 2px solid var(--fg-main);
         border-bottom-color: transparent;
         margin-top: -4.5rem;
@@ -358,15 +363,15 @@ body:not(:has(:target)) #tabOverview-link {
     }
 
     .tab:target .tab-link {
+        background-color: var(--bg-main);
         border-bottom: 0;
         font-size: 1.2rem;
         margin-top: -4.55rem;
     }
 
     .tab:target .tab-link:hover {
+        background-color: var(--link-active);
         border-radius: .5rem .5rem 0 0;
-        background-color: var(--bg-dark);
-        color: var(--main-link);
         font-size: 1.2rem;
         margin-top: -4.55rem;
     }
@@ -411,19 +416,27 @@ body.invertedTheme {
     color: var(--bg-main);
 }
 
+body.invertedTheme a {
+    color: var(--gray-dark);
+}
+
 body.invertedTheme a:hover {
-    background-color: var(--main-link);
+    background-color: var(--bg-dark);
     border-color: var(--bg-dark);
     color: var(--fg-main);
 }
 
+body.invertedTheme code {
+    background-color: var(--bg-light);
+    color:  var(--bg-main);
+}
 
 body.invertedTheme figcaption {
     border-color: var(--bg-main);
 }
 
 body.invertedTheme figure {
-    background-color: var(--gray-light);
+    background-color: transparent;
     border-color: var(--bg-main);
 }
 
@@ -442,27 +455,33 @@ body.invertedTheme .code-cmd {
     color: var(--bg-dark);
 }
 
+body.invertedTheme .code-cmnt {
+    color: var(--bg-dark);
+}
+
+
 body.invertedTheme .code-str {
     color: var(--bg-dark);
 }
 
 body.invertedTheme .tab-link {
-    color: var(--bg-dark);
     background-color: var(--fg-main);
     border-color: var(--bg-main);
 }
 
-body.invertedTheme .tab:target .tab-link {
-    background: linear-gradient(var(--link-active), var(--fg-main));
-}
-
 body.invertedTheme .tab-link:hover {   
-    background-color: var(--main-link);
+    background-color: var(--bg-dark);
     border-color: var(--bg-dark);
 }
 
 body.invertedTheme .tab:target .tab-link {
+    background-color: var(--fg-main);
     border-color: var(--bg-main);
+    border-color: var(--bg-main);
+}
+
+body.invertedTheme .tab:target .tab-link:hover {   
+    background-color: var(--bg-dark);
 }
 
 body.invertedTheme .tab-panel {

public/demo/theme-toggle.js

@@ -8,6 +8,11 @@ document.addEventListener("DOMContentLoaded", () => {
 
 	toggle.addEventListener("click", () => {
 		document.body.classList.toggle("invertedTheme");
+
+		localStorage.setItem(
+			"useInvertedTheme",
+			document.body.classList.contains("invertedTheme") ? "true" : "",
+		);
 	});
 
 	toggle.innerHTML = `
@@ -28,6 +33,9 @@ document.addEventListener("DOMContentLoaded", () => {
     `.trim();
 
 	document.body.appendChild(toggle);
+
+	if (!!localStorage.getItem("useInvertedTheme"))
+		document.body.classList.add("invertedTheme");
 });
 
 // @license-end