React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind))
MIT License
Bot releases are hidden (Show)
Published by gluestackadmin 9 months ago
import { styled, StyledProvider } from '@gluestack-style/react';
const config = {
aliases: {},
tokens: {
colors: {
primary: 'green',
},
},
themes: {
dark: {
colors: {
primary: 'black',
},
},
modern: {
colors: {
primary: 'red',
},
},
},
};
const App = () => {
const Box = styled(View, {
bg: '$primary',
p: '$10',
});
return (
<StyledProvider config={config}>
<Theme name="dark">
<Theme name="modern">
<Box />
</Theme>
</Theme>
</StyledProvider>
);
};
StyledProvider
, you can now use the Theme component to change the theme. or you can pass colorMode
prop inside StyledProvider
for colorMode
.$t_${{theme_name}}-${{style_property}}
to define style for theme.<Box $t_dark-bg="$primary" />
useToken
hook now supports theme tokens, it will return the current theme token value if there exist any.useToken
hookPublished by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago
Published by gluestackadmin 10 months ago