styledwind-native 1.1.2 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +92 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -57,6 +57,98 @@ const MyComponent = () => {
|
|
|
57
57
|
export default MyComponent;
|
|
58
58
|
```
|
|
59
59
|
|
|
60
|
+
## Provider Setup
|
|
61
|
+
|
|
62
|
+
To enable color scheme management, wrap your app with the `Provider` component:
|
|
63
|
+
|
|
64
|
+
```tsx
|
|
65
|
+
import React from 'react';
|
|
66
|
+
import { Provider } from 'styledwind-native';
|
|
67
|
+
import AsyncStorage from '@react-native-async-storage/async-storage';
|
|
68
|
+
|
|
69
|
+
export default function App() {
|
|
70
|
+
return (
|
|
71
|
+
<Provider
|
|
72
|
+
initialColorScheme="device" // 'light' | 'dark' | 'device'
|
|
73
|
+
storage={AsyncStorage} // Optional: for persistent storage
|
|
74
|
+
>
|
|
75
|
+
{/* Your app content */}
|
|
76
|
+
</Provider>
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
## Color Scheme Management
|
|
82
|
+
|
|
83
|
+
`styledwind-native` provides built-in support for light/dark mode with automatic system detection.
|
|
84
|
+
|
|
85
|
+
### Using the `useColorScheme` Hook
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
import { useColorScheme } from 'styledwind-native';
|
|
89
|
+
|
|
90
|
+
function SettingsScreen() {
|
|
91
|
+
const {
|
|
92
|
+
colorScheme, // Current color scheme being used ('light' | 'dark')
|
|
93
|
+
internalColorScheme, // User's preference ('light' | 'dark' | 'device')
|
|
94
|
+
setColorScheme, // Function to change color scheme
|
|
95
|
+
toggleColorScheme // Function to toggle between light/dark
|
|
96
|
+
} = useColorScheme();
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<View>
|
|
100
|
+
<Text>Current theme: {colorScheme}</Text>
|
|
101
|
+
<Text>User preference: {internalColorScheme}</Text>
|
|
102
|
+
|
|
103
|
+
<Button
|
|
104
|
+
title="Light Mode"
|
|
105
|
+
onPress={() => setColorScheme('light')}
|
|
106
|
+
/>
|
|
107
|
+
<Button
|
|
108
|
+
title="Dark Mode"
|
|
109
|
+
onPress={() => setColorScheme('dark')}
|
|
110
|
+
/>
|
|
111
|
+
<Button
|
|
112
|
+
title="System Mode"
|
|
113
|
+
onPress={() => setColorScheme('device')}
|
|
114
|
+
/>
|
|
115
|
+
<Button
|
|
116
|
+
title="Toggle Theme"
|
|
117
|
+
onPress={toggleColorScheme}
|
|
118
|
+
/>
|
|
119
|
+
</View>
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
### Color Scheme Options
|
|
125
|
+
|
|
126
|
+
- **`'light'`**: Force light mode
|
|
127
|
+
- **`'dark'`**: Force dark mode
|
|
128
|
+
- **`'device'`**: Automatically follow the system's color scheme
|
|
129
|
+
|
|
130
|
+
### Using Dark Mode Classes
|
|
131
|
+
|
|
132
|
+
Style your components with Tailwind's dark mode utilities:
|
|
133
|
+
|
|
134
|
+
```tsx
|
|
135
|
+
const Card = tw.View`
|
|
136
|
+
bg-white
|
|
137
|
+
dark:bg-gray-800
|
|
138
|
+
border-gray-200
|
|
139
|
+
dark:border-gray-700
|
|
140
|
+
p-4
|
|
141
|
+
rounded-lg
|
|
142
|
+
`;
|
|
143
|
+
|
|
144
|
+
const Text = tw.Text`
|
|
145
|
+
text-gray-900
|
|
146
|
+
dark:text-white
|
|
147
|
+
`;
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
When set to `'device'` mode, the library automatically detects system color scheme changes and updates all styled components accordingly.
|
|
151
|
+
|
|
60
152
|
## VS Code Intellisense
|
|
61
153
|
|
|
62
154
|
Add the following to the settings of the
|