diff --git a/README.md b/README.md
index ed225eb..eed1f58 100644
--- a/README.md
+++ b/README.md
@@ -48,6 +48,80 @@ const ButtonContainer = styled(Container)({
 })
 ```
 
+## Theming
+
+`styled-jss` has out of the box support for theme customization with the unified [theming](https://github.com/cssinjs/theming) package.
+
+```js
+import {ThemeProvider} from 'theming'
+import styled from 'styled-jss'
+
+const Button = styled('button')(({theme}) => ({
+  color: theme.color,
+  'background-color': theme.backgroundColor,
+  margin: props.margin,
+}))
+
+const currentTheme = {
+  primary: {
+    color: 'black',
+    backgroundColor: 'yellow',
+  },
+}
+
+const App = () => (
+  <ThemeProvider theme={currentTheme}>
+    <Button margin={20}>This is themed Button</Button>
+  </ThemeProvider>
+)
+
+export default App
+```
+
+## Composable styles
+
+You can compose your style-objects and style-functions.
+
+```js
+import colors from 'my-colors'
+
+/* let's declare some abstract mixins for example */
+
+const theme = ({theme}) => ({
+  color: colors[theme],
+  backgroundColor: colors.accent[theme],
+})
+
+const font = ({bold}) => ({
+  font: {weight: bold ? 'bold' : 'normal', family: 'Arial'}
+})
+
+const size = ({size}) => ({
+  s: {
+    fontSize: 12,
+    lineHeight: 15,
+  },
+  m: {
+    fontSize: 16,
+    lineHeight: 18
+  }
+})[size]
+
+const rounded = ({rounded}) => rounded && {borderRadius: 5}
+
+/* now we can mix them to our Button Component */
+
+const Button = styled('button')(theme, size, font, rounded)
+
+/* and that's it */
+
+<Button theme="action" size="s" rounded />
+
+/* we can also compose object-styles as well */
+
+const Button = styled('button')({margin: props => props.margin}, theme, size)
+```
+
 ## Base Style Sheet
 
 Using base Style Sheet we can reuse classes in the render function and inside of a styled component.
diff --git a/flow-typed/npm/prop-types_vx.x.x.js b/flow-typed/npm/prop-types_vx.x.x.js
new file mode 100644
index 0000000..c1c3a51
--- /dev/null
+++ b/flow-typed/npm/prop-types_vx.x.x.js
@@ -0,0 +1,80 @@
+// flow-typed signature: 15f1dbaabcfdc41488335743c4ebcc75
+// flow-typed version: <<STUB>>/prop-types_v15.5.10/flow_v0.44.2
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'prop-types'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'prop-types' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'prop-types/checkPropTypes' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/factory' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/factoryWithThrowingShims' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/factoryWithTypeCheckers' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/lib/ReactPropTypesSecret' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/prop-types' {
+  declare module.exports: any;
+}
+
+declare module 'prop-types/prop-types.min' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'prop-types/checkPropTypes.js' {
+  declare module.exports: $Exports<'prop-types/checkPropTypes'>;
+}
+declare module 'prop-types/factory.js' {
+  declare module.exports: $Exports<'prop-types/factory'>;
+}
+declare module 'prop-types/factoryWithThrowingShims.js' {
+  declare module.exports: $Exports<'prop-types/factoryWithThrowingShims'>;
+}
+declare module 'prop-types/factoryWithTypeCheckers.js' {
+  declare module.exports: $Exports<'prop-types/factoryWithTypeCheckers'>;
+}
+declare module 'prop-types/index' {
+  declare module.exports: $Exports<'prop-types'>;
+}
+declare module 'prop-types/index.js' {
+  declare module.exports: $Exports<'prop-types'>;
+}
+declare module 'prop-types/lib/ReactPropTypesSecret.js' {
+  declare module.exports: $Exports<'prop-types/lib/ReactPropTypesSecret'>;
+}
+declare module 'prop-types/prop-types.js' {
+  declare module.exports: $Exports<'prop-types/prop-types'>;
+}
+declare module 'prop-types/prop-types.min.js' {
+  declare module.exports: $Exports<'prop-types/prop-types.min'>;
+}
diff --git a/flow-typed/npm/theming_vx.x.x.js b/flow-typed/npm/theming_vx.x.x.js
new file mode 100644
index 0000000..1c4853d
--- /dev/null
+++ b/flow-typed/npm/theming_vx.x.x.js
@@ -0,0 +1,165 @@
+// flow-typed signature: 0b2dbbd7a0e7a4a61efa8f5cb564e5d5
+// flow-typed version: <<STUB>>/theming_v1.1.0/flow_v0.44.2
+
+/**
+ * This is an autogenerated libdef stub for:
+ *
+ *   'theming'
+ *
+ * Fill this stub out by replacing all the `any` types.
+ *
+ * Once filled out, we encourage you to share your work with the
+ * community by sending a pull request to:
+ * https://github.com/flowtype/flow-typed
+ */
+
+declare module 'theming' {
+  declare module.exports: any;
+}
+
+/**
+ * We include stubs for each file inside this npm package in case you need to
+ * require those files directly. Feel free to delete any files that aren't
+ * needed.
+ */
+declare module 'theming/dist/cjs/channel' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/cjs/create-theme-listener' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/cjs/create-theme-provider' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/cjs/create-with-theme' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/cjs/index' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/esm/channel' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/esm/create-theme-listener' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/esm/create-theme-provider' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/esm/create-with-theme' {
+  declare module.exports: any;
+}
+
+declare module 'theming/dist/esm/index' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/channel' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-theme-listener' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-theme-listener.test' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-theme-provider' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-theme-provider.test' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-with-theme' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/create-with-theme.test' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/index' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/index.test' {
+  declare module.exports: any;
+}
+
+declare module 'theming/src/test-helpers' {
+  declare module.exports: any;
+}
+
+// Filename aliases
+declare module 'theming/dist/cjs/channel.js' {
+  declare module.exports: $Exports<'theming/dist/cjs/channel'>;
+}
+declare module 'theming/dist/cjs/create-theme-listener.js' {
+  declare module.exports: $Exports<'theming/dist/cjs/create-theme-listener'>;
+}
+declare module 'theming/dist/cjs/create-theme-provider.js' {
+  declare module.exports: $Exports<'theming/dist/cjs/create-theme-provider'>;
+}
+declare module 'theming/dist/cjs/create-with-theme.js' {
+  declare module.exports: $Exports<'theming/dist/cjs/create-with-theme'>;
+}
+declare module 'theming/dist/cjs/index.js' {
+  declare module.exports: $Exports<'theming/dist/cjs/index'>;
+}
+declare module 'theming/dist/esm/channel.js' {
+  declare module.exports: $Exports<'theming/dist/esm/channel'>;
+}
+declare module 'theming/dist/esm/create-theme-listener.js' {
+  declare module.exports: $Exports<'theming/dist/esm/create-theme-listener'>;
+}
+declare module 'theming/dist/esm/create-theme-provider.js' {
+  declare module.exports: $Exports<'theming/dist/esm/create-theme-provider'>;
+}
+declare module 'theming/dist/esm/create-with-theme.js' {
+  declare module.exports: $Exports<'theming/dist/esm/create-with-theme'>;
+}
+declare module 'theming/dist/esm/index.js' {
+  declare module.exports: $Exports<'theming/dist/esm/index'>;
+}
+declare module 'theming/src/channel.js' {
+  declare module.exports: $Exports<'theming/src/channel'>;
+}
+declare module 'theming/src/create-theme-listener.js' {
+  declare module.exports: $Exports<'theming/src/create-theme-listener'>;
+}
+declare module 'theming/src/create-theme-listener.test.js' {
+  declare module.exports: $Exports<'theming/src/create-theme-listener.test'>;
+}
+declare module 'theming/src/create-theme-provider.js' {
+  declare module.exports: $Exports<'theming/src/create-theme-provider'>;
+}
+declare module 'theming/src/create-theme-provider.test.js' {
+  declare module.exports: $Exports<'theming/src/create-theme-provider.test'>;
+}
+declare module 'theming/src/create-with-theme.js' {
+  declare module.exports: $Exports<'theming/src/create-with-theme'>;
+}
+declare module 'theming/src/create-with-theme.test.js' {
+  declare module.exports: $Exports<'theming/src/create-with-theme.test'>;
+}
+declare module 'theming/src/index.js' {
+  declare module.exports: $Exports<'theming/src/index'>;
+}
+declare module 'theming/src/index.test.js' {
+  declare module.exports: $Exports<'theming/src/index.test'>;
+}
+declare module 'theming/src/test-helpers.js' {
+  declare module.exports: $Exports<'theming/src/test-helpers'>;
+}
diff --git a/package.json b/package.json
index b659cd4..64eff1e 100644
--- a/package.json
+++ b/package.json
@@ -38,10 +38,12 @@
   },
   "homepage": "https://github.com/cssinjs/styled-jss#readme",
   "dependencies": {
+    "deep-extend": "^0.5.0",
     "is-observable": "^0.2.0",
     "is-react-prop": "^1.0.0",
-    "jss": "^9.5.1",
-    "jss-preset-default": "^4.0.0"
+    "jss": "^9.8.0",
+    "jss-preset-default": "^4.3.0",
+    "theming": "^1.3.0"
   },
   "peerDependencies": {
     "react": ">=14"
diff --git a/src/createStyled.js b/src/createStyled.js
index 4ca2731..7a75946 100644
--- a/src/createStyled.js
+++ b/src/createStyled.js
@@ -2,6 +2,7 @@ import styled from './styled'
 
 import type {
   BaseStylesType,
+  ComponentStyleType,
   StyledType,
   StyledElementType,
 } from './types'
@@ -21,7 +22,7 @@ const createStyled = (jss: Function) => (baseStyles: BaseStylesType = {}): Style
   }
 
   const styledWrapper = element =>
-    (ownStyle): StyledElementType =>
+    (...ownStyle: ComponentStyleType[]): StyledElementType =>
       styled({element, ownStyle, mountSheet, jss})
 
   Object.defineProperty(styledWrapper, 'sheet', ({
diff --git a/src/styled.js b/src/styled.js
index 1996839..379174b 100644
--- a/src/styled.js
+++ b/src/styled.js
@@ -1,4 +1,6 @@
 import {Component, createElement} from 'react'
+import {object} from 'prop-types'
+import {themeListener, channel} from 'theming'
 
 import filterProps from './utils/filterProps'
 import composeClasses from './utils/composeClasses'
@@ -16,11 +18,15 @@ type Comp = Function & Component<*>
 
 type StyledArgs = {
   element: TagNameOrStyledElementType | Comp,
-  ownStyle: ComponentStyleType,
+  ownStyle: ComponentStyleType[],
   mountSheet: Function,
   jss: Function
 }
 
+type StateType = {
+  theme?: Object
+}
+
 const getElementName = (element: Comp): string =>
   element.displayName || element.name || 'StyledElement'
 
@@ -36,35 +42,47 @@ const getParamsByElement = (element) => {
 
 const styled = ({element, ownStyle, mountSheet, jss}: StyledArgs) => {
   const {
-    style,
+    style = [],
     tagName,
     reactComponent,
   }: {
-    style?: ComponentStyleType,
+    style?: ComponentStyleType[],
     tagName: string,
     reactComponent?: typeof element
   } = getParamsByElement(element)
 
-  const elementStyle = {...style, ...ownStyle}
+  const elementStyle = style.concat(ownStyle)
 
-  const {dynamicStyle, staticStyle} = getSeparatedStyles(elementStyle)
+  const {dynamicStyle, staticStyle} = getSeparatedStyles(...elementStyle)
   const staticTagName = staticStyle && generateTagName(tagName)
 
+  const isFunctionStyle = typeof dynamicStyle === 'function'
+
   const availableDynamicTagNames = []
   const classMap = {}
 
   let staticClassName
 
-  class StyledElement extends Component<StyledElementPropsType> {
+  class StyledElement extends Component<StyledElementPropsType, StateType> {
     static tagName: string = tagName
-    static style: ComponentStyleType = elementStyle
+    static style: ComponentStyleType[] = elementStyle
+    static contextTypes = {
+      [channel]: object
+    }
+
+    constructor(props: StyledElementPropsType, context: any) {
+      super(props, context)
 
-    constructor(props: StyledElementPropsType) {
-      super(props)
       if (!this.dynamicTagName && dynamicStyle) {
         this.dynamicTagName = availableDynamicTagNames.pop() || generateTagName(tagName)
       }
 
+      this.state = {}
+
+      if (context[channel]) {
+        this.state.theme = themeListener.initial(context)
+      }
+
       this.staticClassName = staticClassName
     }
 
@@ -84,30 +102,53 @@ const styled = ({element, ownStyle, mountSheet, jss}: StyledArgs) => {
       }
 
       classMap[this.dynamicTagName] = classMap[this.dynamicTagName] || rulesIndex.slice(rulesTotal)
-      this.updateSheet(this.props)
+
+      this.updateSheet(this.props, this.state)
+    }
+
+    componentDidMount() {
+      if (this.state.theme) {
+        this.subscriptionId = themeListener.subscribe(this.context, this.setTheme)
+      }
     }
 
-    componentWillReceiveProps(nextProps: StyledElementPropsType) {
-      if (dynamicStyle) this.updateSheet(nextProps)
+    componentWillUpdate(nextProps: StyledElementPropsType, nextState: StateType) {
+      if (dynamicStyle) this.updateSheet(nextProps, nextState)
     }
 
     componentWillUnmount() {
       availableDynamicTagNames.push(this.dynamicTagName)
+
+      if (this.subscriptionId) {
+        themeListener.unsubscribe(this.context, this.subscriptionId)
+      }
     }
 
+    setTheme = (theme: Object) => this.setState({theme})
+
     dynamicTagName = ''
     sheet: JssSheet
     staticClassName = ''
+    subscriptionId: ?number
 
-    updateSheet(props: StyledElementPropsType) {
+    updateSheet(props: StyledElementPropsType, state: StateType) {
       let rule
       let ruleIndex = 0
 
+      const styleProps = state.theme
+        ? Object.assign({}, state, props)
+        : props
+
       // nested styles become to flatten rules, so we need to update each nested rule
       for (ruleIndex; ruleIndex < classMap[this.dynamicTagName].length; ruleIndex++) {
         rule = classMap[this.dynamicTagName][ruleIndex]
 
-        this.sheet.update(rule.key, props)
+        if (isFunctionStyle) {
+          this.sheet.update(rule.key, styleProps)
+        }
+        else {
+          this.sheet.update(rule.key, styleProps)
+        }
       }
     }
 
diff --git a/src/tests/__snapshots__/functional.spec.jsx.snap b/src/tests/__snapshots__/functional.spec.jsx.snap
index 93e2c00..b9e9fa3 100644
--- a/src/tests/__snapshots__/functional.spec.jsx.snap
+++ b/src/tests/__snapshots__/functional.spec.jsx.snap
@@ -100,6 +100,59 @@ exports[`functional tests Observables should use observable value 1`] = `
 }"
 `;
 
+exports[`functional tests composable styles should compose all function styles 1`] = `
+".button-1-id {
+  color: red;
+  background-color: green;
+  margin: 20px;
+  padding: 20px;
+}"
+`;
+
+exports[`functional tests composable styles should compose all function styles 2`] = `
+".button-1-id {
+  color: white;
+  background-color: black;
+  margin: 20px;
+  padding: 20px;
+}"
+`;
+
+exports[`functional tests composable styles should merge all object styles 1`] = `
+".button-1-id {
+  margin: 10px;
+  padding: 20px;
+}
+.button-2-id {
+  color: red;
+  background-color: green;
+}"
+`;
+
+exports[`functional tests composable styles should merge and compose all styles 1`] = `
+".button-1-id {
+  margin: 20px;
+  padding: 20px;
+}
+.button-2-id {
+  border-radius: 100%;
+  color: red;
+  background-color: green;
+}"
+`;
+
+exports[`functional tests composable styles should merge and compose all styles 2`] = `
+".button-1-id {
+  margin: 20px;
+  padding: 20px;
+}
+.button-2-id {
+  border-radius: 100%;
+  color: black;
+  background-color: white;
+}"
+`;
+
 exports[`functional tests should update dynamic props for conditional rules 1`] = `
 ".button-1-id {
   padding: 10px;
@@ -271,3 +324,35 @@ exports[`functional tests should use props on remount 2`] = `
   color: red;
 }"
 `;
+
+exports[`functional tests theming should update theme 1`] = `
+".button-1-id {
+  color: green;
+  background-color: white;
+}"
+`;
+
+exports[`functional tests theming should update theme 2`] = `
+".button-1-id {
+  color: yellow;
+  background-color: blue;
+}"
+`;
+
+exports[`functional tests theming should work with ThemeProvider 1`] = `
+".button-1-id {
+  color: green;
+  background-color: white;
+}"
+`;
+
+exports[`functional tests theming should work with nested ThemeProvider 1`] = `
+".button-1-id {
+  color: green;
+  background-color: white;
+}
+.button-2-id {
+  color: blue;
+  background-color: yellow;
+}"
+`;
diff --git a/src/tests/functional.spec.jsx b/src/tests/functional.spec.jsx
index da2c319..08d3675 100644
--- a/src/tests/functional.spec.jsx
+++ b/src/tests/functional.spec.jsx
@@ -1,6 +1,7 @@
 import 'react-dom'
 import React from 'react'
 import Observable from 'zen-observable'
+import {ThemeProvider} from 'theming'
 import Enzyme, {mount} from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 
@@ -253,6 +254,186 @@ describe('functional tests', () => {
       }
 
 
+      wrapper.unmount()
+    })
+  })
+
+  describe('composable styles', () => {
+    it('should merge all object styles', () => {
+      const Button = styled('button')(
+        {color: props => props.color},
+        {margin: 10},
+        {padding: 20},
+        {backgroundColor: props => props.backgroundColor}
+      )
+
+      const wrapper = mount(
+        <Button color="red" backgroundColor="green" />
+      )
+
+      const {sheet} = styled
+
+      assertSheet(sheet)
+      wrapper.unmount()
+    })
+
+    it('should compose all function styles', () => {
+      const Button = styled('button')(
+        (props => props.theme === 'action' && ({
+          color: 'red',
+          'background-color': 'green'
+        })),
+        (props => props.theme === 'normal' && ({
+          color: 'white',
+          'background-color': 'black'
+        })),
+        (() => ({
+          margin: 20,
+          padding: 20
+        }))
+      )
+
+      const wrapper = mount(
+        <Button theme="action" />
+      )
+      const {sheet} = styled
+
+      assertSheet(sheet)
+      wrapper.setProps({theme: 'normal'})
+      assertSheet(sheet)
+      wrapper.unmount()
+    })
+
+    it('should merge and compose all styles', () => {
+      const round = props => props.round && ({
+        'border-radius': '100%'
+      })
+
+      const theme = props => ({
+        action: {
+          color: 'red',
+          'background-color': 'green',
+        },
+        normal: {
+          color: 'black',
+          'background-color': 'white',
+        },
+      })[props.theme]
+
+      const Button = styled('button')({
+        margin: 20,
+        padding: 20
+      }, round, theme)
+
+      const wrapper = mount(
+        <Button theme="action" round />
+      )
+      const {sheet} = styled
+
+      assertSheet(sheet)
+      wrapper.setProps({theme: 'normal', round: false})
+      assertSheet(sheet)
+      wrapper.unmount()
+    })
+  })
+
+  describe('theming', () => {
+    it('should work with ThemeProvider', () => {
+      const initialTheme = {
+        color: {
+          primary: 'green',
+          secondary: 'white'
+        }
+      }
+
+      const Button = styled('button')(({theme}) => ({
+        color: theme.color.primary,
+        'background-color': theme.color.secondary,
+      }))
+
+      const wrapper = mount(
+        <ThemeProvider theme={initialTheme}>
+          <Button />
+        </ThemeProvider>
+      )
+      const {sheet} = styled
+
+      assertSheet(sheet)
+
+      wrapper.unmount()
+    })
+
+    it('should update theme', () => {
+      const initialTheme = {
+        color: {
+          primary: 'green',
+          secondary: 'white'
+        }
+      }
+
+      const Button = styled('button')(({theme}) => ({
+        color: theme.color.primary,
+        'background-color': theme.color.secondary,
+      }))
+
+      const App = (props: {theme: Object}) => (
+        <ThemeProvider theme={props.theme}>
+          <Button />
+        </ThemeProvider>
+      )
+
+      const wrapper = mount(<App theme={initialTheme} />)
+      const {sheet} = styled
+
+      assertSheet(sheet)
+
+      const nextTheme = {
+        color: {
+          primary: 'yellow',
+          secondary: 'blue'
+        }
+      }
+      wrapper.setProps({theme: nextTheme})
+
+      assertSheet(sheet)
+
+      wrapper.unmount()
+    })
+
+    it('should work with nested ThemeProvider', () => {
+      const themes = [{
+        color: {
+          primary: 'green',
+          secondary: 'white'
+        }
+      }, {
+        color: {
+          primary: 'blue',
+          secondary: 'yellow'
+        }
+      }]
+
+      const Button = styled('button')(({theme}) => ({
+        color: theme.color.primary,
+        'background-color': theme.color.secondary,
+      }))
+
+      const App = () => (
+        <ThemeProvider theme={themes[0]}>
+          <div>
+            <Button />
+            <ThemeProvider theme={themes[1]}>
+              <Button />
+            </ThemeProvider>
+          </div>
+        </ThemeProvider>
+      )
+
+      const wrapper = mount(<App />)
+      const {sheet} = styled
+
+      assertSheet(sheet)
+
       wrapper.unmount()
     })
   })
diff --git a/src/types/index.js b/src/types/index.js
index 2074f09..21b5f16 100644
--- a/src/types/index.js
+++ b/src/types/index.js
@@ -3,12 +3,12 @@ export type JssStyle = Object
 export type JssSheet = Object
 
 export type BaseStylesType = JssStyles
-export type ComponentStyleType = JssStyle
+export type ComponentStyleType = JssStyle | (props: Object) => ?JssStyle
 export type StyledType = Function & {
   mountSheet: Function,
   styles: JssStyles
 }
-export type StyledElementAttrsType = {tagName: string, style: ComponentStyleType}
+export type StyledElementAttrsType = {tagName: string, style: ComponentStyleType[]}
 export type StyledElementType = Function & StyledElementAttrsType
 export type TagNameOrStyledElementType = string | StyledElementType
 export type StyledElementPropsType = {
diff --git a/src/utils/getSeparatedStyles.js b/src/utils/getSeparatedStyles.js
index b416ca2..f1eba1a 100644
--- a/src/utils/getSeparatedStyles.js
+++ b/src/utils/getSeparatedStyles.js
@@ -1,15 +1,32 @@
 import isObservable from 'is-observable'
 
+import {type ComponentStyleType} from '../types'
+
 const isObject = value =>
   typeof value === 'object' && value !== null && !Array.isArray(value)
 
-type separatedStyles = {dynamicStyle?: Object, staticStyle?: Object}
+type separatedStyles = {dynamicStyle?: ComponentStyleType, staticStyle?: Object}
 
 /**
  * Extracts static and dynamic styles objects separately
  */
-const getSeparatedStyles = (styles: Object): separatedStyles => {
+const getSeparatedStyles = (...initialStyles: ComponentStyleType[]): separatedStyles => {
   const result = {}
+
+  const styles = {}
+  const fns = []
+
+  for (let i = 0; i < initialStyles.length; i++) {
+    const style = initialStyles[i]
+
+    if (typeof style === 'function') {
+      fns.push(style)
+    }
+    else {
+      Object.assign(styles, style)
+    }
+  }
+
   const keys = Object.keys(styles)
 
   for (let i = 0; i < keys.length; i++) {
@@ -27,6 +44,20 @@ const getSeparatedStyles = (styles: Object): separatedStyles => {
     }
   }
 
+  if (fns.length) {
+    const {dynamicStyle} = result
+
+    result.dynamicStyle = (props) => {
+      const fnObjects = []
+
+      for (let i = 0; i < fns.length; i++) {
+        fnObjects.push(fns[i](props))
+      }
+
+      return Object.assign({}, dynamicStyle, ...fnObjects)
+    }
+  }
+
   return result
 }
 
diff --git a/yarn.lock b/yarn.lock
index a0aa6e5..6d010d7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -904,6 +904,10 @@ braces@^1.8.2:
     preserve "^0.2.0"
     repeat-element "^1.1.2"
 
+brcast@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/brcast/-/brcast-3.0.1.tgz#6256a8349b20de9eed44257a9b24d71493cd48dd"
+
 browser-resolve@^1.11.2:
   version "1.11.2"
   resolved "https://registry.yarnpkg.com/browser-resolve/-/browser-resolve-1.11.2.tgz#8ff09b0a2c421718a1051c260b32e48f442938ce"
@@ -1294,6 +1298,10 @@ decompress-response@^3.2.0:
   dependencies:
     mimic-response "^1.0.0"
 
+deep-extend@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.5.0.tgz#6ef4a09b05f98b0e358d6d93d4ca3caec6672803"
+
 deep-extend@~0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.4.1.tgz#efe4113d08085f4e6f9687759810f807469e2253"
@@ -2252,6 +2260,10 @@ https-proxy-agent@^1.0.0:
     debug "2"
     extend "3"
 
+hyphenate-style-name@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz#31160a36930adaf1fc04c6074f7eb41465d4ec4b"
+
 iconv-lite@0.4.13, iconv-lite@~0.4.13:
   version "0.4.13"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.13.tgz#1f88aba4ab0b1508e8312acc39345f36e992e2f2"
@@ -2393,6 +2405,10 @@ is-fullwidth-code-point@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f"
 
+is-function@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5"
+
 is-glob@^2.0.0, is-glob@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
@@ -2458,6 +2474,12 @@ is-plain-obj@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
 
+is-plain-object@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
+  dependencies:
+    isobject "^3.0.1"
+
 is-posix-bracket@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz#3334dc79774368e92f016e6fbc0a88f5cd6e6bc4"
@@ -2536,6 +2558,10 @@ isobject@^2.0.0:
   dependencies:
     isarray "1.0.0"
 
+isobject@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
+
 isomorphic-fetch@^2.1.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
@@ -2969,9 +2995,11 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.3.6"
 
-jss-camel-case@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-6.0.0.tgz#7cf8453e395c31fed931d11efbc885edcd61132e"
+jss-camel-case@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/jss-camel-case/-/jss-camel-case-6.1.0.tgz#ccb1ff8d6c701c02a1fed6fb6fb6b7896e11ce44"
+  dependencies:
+    hyphenate-style-name "^1.0.2"
 
 jss-compose@^5.0.0:
   version "5.0.0"
@@ -2979,23 +3007,18 @@ jss-compose@^5.0.0:
   dependencies:
     warning "^3.0.0"
 
-jss-default-unit@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.0.tgz#a308ead4f587ebe17cc845f9870867400de90910"
-  dependencies:
-    is-observable "^0.2.0"
+jss-default-unit@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/jss-default-unit/-/jss-default-unit-8.0.2.tgz#cc1e889bae4c0b9419327b314ab1c8e2826890e6"
 
-jss-expand@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-5.0.0.tgz#8eadb782f29ec5f1d285451dd38052d5ac51644a"
-  dependencies:
-    is-observable "^0.2.0"
+jss-expand@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/jss-expand/-/jss-expand-5.1.0.tgz#b1ad74ec18631f34f65a2124fcfceb6400610e3d"
 
-jss-extend@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-6.0.1.tgz#e53430bc92a42e50d036883ccfecfbc4e1199147"
+jss-extend@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/jss-extend/-/jss-extend-6.2.0.tgz#4af09d0b72fb98ee229970f8ca852fec1ca2a8dc"
   dependencies:
-    is-observable "^0.2.0"
     warning "^3.0.0"
 
 jss-global@^3.0.0:
@@ -3008,28 +3031,28 @@ jss-nested@^6.0.1:
   dependencies:
     warning "^3.0.0"
 
-jss-preset-default@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-4.0.1.tgz#822cecb87c27ff91633774422f4c221d61486b65"
+jss-preset-default@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-4.3.0.tgz#7bc91b0b282492557d36ed4e5c6d7c8cb3154bb8"
   dependencies:
-    jss-camel-case "^6.0.0"
+    jss-camel-case "^6.1.0"
     jss-compose "^5.0.0"
-    jss-default-unit "^8.0.0"
-    jss-expand "^5.0.0"
-    jss-extend "^6.0.1"
+    jss-default-unit "^8.0.2"
+    jss-expand "^5.1.0"
+    jss-extend "^6.2.0"
     jss-global "^3.0.0"
     jss-nested "^6.0.1"
     jss-props-sort "^6.0.0"
-    jss-template "^1.0.0"
+    jss-template "^1.0.1"
     jss-vendor-prefixer "^7.0.0"
 
 jss-props-sort@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/jss-props-sort/-/jss-props-sort-6.0.0.tgz#9105101a3b5071fab61e2d85ea74cc22e9b16323"
 
-jss-template@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/jss-template/-/jss-template-1.0.0.tgz#4b874608706ddceecacdb5567e254aecb6ea69b3"
+jss-template@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/jss-template/-/jss-template-1.0.1.tgz#09aed9d86cc547b07f53ef355d7e1777f7da430a"
   dependencies:
     warning "^3.0.0"
 
@@ -3039,9 +3062,9 @@ jss-vendor-prefixer@^7.0.0:
   dependencies:
     css-vendor "^0.3.8"
 
-jss@^9.5.1:
-  version "9.5.1"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-9.5.1.tgz#c869f38cdc44a32f4425fe007ea46b8891536326"
+jss@^9.8.0:
+  version "9.8.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-9.8.0.tgz#77830def563870103f8671ed31ce3a3d2f32aa2b"
   dependencies:
     is-in-browser "^1.1.3"
     symbol-observable "^1.1.0"
@@ -3795,7 +3818,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
   dependencies:
@@ -4467,6 +4490,15 @@ text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
 
+theming@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/theming/-/theming-1.3.0.tgz#286d5bae80be890d0adc645e5ca0498723725bdc"
+  dependencies:
+    brcast "^3.0.1"
+    is-function "^1.0.1"
+    is-plain-object "^2.0.1"
+    prop-types "^15.5.8"
+
 throat@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"