developit · developit · Mar 1, 2026 · Mar 1, 2026 · Mar 1, 2026 · Mar 1, 2026
diff --git a/demo/src/main.tsx b/demo/src/main.tsx
@@ -20,6 +20,45 @@ const Chat = lazy(() => import('./routes/chat.tsx'));
 const Player = lazy(() => import('./routes/player.tsx'));
 const Dashboard = lazy(() => import('./routes/dashboard.tsx'));
 
+
+const DEMO_THEME_STORAGE_KEY = 'pui-demo-theme';
+
+function resolveDemoTheme(): 'mobile-native' | 'default' {
+  const params = new URLSearchParams(window.location.search);
+  const requested = params.get('theme');
+
+  const fromQuery =
+    requested === 'native-mobile' || requested === 'mobile-native'
+      ? 'mobile-native'
+      : requested === 'default'
+        ? 'default'
+        : null;
+
+  if (fromQuery) {
+    try {
+      localStorage.setItem(DEMO_THEME_STORAGE_KEY, fromQuery);
+    } catch {}
+    return fromQuery;
+  }
+
+  try {
+    return localStorage.getItem(DEMO_THEME_STORAGE_KEY) === 'mobile-native'
+      ? 'mobile-native'
+      : 'default';
+  } catch {
+    return 'default';
+  }
+}
+
+function applyDemoTheme() {
+  const theme = resolveDemoTheme();
+  if (theme === 'mobile-native') {
+    document.documentElement.dataset.theme = 'mobile-native';
+    return;
+  }
+  delete document.documentElement.dataset.theme;
+}
+
 function setViewportVars() {
   const vv = window.visualViewport;
   const vh = vv ? vv.height : window.innerHeight;
@@ -68,6 +107,7 @@ export async function prerender(data: {url: string}) {
 
 if (typeof window !== 'undefined') {
   setViewportVars();
+  applyDemoTheme();
   window.visualViewport?.addEventListener('resize', setViewportVars);
   hydrate(<App />, document.getElementById('app')!);
 }
diff --git a/demo/src/style.css b/demo/src/style.css
@@ -1,3 +1,4 @@
+@import "../../src/themes/mobile-native.css";
 @import "../../src/variables.css";
 @import "../../src/base.css";
 

diff --git a/demo/src/theme-customizer.tsx b/demo/src/theme-customizer.tsx
@@ -3,6 +3,9 @@ import {Dialog, Button, Label, toast, Collapsible, Tooltip} from 'pui';
 
 const CUSTOM_THEME_STORAGE_KEY = 'pui-custom-theme';
 const CUSTOM_THEME_STYLE_ID = 'pui-custom-style';
+const DEMO_THEME_STORAGE_KEY = 'pui-demo-theme';
+
+type DemoTheme = 'default' | 'mobile-native';
 
 /* ── hex→HSL helper ───────────────────────────────────────── */
 function hexToHsl(hex: string): [number, number, number] {
@@ -229,9 +232,19 @@ function applyCustomTheme(css: string) {
   document.head.appendChild(style);
 }
 
+function applyDemoTheme(theme: DemoTheme) {
+  if (theme === 'mobile-native') {
+    document.documentElement.dataset.theme = 'mobile-native';
+    return;
+  }
+  delete document.documentElement.dataset.theme;
+}
+
 try {
   const saved = localStorage.getItem(CUSTOM_THEME_STORAGE_KEY);
   if (saved) applyCustomTheme(saved);
+  const savedDemoTheme = localStorage.getItem(DEMO_THEME_STORAGE_KEY);
+  if (savedDemoTheme === 'mobile-native') applyDemoTheme('mobile-native');
 } catch {}
 
 /* ── Color swatch ─────────────────────────────────────────── */
@@ -263,6 +276,15 @@ function Swatch({color, selected, onClick, label}: {
 
 /* ── Main component ───────────────────────────────────────── */
 export function ThemeCustomizer() {
+  const [demoTheme, setDemoTheme] = useState<DemoTheme>(() => {
+    try {
+      return localStorage.getItem(DEMO_THEME_STORAGE_KEY) === 'mobile-native'
+        ? 'mobile-native'
+        : 'default';
+    } catch {
+      return 'default';
+    }
+  });
   const [settings, setSettings] = useState<ThemeSettings>(() => {
     try {
       const saved = localStorage.getItem(CUSTOM_THEME_STORAGE_KEY + '-settings');
@@ -271,6 +293,13 @@ export function ThemeCustomizer() {
     return {accentColor: 'blue', grayColor: 'slate', radius: 'medium', scaling: '100%'};
   });
 
+  useEffect(() => {
+    applyDemoTheme(demoTheme);
+    try {
+      localStorage.setItem(DEMO_THEME_STORAGE_KEY, demoTheme);
+    } catch {}
+  }, [demoTheme]);
+
   // const handlePaste = () => {
   //   const val = pasteRef.current?.value ?? '';
   //   const parsed = parseThemeJSX(val);
@@ -328,6 +357,28 @@ export function ThemeCustomizer() {
           </div>
 
           {/* Accent color */}
+          <div style={{display: 'flex', flexDirection: 'column', gap: '0.5rem'}}>
+            <Label>
+              Preset: <strong>{demoTheme === 'mobile-native' ? 'mobile-native' : 'default'}</strong>
+            </Label>
+            <div style={{display: 'flex', gap: '0.375rem', flexWrap: 'wrap'}}>
+              <Button
+                variant={demoTheme === 'default' ? null : 'outline'}
+                size="sm"
+                onClick={() => setDemoTheme('default')}
+              >
+                Default
+              </Button>
+              <Button
+                variant={demoTheme === 'mobile-native' ? null : 'outline'}
+                size="sm"
+                onClick={() => setDemoTheme('mobile-native')}
+              >
+                Mobile Native
+              </Button>
+            </div>
+          </div>
+
           <div style={{display: 'flex', flexDirection: 'column', gap: '0.5rem'}}>
             <Label>
               Accent color: <strong>{settings.accentColor}</strong>

diff --git a/docs/pages/theming.md b/docs/pages/theming.md
@@ -25,6 +25,20 @@ Override tokens at the root or within a scope. Tokens follow the `--p-*` naming
 Because values are stored as space-separated `h s l` triplets, components call `hsl(var(--p-primary))` to render consistent
 colors. You can replace tokens with your own palette or plug in design system values.
 
+
+## Mobile Native Theme Preset
+
+PUI now includes a mobile-native preset at `src/themes/mobile-native.css`, scoped to `data-theme="mobile-native"`.
+
+```css
+@import "pui/style.css";
+@import "pui/themes/mobile-native.css";
+
+<html data-theme="mobile-native">
+```
+
+The preset pushes controls toward modern iOS UI conventions: SF-style typography stack, translucent/vibrant surfaces, grouped-list row radii, segmented controls, capsule switches/buttons, and touch-sized form fields while still using the same token contract and attribute selectors.
+
 ## Component Variants via Attributes
 
 Each component maps props to attributes, letting you target them with CSS selectors:

diff --git a/package.json b/package.json
@@ -16,13 +16,14 @@
       "source": "./src/index.ts",
       "default": "./dist/index.js"
     },
-    "./style.css": "./dist/index.css"
+    "./style.css": "./dist/index.css",
+    "./themes/mobile-native.css": "./dist/themes/mobile-native.css"
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "vite build",
+    "build": "vite build && mkdir -p dist/themes && cp src/themes/*.css dist/themes/",
     "build:demo": "cd demo && pnpm build",
     "lint": "tsc && biome lint",
     "dev": "vite build --watch",