Skip to content

Commit 7bb040c

Browse files
committed
docs: add Material 3 theming guide to README
1 parent c52a65a commit 7bb040c

File tree

1 file changed

+35
-0
lines changed

1 file changed

+35
-0
lines changed

README.md

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -232,6 +232,41 @@ function MyComponent() {
232232
| `children` | `ReactNode` | - | Content to render inside |
233233
| `style` | `StyleProp<ViewStyle>` | - | Custom styles |
234234

235+
## Theming
236+
237+
All components inherit their colors from Material 3's `MaterialTheme`. To customize colors (including outline colors, primary colors, etc.), wrap your Compose content with a custom theme in your Android app.
238+
239+
### Using XML Themes
240+
241+
The simplest approach is to customize your app's Material 3 theme in `res/values/themes.xml`:
242+
243+
```xml
244+
<style name="Theme.MyApp" parent="Theme.Material3.DayNight">
245+
<!-- Primary brand color -->
246+
<item name="colorPrimary">@color/my_primary</item>
247+
<!-- Outline color for text fields -->
248+
<item name="colorOutline">@color/my_outline</item>
249+
<!-- Focused outline color -->
250+
<item name="colorPrimaryContainer">@color/my_primary_container</item>
251+
<!-- Error color -->
252+
<item name="colorError">@color/my_error</item>
253+
</style>
254+
```
255+
256+
### Common Color Attributes
257+
258+
| Attribute | Affects |
259+
| ------------------------ | ------------------------------------------------- |
260+
| `colorPrimary` | Focused outline, selected states, buttons |
261+
| `colorOutline` | Default (unfocused) outline color |
262+
| `colorOutlineVariant` | Subtle outlines and dividers |
263+
| `colorError` | Error state outline and text |
264+
| `colorSurface` | Background of text fields and dialogs |
265+
| `colorOnSurface` | Text and icon colors |
266+
| `colorOnSurfaceVariant` | Placeholder and label colors |
267+
268+
For a complete list of Material 3 color attributes, see the [Material 3 Color System documentation](https://m3.material.io/styles/color/system).
269+
235270
## Example
236271

237272
Check out the [example app](./example) for a complete demo:

0 commit comments

Comments
 (0)