import {DefaultTheme} from '@vahesaroyan/atomspace-theme';
import {ATTheme} from '@vahesaroyan/atomspace-theme';
declare global {
namespace AtomSpace {
interface ThemeColors {
primary: string;
secondary: string;
}
}
}
export const theme: ATTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
},
dark: {
id: 'default-dark',
colors: {
...DefaultTheme.colors,
primary: '#000',
secondary: '#000',
},
},
light: {
id: 'default-light',
colors: {
...DefaultTheme.colors,
primary: '#fff',
secondary: '#fff',
},
},
};
import {useTheme, useThemeAwareObject, ATTheme} from '@vahesaroyan/atomspace-theme';
import {Button} from "react-native";
const Component = () => {
const theme = useTheme();
const styles = useThemeAwareObject(createStyles);
return (
<View style={styles.container}>
<Text style={styles.text}>Hello World</Text>
<Button title="toggle" onPress={() =>{
theme.toggleTheme();
}}/>
</View>
);
};
const createStyles = (theme: ATTheme) => {
return StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: theme.colors.primary,
},
text: {
fontSize: 14,
color: theme.colors.primary,
},
});
};