Skip to content

Commit f11f033

Browse files
committed
docs: add scheme modifier showcase to comparison page
Highlight the unique scheme: modifier that auto-expands to both light: and dark: variants. Shows how defining semantic color pairs once enables seamless theme support with zero boilerplate. Emphasizes developer experience focus of the library.
1 parent 8669598 commit f11f033

File tree

1 file changed

+49
-0
lines changed

1 file changed

+49
-0
lines changed

docs/src/content/docs/getting-started/how-it-compares.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,55 @@ With zero runtime dependencies, React Native Tailwind has the smallest attack su
109109

110110
In an era of supply chain attacks, less is more.
111111

112+
### 🎨 Smart Color Scheme Support
113+
114+
React Native Tailwind is all about **developer experience** — making things as smooth as possible. The unique `scheme:` modifier is a perfect example:
115+
116+
**One className, both themes — automatically:**
117+
118+
```tsx
119+
<View className="scheme:bg-surface p-4 rounded-lg">
120+
<Text className="scheme:text-label">Adapts to any theme!</Text>
121+
</View>
122+
```
123+
124+
With colors defined in your config:
125+
126+
```javascript
127+
// tailwind.config.mjs
128+
export default {
129+
theme: {
130+
extend: {
131+
colors: {
132+
surface: { light: "#ffffff", dark: "#1f2937" },
133+
label: { light: "#111827", dark: "#f9fafb" },
134+
},
135+
},
136+
},
137+
};
138+
```
139+
140+
**The compiler expands `scheme:` to both variants:**
141+
142+
```tsx
143+
// scheme:bg-surface automatically becomes:
144+
<View className="light:bg-surface-light dark:bg-surface-dark p-4 rounded-lg">
145+
<Text className="light:text-label-light dark:text-label-dark">
146+
Adapts to any theme!
147+
</Text>
148+
</View>
149+
```
150+
151+
🪄 **Magic happens automatically:**
152+
153+
-`scheme:` expands to both `light:` and `dark:` variants
154+
-`useColorScheme()` hook injected only when needed
155+
- ✅ Define semantic colors once, use everywhere
156+
- ✅ Perfect for iOS system colors or brand themes
157+
- ✅ No manual theme context setup required
158+
159+
Your app responds to system theme changes instantly — zero boilerplate, zero configuration.
160+
112161
## 📊 Feature Comparison
113162

114163
| Feature | React Native Tailwind | NativeWind | Uniwind |

0 commit comments

Comments
 (0)