developit · developit · Feb 8, 2026 · Feb 8, 2026 · Feb 8, 2026 · Feb 8, 2026
diff --git a/demo/src/main.tsx b/demo/src/main.tsx
@@ -3,6 +3,7 @@ import './iconify.d.ts';
 import {render} from 'preact';
 import {LocationProvider, Router, Route, lazy, ErrorBoundary} from 'preact-iso';
 import 'iconify-icon';
+import {applyTheme, getInitialTheme} from './theme';
 
 const Home = lazy(() => import('./routes/home.tsx'));
 const GettingStarted = lazy(() => import('./routes/getting-started.tsx'));
@@ -24,6 +25,8 @@ function setViewportVars() {
 setViewportVars();
 window.visualViewport?.addEventListener('resize', setViewportVars);
 
+applyTheme(getInitialTheme());
+
 function loadStart() {
   document.body.classList.add('loading');
 }

diff --git a/demo/src/nav.tsx b/demo/src/nav.tsx
@@ -9,11 +9,20 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
 } from 'pui';
+import {useState} from 'preact/hooks';
+import {applyTheme, getInitialTheme, type DemoTheme} from './theme';
 
 export function Nav({
   class: className,
   left,
 }: {class?: string; left?: ComponentChildren}) {
+  const [theme, setTheme] = useState<DemoTheme>(() => getInitialTheme());
+  const toggleTheme = () => {
+    const nextTheme = theme === 'radix' ? 'default' : 'radix';
+    setTheme(nextTheme);
+    applyTheme(nextTheme);
+  };
+
   return (
     <NavigationMenu class={className ?? 'home-nav'}>
       {left}
@@ -29,6 +38,16 @@ export function Nav({
         <NavigationMenuItem>
           <NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
         </NavigationMenuItem>
+        <NavigationMenuItem>
+          <button
+            type="button"
+            class="theme-toggle"
+            onClick={toggleTheme}
+            aria-pressed={theme === 'radix'}
+          >
+            Theme: {theme === 'radix' ? 'Radix' : 'Default'}
+          </button>
+        </NavigationMenuItem>
         <NavigationMenuItem>
           <DropdownMenu>
             <DropdownMenuTrigger>

diff --git a/demo/src/style.css b/demo/src/style.css
@@ -81,6 +81,27 @@ body {
   margin-right: auto;
 }
 
+.theme-toggle {
+  border: 1px solid hsl(var(--p-border));
+  background-color: hsl(var(--p-background));
+  color: hsl(var(--p-foreground));
+  border-radius: 999px;
+  padding: 0.35rem 0.9rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+}
+
+.theme-toggle:hover {
+  background-color: hsl(var(--p-accent));
+  color: hsl(var(--p-accent-foreground));
+}
+
+[data-theme="radix"] .theme-toggle {
+  border-color: hsl(var(--p-primary) / 0.5);
+}
+
 .demo-app > [p="sidebar"] {
   top: 4rem;
   height: calc(100vh - 4rem);

diff --git a/demo/src/theme-radix.css b/demo/src/theme-radix.css
@@ -0,0 +1 @@
+@import "../../packages/pui-theme-radix/src/index.css";
diff --git a/demo/src/theme.ts b/demo/src/theme.ts
@@ -0,0 +1,35 @@
+import radixThemeCss from './theme-radix.css?inline';
+
+export type DemoTheme = 'default' | 'radix';
+
+const THEME_STORAGE_KEY = 'pui-demo-theme';
+const RADIX_STYLE_ID = 'pui-demo-radix-theme';
+
+export function getInitialTheme(): DemoTheme {
+  if (typeof window === 'undefined') return 'default';
+  const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
+  return stored === 'radix' ? 'radix' : 'default';
+}
+
+export function applyTheme(theme: DemoTheme) {
+  if (typeof document === 'undefined') return;
+  document.documentElement.dataset.theme = theme;
+  window.localStorage.setItem(THEME_STORAGE_KEY, theme);
+  if (theme === 'radix') {
+    ensureRadixThemeStyle();
+  } else {
+    removeRadixThemeStyle();
+  }
+}
+
+function ensureRadixThemeStyle() {
+  if (document.getElementById(RADIX_STYLE_ID)) return;
+  const style = document.createElement('style');
+  style.id = RADIX_STYLE_ID;
+  style.textContent = radixThemeCss;
+  document.head.appendChild(style);
+}
+
+function removeRadixThemeStyle() {
+  document.getElementById(RADIX_STYLE_ID)?.remove();
+}
diff --git a/packages/pui-theme-radix/package.json b/packages/pui-theme-radix/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "@pui/theme-radix",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build:tokens": "node src/build/gen-tokens.mjs",
+    "build:css": "postcss src/index.css -o dist/style.css",
+    "build": "pnpm build:tokens && pnpm build:css"
+  },
+  "devDependencies": {
+    "postcss": "^8.4.47",
+    "postcss-cli": "^11.0.0",
+    "postcss-import": "^16.1.0",
+    "postcss-nesting": "^13.0.1"
+  }
+}
diff --git a/packages/pui-theme-radix/postcss.config.cjs b/packages/pui-theme-radix/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'postcss-nesting': {},
+  },
+};
diff --git a/packages/pui-theme-radix/src/build/css/radix-entry.css b/packages/pui-theme-radix/src/build/css/radix-entry.css
@@ -0,0 +1 @@
+@import "../../radix-src/tokens/index.css";
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		@import "../../packages/pui-theme-radix/src/index.css";