A React Native library to retrieve the dynamic theme from android devices
npm install react-native-dynamic-themeBring Material 3 Dynamic Theming to Your React Native Apps
A powerful React Native library that enables seamless Material 3 dynamic theming, automatically adapting to your users' system preferences and wallpaper colors on Android 12+.



- 📱 System-Aware: Automatically adapts to light/dark mode
- 🎨 Material You Support: Leverages Android's dynamic theming for native feel
- 🎯 Complete Color Palettes: Access to full tonal palettes with all contrast levels
- ⚡ Performance Optimized: Efficient hooks and memoization
- 🔧 Custom Color Generation: Create themes from any source color
- 📦 TypeScript Support: Fully typed for better development experience
- 🌈 Extended Schemes: Medium and high contrast variants included
``bash`
npm install react-native-dynamic-theme
or
`bash`
yarn add react-native-dynamic-theme
`tsx
import React from 'react';
import { View, Text, useColorScheme } from 'react-native';
import { getDynamicColorScheme } from 'react-native-dynamic-theme';
const App = () => {
const systemColorScheme = useColorScheme();
const dynamicColors = getDynamicColorScheme('#006971');
const colors = systemColorScheme === 'dark'
? dynamicColors.dark
: dynamicColors.light;
return (
Hello Material You! 🎨
);
};
export default App;
`
- Getting Started
- API Reference
- Examples
- Advanced Usage
- Color System Guide
Retrieves the dynamic color scheme from the device or generates one from a fallback color.
`tsx
// Uses device wallpaper colors on Android 12+, fallback on older versions
const colors = getDynamicColorScheme('#006971');
// Returns null if no fallback provided and device doesn't support dynamic theming
const colors = getDynamicColorScheme();
`
Gets extended scheme with contrast variants and tonal palettes.
`tsx
const extendedScheme = getExtendedDynamicScheme('#006971');
// Access different contrast levels
const standardColors = extendedScheme.schemes.light;
const highContrastColors = extendedScheme.schemes.lightHighContrast;
// Access tonal palettes
const primaryPalette = extendedScheme.palettes.primary;
`
Generate complete theme from any source color.
`tsx`
const customScheme = getExtendedDynamicSchemeFromSourceColor('#FF5722');
`tsx
import React, { useState } from 'react';
import { View, TouchableOpacity, Text, useColorScheme } from 'react-native';
import { getExtendedDynamicSchemeFromSourceColor } from 'react-native-dynamic-theme';
const ThemeSwitcher = () => {
const systemColorScheme = useColorScheme();
const [sourceColor, setSourceColor] = useState('#006971');
const colorOptions = ['#006971', '#FF5722', '#2196F3', '#9C27B0'];
const dynamicScheme = getExtendedDynamicSchemeFromSourceColor(sourceColor);
const colors = systemColorScheme === 'dark'
? dynamicScheme.dark
: dynamicScheme.light;
return (
Pick a Color Theme
{colorOptions.map((color) => (
style={{
backgroundColor: color,
width: 50,
height: 50,
borderRadius: 25,
marginRight: 10,
borderWidth: sourceColor === color ? 3 : 0,
borderColor: colors.outline,
}}
onPress={() => setSourceColor(color)}
/>
))}
padding: 16,
borderRadius: 12,
}}>
This container adapts to your selected color!
);
};
`
- React Native: 0.60+
- Android: API 21+ (dynamic colors on API 31+)
- iOS: 11.0+ (custom color generation)
- TypeScript: 4.0+
- Android 12+: Uses actual device wallpaper colors via Material You
- Android < 12: Generates theme from fallback color
- iOS: Generates theme from fallback color (Material You not available)
The library provides access to the complete Material 3 color system:
tsx
const { colors } = useTheme();// Main actions
backgroundColor: colors.primary
color: colors.onPrimary
// Supporting actions
backgroundColor: colors.secondaryContainer
color: colors.onSecondaryContainer
// Error states
backgroundColor: colors.errorContainer
color: colors.onErrorContainer
// Surfaces
backgroundColor: colors.surface
color: colors.onSurface
`🛠 Advanced Usage
$3
`tsx
import React, { createContext, useContext } from 'react';
import { useColorScheme } from 'react-native';
import { getDynamicColorScheme } from 'react-native-dynamic-theme';const ThemeContext = createContext();
export const ThemeProvider = ({ children }) => {
const systemColorScheme = useColorScheme();
const dynamicColors = getDynamicColorScheme('#006971');
const colors = systemColorScheme === 'dark'
? dynamicColors.dark
: dynamicColors.light;
return (
{children}
);
};
export const useTheme = () => useContext(ThemeContext);
`$3
`tsx
import { useMemo } from 'react';const MyComponent = ({ sourceColor }) => {
// Memoize expensive color calculations
const colors = useMemo(() => {
return getDynamicColorScheme(sourceColor);
}, [sourceColor]);
return ;
};
`🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch (
git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature`)This project is licensed under the MIT License - see the LICENSE file for details.
- Built with Material Color Utilities
- Inspired by Android's Material You design system
- Thanks to the React Native community
- Documentation: https://react-native-dynamic-theme.vercel.app
- Issues: GitHub Issues
- Discussions: GitHub Discussions
---
Made with ❤️ by Fouad Magdy