interface ThemeContextData {

    // Helper method to change current theme.
    changeTheme: (slug: string) => void,

    // Current theme
    theme: Theme
}

const ThemedComponent = () => (
    <ThemeConsumer>
    {
        ({ theme, changeTheme }: ThemeContextData) => {
            // Use theme context here..
        }
    }
    </ThemeConsumer>
);

import {
    BlueBase,
    BlueBaseContext,
    ThemeConsumer,
    ThemeContextData,
    Text,
    View,
} from '@bluebase/core';
import { Picker } from 'react-native';
import React from 'react';

export class ThemePicker extends React.PureComponent {

    static contextType = BlueBaseContext;

    render() {
        const BB: BlueBase = this.context;
        const themes = [...BB.Themes.entries()];
        return (
            <ThemeConsumer children={({ theme, changeTheme }: ThemeContextData) => (
                <View style={{ backgroundColor: theme.palette.background.default }}>
                    <Text>Select Theme</Text>
                    <Picker
                        selectedValue={BB.Configs.getValue('theme.name')}
                        style={{ width: 150 }}
                        onValueChange={changeTheme}>
                        {themes.map(entry => <Picker.Item label={entry[1].name} value={entry[0]} key={entry[0]} />)}
                    </Picker>
                </View>
            )} />
        );
    }
}

import React from 'react';
import { Card } from '@bluebase/components';

export class ThemedCard extends React.Component {

    static defaultStyles = {
        'root': {
            backgroundColor: 'blue'
        },
        'hover': {
            backgroundColor: 'green'
        }
    }

    render() {
        const { styles, isHovering } = this.props;

        return (<Card style={isHovering ? styles.hover : styles.root} />);
    }
}

class MaterialUIPlugin extends Plugin {

    public components = {
        ThemedCard: {
            rawComponent: ThemedCardComponent,
            styles: {
                root: {
                    backgroundColor: 'orange'
                }
            }
        }
    }
}

BB.Components.setStyles('ThemedCard', {
    root: {
        backgroundColor: 'orange'
    }
});

export const theme = {
    // ...other theme props
    components: {
        ThemedCard: {
            root: {
                backgroundColor: 'yellow'
            }
        }
    }
};

const Foo = () => (
    <ThemedCard styles={{
        root: {
            backgroundColor: 'red'
        }
    }} />
);

interface ComponentStyles {
    // rule
    [key: string]: ViewStyle | TextStyle | ImageStyle | { [prop: string]: string };
}

const styles = {
  root: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  },
  title: {
    fontSize: 19,
    fontWeight: 'bold',
  },
  activeTitle: {
    color: 'red',
  },
};

const bootOptions = {

    configs: {
        'theme.overrides': {
            components: {
                // component styles
            }
        }
    },
};

export default bootOptions;

<View>
    <Text>Default light theme here</Text>
    <ThemeProvider theme="bluebase-dark">
        <View style={{ backgroundColor: theme.palette.background.default }}>
            <Text>Dark theme here</Text>
        </View>
    </ThemeProvider>
<View>

<ThemeProvider theme="bluebase-dark" overrides={{ palette: { background: { default: 'red' } } }} >
    {/* All components here will now have a red background color */}
</ThemeProvider>

import { BlueBaseApp, Theme } from '@bluebase/core';
import React from 'react';

const GreenTheme = new Theme({
	key: 'green-theme',
	name: 'Green Theme',
	light: {
		palette: {
			primary: {
				main: '#00a013',
				dark: '#007d00',
				light: '#49bb47',
			},
			secondary: {
				main: '#a0008d',
				dark: '#830082',
				light: '#be5cad',
			}
		}
	},

	dark: {
		palette: {
			primary: {
				main: '#00a013',
				dark: '#007d00',
				light: '#49bb47',
			},
			secondary: {
				main: '#a0008d',
				dark: '#830082',
				light: '#be5cad',
			}
		}
	},
});

export default function App() {
	return (
		<BlueBaseApp themes={[GreenTheme]} />
	);
}

import { BlueBaseApp, Theme } from '@bluebase/core';
import React from 'react';
import GreenTheme from './theme';

export default function App() {
	return (
		<BlueBaseApp themes={[GreenTheme]} />
	);
}

import { createPlugin } from '@bluebase/core';
import GreenTheme from './theme';

export default createPlugin({
	key: 'green-theme-plugin',
	name: 'Green Theme Plugin',

	themes: [GreenTheme]
});