Dark Mode
@redshank/native automatically handles the dark and light theme you can change using a useTheme function.
Change Theme:
import { useTheme, Switch } from '@redshank/native';
export default function App() {
const { setTheme, theme } = useTheme();
return (
<Switch
value={theme === 'dark'}
onChange={(isDark) => {
setTheme({
theme: isDark ? 'dark' : 'light'
});
}}
/>
);
};
Custom colors:
import { Appearance } from 'react-native';
import { ThemeProvider } from '@redshank/native';
const colorScheme = Appearance.getColorScheme();
const lightColors = {
customColor: '#444444'
};
const darkColors = {
customColor: '#f1f1f1'
};
export default function App() {
const isDark = colorScheme === 'dark';
return (
<ThemeProvider
theme={
theme: colorSchema || 'dark',
colors: isDark ? darkColors : lightColors
}
>
...
</ThemeProvider>
);
};
Complete example:
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.