developit · developit · Mar 1, 2026 · Mar 1, 2026 · Mar 1, 2026
diff --git a/demo/src/style.css b/demo/src/style.css
@@ -1,3 +1,4 @@
+@import "../../src/themes/android-mobile.css";
 @import "../../src/variables.css";
 @import "../../src/base.css";
 
@@ -2555,3 +2556,4 @@ body .docs-content pre > code {
     color: #bbc9d7;
   }
 }
+
diff --git a/demo/src/theme-customizer.tsx b/demo/src/theme-customizer.tsx
@@ -3,6 +3,7 @@ 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';
 
 /* ── hex→HSL helper ───────────────────────────────────────── */
 function hexToHsl(hex: string): [number, number, number] {
@@ -91,6 +92,8 @@ const RADIUS_MAP: Record<string, string> = {
 const SCALING_OPTIONS = ['90%', '95%', '100%', '105%', '110%'];
 
 /* ── Generate CSS from settings ────────────────────────────── */
+type DemoTheme = 'default' | 'android';
+
 interface ThemeSettings {
   accentColor: string;
   grayColor: string;
@@ -218,6 +221,28 @@ function parseThemeJSX(input: string): Partial<ThemeSettings> | null {
 }
   */
 
+
+function readSavedTheme(): DemoTheme {
+  try {
+    return localStorage.getItem(DEMO_THEME_STORAGE_KEY) === 'android' ? 'android' : 'default';
+  } catch {}
+  return 'default';
+}
+
+function applyDemoTheme(theme: DemoTheme) {
+  if (theme === 'android') {
+    document.documentElement.dataset.theme = 'android';
+    try {
+      localStorage.setItem(DEMO_THEME_STORAGE_KEY, 'android');
+    } catch {}
+    return;
+  }
+  delete document.documentElement.dataset.theme;
+  try {
+    localStorage.removeItem(DEMO_THEME_STORAGE_KEY);
+  } catch {}
+}
+
 /* ── apply/remove style element ───────────────────────────── */
 function applyCustomTheme(css: string) {
   const existing = document.getElementById(CUSTOM_THEME_STYLE_ID);
@@ -234,6 +259,8 @@ try {
   if (saved) applyCustomTheme(saved);
 } catch {}
 
+if (typeof window !== 'undefined') applyDemoTheme(readSavedTheme());
+
 /* ── Color swatch ─────────────────────────────────────────── */
 function Swatch({color, selected, onClick, label}: {
   color: string;
@@ -263,6 +290,11 @@ function Swatch({color, selected, onClick, label}: {
 
 /* ── Main component ───────────────────────────────────────── */
 export function ThemeCustomizer() {
+  const [theme, setTheme] = useState<DemoTheme>(() => {
+    if (typeof window === 'undefined') return 'default';
+    return readSavedTheme();
+  });
+
   const [settings, setSettings] = useState<ThemeSettings>(() => {
     try {
       const saved = localStorage.getItem(CUSTOM_THEME_STORAGE_KEY + '-settings');
@@ -271,6 +303,10 @@ export function ThemeCustomizer() {
     return {accentColor: 'blue', grayColor: 'slate', radius: 'medium', scaling: '100%'};
   });
 
+  useEffect(() => {
+    applyDemoTheme(theme);
+  }, [theme]);
+
   // const handlePaste = () => {
   //   const val = pasteRef.current?.value ?? '';
   //   const parsed = parseThemeJSX(val);
@@ -327,6 +363,27 @@ export function ThemeCustomizer() {
             </Dialog.Close>
           </div>
 
+
+          <div style={{display: 'flex', flexDirection: 'column', gap: '0.5rem'}}>
+            <Label>Base Theme</Label>
+            <div style={{display: 'flex', gap: '0.375rem', flexWrap: 'wrap'}}>
+              <Button
+                variant={theme === 'default' ? null : 'outline'}
+                size="sm"
+                onClick={() => setTheme('default')}
+              >
+                Default
+              </Button>
+              <Button
+                variant={theme === 'android' ? null : 'outline'}
+                size="sm"
+                onClick={() => setTheme('android')}
+              >
+                Android
+              </Button>
+            </div>
+          </div>
+
           {/* Accent color */}
           <div style={{display: 'flex', flexDirection: 'column', gap: '0.5rem'}}>
             <Label>

diff --git a/docs/pages/theming.md b/docs/pages/theming.md
@@ -65,3 +65,22 @@ Animation curves live in `--p-ease` and related tokens. Adjust them globally or
 
 When you need reduced motion support, respect the `prefers-reduced-motion` media query and reduce durations or disable
 animations in your overrides.
+
+## Native Android Mobile Theme
+
+PUI now ships an opinionated mobile theme tuned for modern Material-style surfaces and controls.
+Import it after the default stylesheet, then opt-in via `data-theme="android"`:
+
+```ts
+import 'pui/style.css';
+import 'pui/themes/android-mobile.css';
+```
+
+```html
+<html data-theme="android">
+  <!-- app -->
+</html>
+```
+
+The theme stays token-based (no runtime provider), includes light + dark palettes, and adds mobile-specific styling for
+surface elevation, pill buttons, touch-target sizing, and input focus rings.
diff --git a/package.json b/package.json
@@ -16,10 +16,12 @@
       "source": "./src/index.ts",
       "default": "./dist/index.js"
     },
-    "./style.css": "./dist/index.css"
+    "./style.css": "./dist/index.css",
+    "./themes/android-mobile.css": "./src/themes/android-mobile.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/themes"
   ],
   "scripts": {
     "build": "vite build",