create-lightning-scaffold 1.0.1 → 1.0.3

package/templates/mobile/components/Swap.tsx.ejs

@@ -49,35 +49,42 @@ const JUPITER_API = 'https://api.jup.ag/swap/v1';
 <% if (styling !== 'nativewind') { %>
 const styles = StyleSheet.create({
   container: { flex: 1, backgroundColor: '#fff', padding: 24, paddingTop: 60 },
+  card: { backgroundColor: '#0a0a0a', borderRadius: 16, padding: 20 },
   header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 },
-  title: { fontSize: 18, fontWeight: '600', color: '#0a0a0a' },
-  address: { fontSize: 12, color: '#a3a3a3' },
-  card: { borderWidth: 1, borderColor: '#e5e5e5', borderRadius: 12, padding: 16 },
-  label: { fontSize: 12, color: '#a3a3a3', marginBottom: 8 },
+  title: { fontSize: 18, fontWeight: '600', color: '#fafafa' },
+  address: { fontSize: 12, color: '#737373' },
+  inputCard: { backgroundColor: '#171717', borderWidth: 1, borderColor: '#262626', borderRadius: 12, padding: 16 },
+  label: { fontSize: 12, color: '#737373', marginBottom: 8 },
   labelRow: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 },
-  switchText: { fontSize: 12, color: '#a3a3a3' },
+  switchText: { fontSize: 12, color: '#737373' },
   inputRow: { flexDirection: 'row', alignItems: 'center' },
-  input: { flex: 1, fontSize: 24, fontWeight: '500', color: '#0a0a0a' },
-  outputText: { flex: 1, fontSize: 24, fontWeight: '500', color: '#d4d4d4' },
+  input: { flex: 1, fontSize: 24, fontWeight: '500', color: '#fafafa' },
+  outputText: { flex: 1, fontSize: 24, fontWeight: '500', color: '#737373' },
   arrow: { alignItems: 'center', marginVertical: 8 },
-  arrowBox: { width: 32, height: 32, borderWidth: 1, borderColor: '#e5e5e5', borderRadius: 8, alignItems: 'center', justifyContent: 'center' },
-  arrowText: { color: '#a3a3a3', fontSize: 16 },
-  tokenBtn: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#f5f5f5', paddingHorizontal: 12, paddingVertical: 8, borderRadius: 8, gap: 6 },
-  tokenText: { fontSize: 14, fontWeight: '500', color: '#0a0a0a' },
-  tokenArrow: { fontSize: 10, color: '#a3a3a3' },
-  button: { marginTop: 16, backgroundColor: '#0a0a0a', paddingVertical: 14, borderRadius: 12, alignItems: 'center' },
-  buttonSecondary: { marginTop: 8, backgroundColor: 'transparent', borderWidth: 1, borderColor: '#e5e5e5', paddingVertical: 12, borderRadius: 12, alignItems: 'center' },
+  arrowBox: { width: 32, height: 32, backgroundColor: '#171717', borderWidth: 1, borderColor: '#262626', borderRadius: 8, alignItems: 'center', justifyContent: 'center' },
+  arrowText: { color: '#737373', fontSize: 16 },
+  tokenBtn: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#262626', paddingHorizontal: 12, paddingVertical: 8, borderRadius: 8, gap: 6 },
+  tokenText: { fontSize: 14, fontWeight: '500', color: '#fafafa' },
+  tokenArrow: { fontSize: 10, color: '#737373' },
+  button: { marginTop: 16, backgroundColor: '#fafafa', paddingVertical: 14, borderRadius: 12, alignItems: 'center' },
+  buttonSecondary: { marginTop: 8, backgroundColor: 'transparent', borderWidth: 1, borderColor: '#262626', paddingVertical: 12, borderRadius: 12, alignItems: 'center' },
   buttonDisabled: { opacity: 0.5 },
-  buttonText: { color: '#fff', fontSize: 14, fontWeight: '500' },
-  buttonTextSecondary: { color: '#0a0a0a', fontSize: 13, fontWeight: '500' },
+  buttonText: { color: '#0a0a0a', fontSize: 14, fontWeight: '500' },
+  buttonTextSecondary: { color: '#fafafa', fontSize: 13, fontWeight: '500' },
   result: { marginTop: 12, fontSize: 14, textAlign: 'center' },
-  footer: { marginTop: 16, fontSize: 12, color: '#a3a3a3', textAlign: 'center' },
+  footer: { marginTop: 16, fontSize: 12, color: '#737373', textAlign: 'center' },
   quote: { fontSize: 12, color: '#737373', marginTop: 8 },
-  modal: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.3)' },
-  modalContent: { backgroundColor: '#fff', borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 16, paddingBottom: 32 },
-  modalTitle: { fontSize: 16, fontWeight: '600', marginBottom: 16, textAlign: 'center' },
-  modalItem: { paddingVertical: 14, borderBottomWidth: 1, borderBottomColor: '#f5f5f5' },
-  modalItemText: { fontSize: 16 },
+  slippageRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 12 },
+  slippageLabel: { fontSize: 12, color: '#737373' },
+  slippageBtn: { paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4, backgroundColor: '#262626' },
+  slippageBtnActive: { backgroundColor: '#fafafa' },
+  slippageBtnText: { fontSize: 12, color: '#a3a3a3' },
+  slippageBtnTextActive: { color: '#0a0a0a' },
+  modal: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.5)' },
+  modalContent: { backgroundColor: '#171717', borderTopLeftRadius: 16, borderTopRightRadius: 16, padding: 16, paddingBottom: 32 },
+  modalTitle: { fontSize: 16, fontWeight: '600', marginBottom: 16, textAlign: 'center', color: '#fafafa' },
+  modalItem: { paddingVertical: 14, borderBottomWidth: 1, borderBottomColor: '#262626' },
+  modalItemText: { fontSize: 16, color: '#fafafa' },
 });
 <% } %>
 export function Swap() {
@@ -153,74 +160,76 @@ export function Swap() {
   return (
 <% if (styling === 'nativewind') { %>
     <View className="flex-1 bg-white p-6 pt-16">
-      <View className="flex-row items-center justify-between mb-6">
-        <Text className="text-lg font-semibold text-black">Swap</Text>
-        <TouchableOpacity onPress={() => disconnect()}>
-          <Text className="text-xs text-neutral-400">{addr.slice(0, 6)}...{addr.slice(-4)}</Text>
-        </TouchableOpacity>
-      </View>
-
-      <View className="border border-neutral-200 rounded-xl p-4">
-        <View className="flex-row justify-between mb-2">
-          <Text className="text-xs text-neutral-400">From</Text>
-          <Text className="text-xs text-neutral-400">Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</Text>
-        </View>
-        <View className="flex-row items-center">
-          <TextInput className="flex-1 text-2xl font-medium text-black" placeholder="0.00" placeholderTextColor="#d4d4d4" value={amount} onChangeText={setAmount} keyboardType="numeric" />
-          <TouchableOpacity className="flex-row items-center bg-neutral-100 px-3 py-2 rounded-lg" onPress={() => setShowPicker('from')}>
-            <Text className="text-sm font-medium mr-1">{fromToken.symbol}</Text><Text className="text-xs text-neutral-400">▼</Text>
+      <View className="bg-neutral-900 rounded-2xl p-5">
+        <View className="flex-row items-center justify-between mb-6">
+          <Text className="text-lg font-semibold text-white">Swap</Text>
+          <TouchableOpacity onPress={() => disconnect()}>
+            <Text className="text-xs text-neutral-500">{addr.slice(0, 6)}...{addr.slice(-4)}</Text>
           </TouchableOpacity>
         </View>
-        <TouchableOpacity onPress={() => setAmount(String(balances[fromToken.symbol] ?? 0))}><Text className="text-xs text-neutral-400 mt-1">Max</Text></TouchableOpacity>
-      </View>
-
-      <View className="items-center my-2">
-        <TouchableOpacity onPress={switchTokens} className="w-8 h-8 border border-neutral-200 rounded-lg items-center justify-center"><Text className="text-neutral-400">↓</Text></TouchableOpacity>
-      </View>
 
-      <View className="border border-neutral-200 rounded-xl p-4">
-        <View className="flex-row justify-between mb-2">
-          <Text className="text-xs text-neutral-400">To</Text>
-          <Text className="text-xs text-neutral-400">Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</Text>
+        <View className="bg-neutral-800 border border-neutral-700 rounded-xl p-4">
+          <View className="flex-row justify-between mb-2">
+            <Text className="text-xs text-neutral-500">From</Text>
+            <Text className="text-xs text-neutral-500">Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</Text>
+          </View>
+          <View className="flex-row items-center">
+            <TextInput className="flex-1 text-2xl font-medium text-white" placeholder="0.00" placeholderTextColor="#737373" value={amount} onChangeText={setAmount} keyboardType="numeric" />
+            <TouchableOpacity className="flex-row items-center bg-neutral-700 px-3 py-2 rounded-lg" onPress={() => setShowPicker('from')}>
+              <Text className="text-sm font-medium text-white mr-1">{fromToken.symbol}</Text><Text className="text-xs text-neutral-400">▼</Text>
+            </TouchableOpacity>
+          </View>
+          <TouchableOpacity onPress={() => setAmount(String(balances[fromToken.symbol] ?? 0))}><Text className="text-xs text-neutral-500 mt-1">Max</Text></TouchableOpacity>
         </View>
-        <View className="flex-row items-center">
-          <Text className="flex-1 text-2xl font-medium text-neutral-300">{outputAmount}</Text>
-          <TouchableOpacity className="flex-row items-center bg-neutral-100 px-3 py-2 rounded-lg" onPress={() => setShowPicker('to')}>
-            <Text className="text-sm font-medium mr-1">{toToken.symbol}</Text><Text className="text-xs text-neutral-400">▼</Text>
-          </TouchableOpacity>
+
+        <View className="items-center my-2">
+          <TouchableOpacity onPress={switchTokens} className="w-8 h-8 bg-neutral-800 border border-neutral-700 rounded-lg items-center justify-center"><Text className="text-neutral-500">↓</Text></TouchableOpacity>
         </View>
-        {quote && <Text className="text-xs text-neutral-400 mt-2">via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || 'Best route'}</Text>}
-      </View>
 
-      <View className="flex-row items-center justify-between mt-3">
-        <Text className="text-xs text-neutral-400">Slippage</Text>
-        <View className="flex-row gap-1">
-          {SLIPPAGE_OPTIONS.map((s) => (
-            <TouchableOpacity key={s} onPress={() => setSlippage(s)} className={`px-2 py-1 rounded ${slippage === s ? 'bg-black' : 'bg-neutral-100'}`}>
-              <Text className={`text-xs ${slippage === s ? 'text-white' : 'text-neutral-600'}`}>{s / 100}%</Text>
+        <View className="bg-neutral-800 border border-neutral-700 rounded-xl p-4">
+          <View className="flex-row justify-between mb-2">
+            <Text className="text-xs text-neutral-500">To</Text>
+            <Text className="text-xs text-neutral-500">Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</Text>
+          </View>
+          <View className="flex-row items-center">
+            <Text className="flex-1 text-2xl font-medium text-neutral-500">{outputAmount}</Text>
+            <TouchableOpacity className="flex-row items-center bg-neutral-700 px-3 py-2 rounded-lg" onPress={() => setShowPicker('to')}>
+              <Text className="text-sm font-medium text-white mr-1">{toToken.symbol}</Text><Text className="text-xs text-neutral-400">▼</Text>
             </TouchableOpacity>
-          ))}
+          </View>
+          {quote && <Text className="text-xs text-neutral-500 mt-2">via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || 'Best route'}</Text>}
+        </View>
+
+        <View className="flex-row items-center justify-between mt-3">
+          <Text className="text-xs text-neutral-500">Slippage</Text>
+          <View className="flex-row gap-1">
+            {SLIPPAGE_OPTIONS.map((s) => (
+              <TouchableOpacity key={s} onPress={() => setSlippage(s)} className={`px-2 py-1 rounded ${slippage === s ? 'bg-white' : 'bg-neutral-700'}`}>
+                <Text className={`text-xs ${slippage === s ? 'text-black' : 'text-neutral-400'}`}>{s / 100}%</Text>
+              </TouchableOpacity>
+            ))}
+          </View>
         </View>
-      </View>
 
-      <TouchableOpacity className={`mt-4 bg-black py-3.5 rounded-xl items-center ${loading || !quote ? 'opacity-50' : ''}`} onPress={handleSwap} disabled={loading || !quote}>
-        {loading ? <ActivityIndicator color="#fff" size="small" /> : <Text className="text-white text-sm font-medium">Swap</Text>}
-      </TouchableOpacity>
+        <TouchableOpacity className={`mt-4 bg-white py-3.5 rounded-xl items-center ${loading || !quote ? 'opacity-50' : ''}`} onPress={handleSwap} disabled={loading || !quote}>
+          {loading ? <ActivityIndicator color="#0a0a0a" size="small" /> : <Text className="text-black text-sm font-medium">Swap</Text>}
+        </TouchableOpacity>
 
-      <TouchableOpacity className={`mt-2 border border-neutral-200 py-3 rounded-xl items-center ${signing ? 'opacity-50' : ''}`} onPress={handleSignMessage} disabled={signing}>
-        {signing ? <ActivityIndicator color="#0a0a0a" size="small" /> : <Text className="text-black text-sm font-medium">Sign Message</Text>}
-      </TouchableOpacity>
+        <TouchableOpacity className={`mt-2 border border-neutral-700 py-3 rounded-xl items-center ${signing ? 'opacity-50' : ''}`} onPress={handleSignMessage} disabled={signing}>
+          {signing ? <ActivityIndicator color="#fafafa" size="small" /> : <Text className="text-white text-sm font-medium">Sign Message</Text>}
+        </TouchableOpacity>
 
-      {result && <Text className={`mt-3 text-sm text-center ${result.success ? 'text-neutral-500' : 'text-red-500'}`}>{result.message}</Text>}
-      <Text className="mt-4 text-xs text-center text-neutral-400">Gas sponsored · Powered by LazorKit + Jupiter</Text>
+        {result && <Text className={`mt-3 text-sm text-center ${result.success ? 'text-neutral-400' : 'text-red-400'}`}>{result.message}</Text>}
+        <Text className="mt-4 text-xs text-center text-neutral-500">Gas sponsored · Powered by LazorKit + Jupiter</Text>
+      </View>
 
       <Modal visible={!!showPicker} transparent animationType="slide" onRequestClose={() => setShowPicker(null)}>
-        <TouchableOpacity className="flex-1 justify-end bg-black/30" activeOpacity={1} onPress={() => setShowPicker(null)}>
-          <View className="bg-white rounded-t-2xl p-4 pb-8">
-            <Text className="text-base font-semibold text-center mb-4">Select Token</Text>
+        <TouchableOpacity className="flex-1 justify-end bg-black/50" activeOpacity={1} onPress={() => setShowPicker(null)}>
+          <View className="bg-neutral-800 rounded-t-2xl p-4 pb-8">
+            <Text className="text-base font-semibold text-center mb-4 text-white">Select Token</Text>
             {TOKENS.filter(t => t.symbol !== (showPicker === 'from' ? toToken.symbol : fromToken.symbol)).map(t => (
-              <TouchableOpacity key={t.symbol} className="py-3.5 border-b border-neutral-100" onPress={() => { showPicker === 'from' ? setFromToken(t) : setToToken(t); setShowPicker(null); }}>
-                <Text className="text-base">{t.symbol}</Text>
+              <TouchableOpacity key={t.symbol} className="py-3.5 border-b border-neutral-700" onPress={() => { showPicker === 'from' ? setFromToken(t) : setToToken(t); setShowPicker(null); }}>
+                <Text className="text-base text-white">{t.symbol}</Text>
               </TouchableOpacity>
             ))}
           </View>
@@ -229,62 +238,64 @@ export function Swap() {
     </View>
 <% } else { %>
     <View style={styles.container}>
-      <View style={styles.header}>
-        <Text style={styles.title}>Swap</Text>
-        <TouchableOpacity onPress={() => disconnect()}><Text style={styles.address}>{addr.slice(0, 6)}...{addr.slice(-4)}</Text></TouchableOpacity>
-      </View>
-
       <View style={styles.card}>
-        <View style={styles.labelRow}>
-          <Text style={styles.label}>From</Text>
-          <Text style={styles.label}>Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</Text>
+        <View style={styles.header}>
+          <Text style={styles.title}>Swap</Text>
+          <TouchableOpacity onPress={() => disconnect()}><Text style={styles.address}>{addr.slice(0, 6)}...{addr.slice(-4)}</Text></TouchableOpacity>
         </View>
-        <View style={styles.inputRow}>
-          <TextInput style={styles.input} placeholder="0.00" placeholderTextColor="#d4d4d4" value={amount} onChangeText={setAmount} keyboardType="numeric" />
-          <TouchableOpacity style={styles.tokenBtn} onPress={() => setShowPicker('from')}>
-            <Text style={styles.tokenText}>{fromToken.symbol}</Text><Text style={styles.tokenArrow}>▼</Text>
-          </TouchableOpacity>
+
+        <View style={styles.inputCard}>
+          <View style={styles.labelRow}>
+            <Text style={styles.label}>From</Text>
+            <Text style={styles.label}>Balance: {(balances[fromToken.symbol] ?? 0).toFixed(4)}</Text>
+          </View>
+          <View style={styles.inputRow}>
+            <TextInput style={styles.input} placeholder="0.00" placeholderTextColor="#737373" value={amount} onChangeText={setAmount} keyboardType="numeric" />
+            <TouchableOpacity style={styles.tokenBtn} onPress={() => setShowPicker('from')}>
+              <Text style={styles.tokenText}>{fromToken.symbol}</Text><Text style={styles.tokenArrow}>▼</Text>
+            </TouchableOpacity>
+          </View>
+          <TouchableOpacity onPress={() => setAmount(String(balances[fromToken.symbol] ?? 0))}><Text style={styles.switchText}>Max</Text></TouchableOpacity>
         </View>
-        <TouchableOpacity onPress={() => setAmount(String(balances[fromToken.symbol] ?? 0))}><Text style={styles.switchText}>Max</Text></TouchableOpacity>
-      </View>
 
-      <View style={styles.arrow}><TouchableOpacity onPress={switchTokens} style={styles.arrowBox}><Text style={styles.arrowText}>↓</Text></TouchableOpacity></View>
+        <View style={styles.arrow}><TouchableOpacity onPress={switchTokens} style={styles.arrowBox}><Text style={styles.arrowText}>↓</Text></TouchableOpacity></View>
 
-      <View style={styles.card}>
-        <View style={styles.labelRow}>
-          <Text style={styles.label}>To</Text>
-          <Text style={styles.label}>Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</Text>
-        </View>
-        <View style={styles.inputRow}>
-          <Text style={styles.outputText}>{outputAmount}</Text>
-          <TouchableOpacity style={styles.tokenBtn} onPress={() => setShowPicker('to')}>
-            <Text style={styles.tokenText}>{toToken.symbol}</Text><Text style={styles.tokenArrow}>▼</Text>
-          </TouchableOpacity>
+        <View style={styles.inputCard}>
+          <View style={styles.labelRow}>
+            <Text style={styles.label}>To</Text>
+            <Text style={styles.label}>Balance: {(balances[toToken.symbol] ?? 0).toFixed(4)}</Text>
+          </View>
+          <View style={styles.inputRow}>
+            <Text style={styles.outputText}>{outputAmount}</Text>
+            <TouchableOpacity style={styles.tokenBtn} onPress={() => setShowPicker('to')}>
+              <Text style={styles.tokenText}>{toToken.symbol}</Text><Text style={styles.tokenArrow}>▼</Text>
+            </TouchableOpacity>
+          </View>
+          {quote && <Text style={styles.quote}>via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || 'Best route'}</Text>}
         </View>
-        {quote && <Text style={styles.quote}>via Jupiter · {quote.routePlan?.[0]?.swapInfo?.label || 'Best route'}</Text>}
-      </View>
 
-      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginTop: 12 }}>
-        <Text style={{ fontSize: 12, color: '#a3a3a3' }}>Slippage</Text>
-        <View style={{ flexDirection: 'row', gap: 4 }}>
-          {SLIPPAGE_OPTIONS.map((s) => (
-            <TouchableOpacity key={s} onPress={() => setSlippage(s)} style={{ paddingHorizontal: 8, paddingVertical: 4, borderRadius: 4, backgroundColor: slippage === s ? '#0a0a0a' : '#f5f5f5' }}>
-              <Text style={{ fontSize: 12, color: slippage === s ? '#fff' : '#525252' }}>{s / 100}%</Text>
-            </TouchableOpacity>
-          ))}
+        <View style={styles.slippageRow}>
+          <Text style={styles.slippageLabel}>Slippage</Text>
+          <View style={{ flexDirection: 'row', gap: 4 }}>
+            {SLIPPAGE_OPTIONS.map((s) => (
+              <TouchableOpacity key={s} onPress={() => setSlippage(s)} style={[styles.slippageBtn, slippage === s && styles.slippageBtnActive]}>
+                <Text style={[styles.slippageBtnText, slippage === s && styles.slippageBtnTextActive]}>{s / 100}%</Text>
+              </TouchableOpacity>
+            ))}
+          </View>
         </View>
-      </View>
 
-      <TouchableOpacity style={[styles.button, (loading || !quote) && styles.buttonDisabled]} onPress={handleSwap} disabled={loading || !quote}>
-        {loading ? <ActivityIndicator color="#fff" size="small" /> : <Text style={styles.buttonText}>Swap</Text>}
-      </TouchableOpacity>
+        <TouchableOpacity style={[styles.button, (loading || !quote) && styles.buttonDisabled]} onPress={handleSwap} disabled={loading || !quote}>
+          {loading ? <ActivityIndicator color="#0a0a0a" size="small" /> : <Text style={styles.buttonText}>Swap</Text>}
+        </TouchableOpacity>
 
-      <TouchableOpacity style={[styles.buttonSecondary, signing && styles.buttonDisabled]} onPress={handleSignMessage} disabled={signing}>
-        {signing ? <ActivityIndicator color="#0a0a0a" size="small" /> : <Text style={styles.buttonTextSecondary}>Sign Message</Text>}
-      </TouchableOpacity>
+        <TouchableOpacity style={[styles.buttonSecondary, signing && styles.buttonDisabled]} onPress={handleSignMessage} disabled={signing}>
+          {signing ? <ActivityIndicator color="#fafafa" size="small" /> : <Text style={styles.buttonTextSecondary}>Sign Message</Text>}
+        </TouchableOpacity>
 
-      {result && <Text style={[styles.result, { color: result.success ? '#737373' : '#ef4444' }]}>{result.message}</Text>}
-      <Text style={styles.footer}>Gas sponsored · Powered by LazorKit + Jupiter</Text>
+        {result && <Text style={[styles.result, { color: result.success ? '#737373' : '#ef4444' }]}>{result.message}</Text>}
+        <Text style={styles.footer}>Gas sponsored · Powered by LazorKit + Jupiter</Text>
+      </View>
 
       <Modal visible={!!showPicker} transparent animationType="slide" onRequestClose={() => setShowPicker(null)}>
         <TouchableOpacity style={styles.modal} activeOpacity={1} onPress={() => setShowPicker(null)}>

package/templates/vite/src/components/History.tsx.ejs

@@ -3,18 +3,18 @@ import { useWallet } from "@lazorkit/wallet";
 import { Connection, PublicKey } from "@solana/web3.js";
 <% if (styling !== 'tailwind') { %>
 const styles: Record<string, React.CSSProperties> = {
-  container: { width: '100%', maxWidth: 360 },
+  container: { width: '100%', maxWidth: 360, background: '#0a0a0a', borderRadius: 16, padding: 24, color: '#fafafa' },
   header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 },
-  title: { fontSize: 18, fontWeight: 600, margin: 0 },
+  title: { fontSize: 18, fontWeight: 600, margin: 0, color: '#fafafa' },
   list: { display: 'flex', flexDirection: 'column', gap: 8 },
-  item: { border: '1px solid #e5e5e5', borderRadius: 12, padding: 12, textDecoration: 'none', color: 'inherit' },
+  item: { border: '1px solid #262626', borderRadius: 12, padding: 12, textDecoration: 'none', color: '#fafafa', background: '#171717' },
   row: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' },
-  sig: { fontFamily: 'monospace', fontSize: 13, color: '#0a0a0a' },
-  time: { fontSize: 12, color: '#a3a3a3' },
+  sig: { fontFamily: 'monospace', fontSize: 13, color: '#fafafa' },
+  time: { fontSize: 12, color: '#737373', marginTop: 4 },
   status: { fontSize: 11, padding: '2px 6px', borderRadius: 4 },
-  success: { backgroundColor: '#dcfce7', color: '#166534' },
-  failed: { backgroundColor: '#fee2e2', color: '#991b1b' },
-  empty: { textAlign: 'center', padding: 32, color: '#a3a3a3', fontSize: 14 },
+  success: { backgroundColor: '#14532d', color: '#4ade80' },
+  failed: { backgroundColor: '#7f1d1d', color: '#f87171' },
+  empty: { textAlign: 'center', padding: 32, color: '#737373', fontSize: 14 },
   back: { fontSize: 13, color: '#737373', background: 'none', border: 'none', cursor: 'pointer' },
 };
 <% } %>
@@ -56,26 +56,26 @@ export function History({ onBack }: Props) {
 
   return (
 <% if (styling === 'tailwind') { %>
-    <div className="w-full max-w-sm">
+    <div className="w-full max-w-sm bg-neutral-900 rounded-2xl p-6 text-white">
       <div className="flex items-center justify-between mb-4">
         <h1 className="text-lg font-semibold">History</h1>
-        <button onClick={onBack} className="text-sm text-neutral-500 hover:text-black">← Back</button>
+        <button onClick={onBack} className="text-sm text-neutral-500 hover:text-white">← Back</button>
       </div>
       {loading ? (
-        <p className="text-center py-8 text-neutral-400">Loading...</p>
+        <p className="text-center py-8 text-neutral-500">Loading...</p>
       ) : txs.length === 0 ? (
-        <p className="text-center py-8 text-neutral-400">No transactions yet</p>
+        <p className="text-center py-8 text-neutral-500">No transactions yet</p>
       ) : (
         <div className="space-y-2">
           {txs.map((tx) => (
-            <a key={tx.signature} href={explorerUrl(tx.signature)} target="_blank" rel="noopener noreferrer" className="block border border-neutral-200 rounded-xl p-3 hover:bg-neutral-50">
+            <a key={tx.signature} href={explorerUrl(tx.signature)} target="_blank" rel="noopener noreferrer" className="block border border-neutral-700 rounded-xl p-3 bg-neutral-800 hover:bg-neutral-700">
               <div className="flex justify-between items-center">
                 <span className="font-mono text-sm">{tx.signature.slice(0, 8)}...{tx.signature.slice(-8)}</span>
-                <span className={`text-xs px-2 py-0.5 rounded ${tx.err ? "bg-red-100 text-red-700" : "bg-green-100 text-green-700"}`}>
+                <span className={`text-xs px-2 py-0.5 rounded ${tx.err ? "bg-red-900 text-red-400" : "bg-green-900 text-green-400"}`}>
                   {tx.err ? "Failed" : "Success"}
                 </span>
               </div>
-              <p className="text-xs text-neutral-400 mt-1">{formatTime(tx.blockTime)}</p>
+              <p className="text-xs text-neutral-500 mt-1">{formatTime(tx.blockTime)}</p>
             </a>
           ))}
         </div>

package/templates/vite/src/components/Recovery.tsx.ejs

@@ -2,15 +2,15 @@ import { useState } from "react";
 import { useWallet } from "@lazorkit/wallet";
 <% if (styling !== 'tailwind') { %>
 const styles: Record<string, React.CSSProperties> = {
-  container: { width: '100%', maxWidth: 360 },
-  title: { fontSize: 18, fontWeight: 600, margin: 0 },
+  container: { width: '100%', maxWidth: 360, background: '#0a0a0a', borderRadius: 16, padding: 24, color: '#fafafa' },
+  title: { fontSize: 18, fontWeight: 600, margin: 0, color: '#fafafa' },
   subtitle: { marginTop: 8, fontSize: 14, color: '#737373', lineHeight: 1.5 },
-  card: { marginTop: 16, border: '1px solid #e5e5e5', borderRadius: 12, padding: 16 },
-  cardTitle: { fontSize: 14, fontWeight: 500, margin: 0 },
+  card: { marginTop: 16, border: '1px solid #262626', borderRadius: 12, padding: 16, background: '#171717' },
+  cardTitle: { fontSize: 14, fontWeight: 500, margin: 0, color: '#fafafa' },
   cardDesc: { marginTop: 4, fontSize: 13, color: '#737373' },
-  button: { marginTop: 12, width: '100%', backgroundColor: '#0a0a0a', color: '#fff', padding: '12px 16px', borderRadius: 10, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
-  buttonSecondary: { marginTop: 12, width: '100%', backgroundColor: 'transparent', color: '#0a0a0a', padding: '12px 16px', borderRadius: 10, border: '1px solid #e5e5e5', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
-  info: { marginTop: 16, padding: 12, backgroundColor: '#f5f5f5', borderRadius: 8, fontSize: 12, color: '#525252' },
+  button: { marginTop: 12, width: '100%', backgroundColor: '#fafafa', color: '#0a0a0a', padding: '12px 16px', borderRadius: 10, border: 'none', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
+  buttonSecondary: { marginTop: 12, width: '100%', backgroundColor: 'transparent', color: '#fafafa', padding: '12px 16px', borderRadius: 10, border: '1px solid #262626', fontSize: 14, fontWeight: 500, cursor: 'pointer' },
+  info: { marginTop: 16, padding: 12, backgroundColor: '#171717', borderRadius: 8, fontSize: 12, color: '#a3a3a3' },
   back: { marginTop: 16, fontSize: 13, color: '#737373', background: 'none', border: 'none', cursor: 'pointer' },
 };
 <% } %>
@@ -41,36 +41,36 @@ export function Recovery({ onBack }: Props) {
 
   return (
 <% if (styling === 'tailwind') { %>
-    <div className="w-full max-w-sm">
+    <div className="w-full max-w-sm bg-neutral-900 rounded-2xl p-6 text-white">
       <h1 className="text-lg font-semibold">Recovery & Backup</h1>
       <p className="mt-2 text-sm text-neutral-500">
         Add backup passkeys from other devices to ensure you never lose access.
       </p>
-      <div className="mt-4 border border-neutral-200 rounded-xl p-4">
+      <div className="mt-4 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
         <h3 className="text-sm font-medium">Add Backup Device</h3>
         <p className="mt-1 text-xs text-neutral-500">
           Register a passkey from another phone, tablet, or computer.
         </p>
-        <button onClick={handleAddDevice} className="mt-3 w-full py-3 bg-black text-white text-sm font-medium rounded-lg hover:opacity-90">
+        <button onClick={handleAddDevice} className="mt-3 w-full py-3 bg-white text-black text-sm font-medium rounded-lg hover:opacity-90">
           Add Device
         </button>
       </div>
-      <div className="mt-3 border border-neutral-200 rounded-xl p-4">
+      <div className="mt-3 border border-neutral-700 rounded-xl p-4 bg-neutral-800">
         <h3 className="text-sm font-medium">Manage Devices</h3>
         <p className="mt-1 text-xs text-neutral-500">
           View and remove registered passkeys.
         </p>
-        <button onClick={handleManageDevices} className="mt-3 w-full py-3 bg-transparent text-black text-sm font-medium rounded-lg border border-neutral-200 hover:bg-neutral-50">
+        <button onClick={handleManageDevices} className="mt-3 w-full py-3 bg-transparent text-white text-sm font-medium rounded-lg border border-neutral-700 hover:bg-neutral-700">
           View Devices
         </button>
       </div>
-      <div className="mt-4 p-3 bg-neutral-100 rounded-lg">
-        <p className="text-xs text-neutral-600">
+      <div className="mt-4 p-3 bg-neutral-800 rounded-lg">
+        <p className="text-xs text-neutral-400">
           <strong>Wallet:</strong>{" "}
-          <button onClick={copyAddress} className="font-mono hover:text-black">
+          <button onClick={copyAddress} className="font-mono hover:text-white">
             {wallet?.smartWallet?.slice(0, 8)}...{wallet?.smartWallet?.slice(-8)}
           </button>
-          {copied && <span className="ml-2 text-green-600">Copied!</span>}
+          {copied && <span className="ml-2 text-green-400">Copied!</span>}
         </p>
       </div>
       <button onClick={onBack} className="mt-4 text-sm text-neutral-500 hover:text-black">