@vahesaroyan/atomspace-theme v1.0.1

Theme provider

• you need create a theme like as theme.ts in src folder

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 theme in your app

import {theme} from './theme';
import {ThemeProvider} from '@vahesaroyan/atomspace-theme';

export const YourApp = () => {
    return (
        <ThemeProvider initial={theme}>
            <App/>
        </ThemeProvider>
    )
}

• use theme in your components

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,
        },
    });
};