mirror of
https://github.com/zhigang1992/nativewind.git
synced 2026-06-16 02:34:28 +08:00
49 lines
1.1 KiB
Markdown
49 lines
1.1 KiB
Markdown
# Retrieving theme values
|
|
|
|
If you need theme values at runtime, its best to retrieve them directly from tailwind or your `tailwind.config.js`. [Tailwind CSS has documentation on referencing theme values in Javascript](https://tailwindcss.com/docs/configuration#referencing-in-java-script).
|
|
|
|
```tsx
|
|
import colors from "tailwindcss/colors";
|
|
|
|
export function MyActivityIndicator(props) {
|
|
return <ActivityIndicator size="small" color={colors.blue.500} {...props} />;
|
|
}
|
|
```
|
|
|
|
Or adding your custom colors into a shared file
|
|
|
|
```tsx
|
|
// colors.js
|
|
module.exports = {
|
|
'tahiti': {
|
|
100: '#cffafe',
|
|
200: '#a5f3fc',
|
|
300: '#67e8f9',
|
|
400: '#22d3ee',
|
|
500: '#06b6d4',
|
|
600: '#0891b2',
|
|
700: '#0e7490',
|
|
800: '#155e75',
|
|
900: '#164e63',
|
|
},
|
|
}
|
|
|
|
// tailwind.config.js
|
|
const colors = require("./colors")
|
|
|
|
module.exports = {
|
|
theme: {
|
|
extend: {
|
|
colors
|
|
}
|
|
},
|
|
}
|
|
|
|
// MyActivityIndicator.js
|
|
import colors from "./colors";
|
|
|
|
export function MyActivityIndicator(props) {
|
|
return <ActivityIndicator size="small" color={colors.tahiti.500} {...props} />;
|
|
}
|
|
```
|