Refactor theming to use CSS color-scheme

- Replace data-theme attributes with standard CSS color-scheme property
- Switch to light-dark() function for theme variables
- Use semantic aria-label attributes for button styling

Author: TorstenDittmann

apps/docs/docs.html

@@ -131,6 +131,14 @@ <h6>Heading 6</h6>
 			</figcaption>
 		</figure>
 	</section>
+	<section>
+		<div role="tablist">
+			<button role="tab" aria-selected="true">Tab 1</button>
+			<button role="tab">Tab 2</button>
+			<button role="tab">Tab 3</button>
+			<button role="tab">Tab 4</button>
+		</div>
+	</section>
 	<section>
 		<div role="grid">
 			<div>Grid 1</div>
@@ -274,7 +282,13 @@ <h2>Form elements</h2>
 					Switch
 				</label>
 			</fieldset>
-			<button type="reset" class="secondary">Reset</button>
+			<button type="button" aria-label="cancel action">
+				Cancel button
+			</button>
+			<button type="button" aria-label="delete resource">
+				Danger button
+			</button>
+			<button type="reset">Reset</button>
 			<button type="submit" onclick="event.preventDefault()">
 				Submit
 			</button>

apps/docs/install.html

@@ -31,19 +31,18 @@ <h3>Basic Setup</h3>
 	<section id="themes-layouts">
 		<h2>Themes</h2>
 		<p>
-			launch.css supports light and dark themes with seamless switching:
+			launch.css supports light and dark themes with seamless switching
+			using <code>color-scheme</code> css properties:
 		</p>
 
 		<div>
-			<button data-theme-switcher="light">Light</button>
-			<button data-theme-switcher="dark">Dark</button>
+			<button data-theme-switcher="only light">Light</button>
+			<button data-theme-switcher="only dark">Dark</button>
 		</div>
 
 		<h4>Theme Switching Code</h4>
-		<pre
-		><code class="language-html">&lt;html data-theme="dark"&gt;</code></pre>
-		<pre
-		><code class="language-html">&lt;html data-theme="light"&gt;</code></pre>
+		<pre><code class="language-css">color-scheme: only dark;</code></pre>
+		<pre><code class="language-css">color-scheme: only light;</code></pre>
 	</section>
 </main>
 {{/base}}

apps/docs/main.js

@@ -4,21 +4,20 @@ import "htmx-ext-preload";
 import "highlight.js/styles/github-dark.css";
 import hljs from "highlight.js/lib/core";
 import bash from "highlight.js/lib/languages/bash";
+import css from "highlight.js/lib/languages/css";
 import javascript from "highlight.js/lib/languages/javascript";
 import html from "highlight.js/lib/languages/xml";
 
 hljs.registerLanguage("html", html);
 hljs.registerLanguage("bash", bash);
+hljs.registerLanguage("css", css);
 hljs.registerLanguage("javascript", javascript);
 
 function on_mount() {
 	hljs.highlightAll();
 	for (const element of document.querySelectorAll("[data-theme-switcher]")) {
 		element.addEventListener("click", () => {
-			document.documentElement.setAttribute(
-				"data-theme",
-				element.dataset.themeSwitcher,
-			);
+			document.documentElement.style.colorScheme = element.dataset.themeSwitcher;
 		});
 	}
 

packages/main/src/_variables.scss

@@ -1,25 +1,13 @@
-html {
-	--border: #27272a;
-	--color: #fafafa;
-	--color-primary: #09090b;
-	--color-secondary: #fafafa;
-	--color-danger: #fafafa;
-	--color-muted: #a1a1aa;
-	--background: #09090b;
-	--background-primary: #fafafa;
-	--background-secondary: #27272a;
-	--background-danger: #7f1d1d;
-
-	&[data-theme="light"] {
-		--border: #d4d4d8;
-		--color: #09090b;
-		--color-primary: #fafafa;
-		--color-secondary: #09090b;
-		--color-danger: #09090b;
-		--color-muted: #71717a;
-		--background: #fafafa;
-		--background-primary: #09090b;
-		--background-secondary: #e4e4e7;
-		--background-danger: #fee2e2;
-	}
+:root {
+	color-scheme: light dark;
+	--border: light-dark(#d4d4d8, #27272a);
+	--color: light-dark(#09090b, #fafafa);
+	--color-primary: light-dark(#fafafa, #09090b);
+	--color-secondary: light-dark(#09090b, #fafafa);
+	--color-danger: light-dark(#09090b, #fafafa);
+	--color-muted: light-dark(#71717a, #a1a1aa);
+	--background: light-dark(#fafafa, #09090b);
+	--background-primary: light-dark(#09090b, #fafafa);
+	--background-secondary: light-dark(#e4e4e7, #27272a);
+	--background-danger: light-dark(#fee2e2, #7f1d1d);
 }

packages/main/src/compoments/_button.scss

@@ -20,12 +20,20 @@ button,
 	text-decoration: none;
 	white-space: nowrap;
 
-	&.secondary {
+	&[aria-label*="cancel"],
+	&[aria-label*="back"],
+	&[aria-label*="close"],
+	&[type="reset"] {
 		background-color: var(--background-secondary);
 		color: var(--color-secondary);
 	}
 
-	&.danger {
+	&[aria-label*="delete"],
+	&[aria-label*="remove"],
+	&[aria-label*="discard"],
+	&[aria-label*="erase"],
+	&[aria-label*="destroy"],
+	&[aria-label*="clear"] {
 		background-color: var(--background-danger);
 		color: var(--color-danger);
 	}

packages/main/src/compoments/_index.scss

@@ -13,3 +13,4 @@
 @use "table";
 @use "form";
 @use "blog";
+@use "tabs";