update color theme in demo.

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

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