diff --git a/apps/docs/docs.html b/apps/docs/docs.html
index 795c283..5f686d8 100644
--- a/apps/docs/docs.html
+++ b/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>
diff --git a/apps/docs/install.html b/apps/docs/install.html
index 8f26695..6ba874e 100644
--- a/apps/docs/install.html
+++ b/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}}
diff --git a/apps/docs/main.js b/apps/docs/main.js
index cb2080c..91684f4 100644
--- a/apps/docs/main.js
+++ b/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;
 		});
 	}
 
diff --git a/packages/main/src/_variables.scss b/packages/main/src/_variables.scss
index 9934234..8f4e7c4 100644
--- a/packages/main/src/_variables.scss
+++ b/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);
 }
diff --git a/packages/main/src/compoments/_button.scss b/packages/main/src/compoments/_button.scss
index c34879f..c9d8cd2 100644
--- a/packages/main/src/compoments/_button.scss
+++ b/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);
 	}
diff --git a/packages/main/src/compoments/_index.scss b/packages/main/src/compoments/_index.scss
index 976d7f9..1061e01 100644
--- a/packages/main/src/compoments/_index.scss
+++ b/packages/main/src/compoments/_index.scss
@@ -13,3 +13,4 @@
 @use "table";
 @use "form";
 @use "blog";
+@use "tabs";
diff --git a/packages/main/src/compoments/_tabs.scss b/packages/main/src/compoments/_tabs.scss
new file mode 100644
index 0000000..85f74de
--- /dev/null
+++ b/packages/main/src/compoments/_tabs.scss
@@ -0,0 +1,25 @@
+[role="tablist"] {
+	display: flex;
+	gap: 0;
+	margin-bottom: 1rem;
+	border-radius: 0.75rem;
+	background: var(--background-secondary);
+	padding: 0.25rem;
+	width: 100%;
+}
+
+[role="tab"] {
+	flex: 1 1 0;
+	cursor: pointer;
+	border: none;
+	border-radius: 0.5rem;
+	background: none;
+	background: transparent;
+	padding: 0.75em 0;
+	color: var(--color-muted);
+
+	&[aria-selected="true"] {
+		background: var(--background-primary);
+		color: var(--color-primary);
+	}
+}