Theming

Skyle provides a theming system for extensive styling. You can customize the theme by passing it through the Provider. It automatically updates on change!

Configure with Provider#

Detailed overview

...
import { Provider as StyleProvider } from 'skyle';

const myTheme = {
  colors: {
    primary: 'red',
    myCustomColor: 'blue',
  }
}

// Your root component
class App extends Component {
  render() {
    return (
      <StyleProvider value={myTheme}>
        // your app's content
      </StyleProvider>
    )
  }
}

Using the Theme#

Inside StyleSheets#

// Theme is automatically passed down when using a function inside your StyleSheet.
const styles = StyleSheet.create((o) => ({
  view: {
    backgroundColor: o.theme.colors.primary,
  },
}));

Inside Components#

Class Component
Functional Component
Consumer (both)

The theme is passed through the theme prop when using the @styled decorator.

...

@styled
class MyComponent extends Component {
  styles = styles;

  render() {
    const { theme } = this.props;

    return <Button title='Click me!' color={theme.colors.button} />;
  }
}

You can use the useTheme hook to access the theme.

...
import { useStyles, useTheme, StyleSheet, View } from 'skyle';

const MyComponent = (props) => {
  const s = useStyles(styles);
  const theme = useTheme();

  return <Button title='Click me!' color={theme.colors.button} />;
};

TypeScript#

You can define a theme type by extending skyle's type declarations with your own declarations file:

import 'skyle';

declare module 'skyle' {
  export interface Theme {
    color: {
      myCustomColor: string;
    };
  }
}