Are you familiarized with React's Context API? From styled-components docs:

styled-components has full theming support by exporting a <ThemeProvider> wrapper component. This component provides a theme to all React components underneath itself via the context API.

Let's see how we could implement a ThemeProvider with styled-components.

1. First we need to create a Context to encapsulate our theming logic

We should also create a "custom hook" to ease access to our context throughout our app.

theme-context.jsx

import React from 'react'

export const ThemeContext = React.createContext({
  // our theme object
  theme: {},
  // our color modes ('dark' || 'light')
  colorMode: '',
  // a method to toggle our theme from `dark` to `light` and vice-versa
  setColorMode: () => null,
})

// export our custom hook for quick access to our context
export function useTheme() {
  return React.useContext(ThemeContext)
}

2. Now we need to extend styled-components native <ThemeProvider> to create our own ThemeProvider

Since we'll need access to our themes, I'll add two very contrived theme objects (for the sake of simplicity) as well.

theme-provider.jsx

import React from 'react'
import { ThemeProvider as StyledProvider } from 'styled-components'
import { ThemeContext } from './theme-context'

// our theme objects
const lightTheme = { colorMode: 'light', bg: '#fff', text: '#000' }
const darkTheme = { colorMode: 'dark', bg: '#000', text: '#fff' }

// our iterable theme "store"
const myThemes = [lightTheme, darkTheme]

// our default color mode
const defaultColorMode = 'light'

const ThemeProvider = ({ children, ...props }) => {
  // get fallback values from the parent ThemeProvider (if exists)
  const {
    theme: fallbackTheme,
    colorMode: fallbackColorMode,
  } = useTheme()

  // initialize our state
  const theme = props.theme ?? fallbackTheme
  const [colorMode, setColorMode] = React.useState(
    props.colorMode ?? fallbackColorMode ?? defaultColorMode,
  )

  // memoize the current theme
  const resolvedTheme = React.useMemo(() => {
    const theme = myThemes.find(t => t.colorMode === colorMode)
    if (theme) return theme
    return lightTheme
  }, [theme, myThemes, colorMode])

  // update our state if props change
  React.useEffect(() => {
    setColorMode(props.colorMode ?? fallbackColorMode ?? defaultColorMode)
  }, [props.colorMode, fallbackColorMode])

 return (
    <ThemeContext.Provider
      value={{
        theme: resolvedTheme,
        colorMode,
        setColorMode,
      }}
    >
      <StyledProvider theme={resolvedTheme}>{children}</StyledProvider>
    </ThemeContext.Provider>
  )
}

export default ThemeProvider

3. Our final step is wrapping up our main <App /> component within our ThemeProvider

app.jsx

import React from 'react'
import ThemeProvider from './theme-provider'

const App = () => {
  const [themeType, setThemeType] = React.useState('light')
  const switchThemes = () => {
    setThemeType(last => (last === 'dark' ? 'light' : 'dark'))
  }

  return (
    <ThemeProvider colorMode={themeType}>
      <MySwitch onClick={switchThemes} />
    </ThemeProvider>
  )
}

And that's it. We should now be able to toggle our theme by clicking on MySwitch. Hope that helps!

Let me know how it goes? Cheers

That's exactly what the ThemeProvider component is for!

Your styled components have access to a special theme prop when they interpolate a function:

const Button = styled.button`
  background: ${props => props.theme.primary};
`

This <Button /> component will now respond dynamically to a theme defined by a ThemeProvider. How do you define a theme? Pass any object to the theme prop of the ThemeProvider:

const theme = {
  primary: 'palevioletred',
};

<ThemeProvider theme={theme}>
  <Button>I'm now palevioletred!</Button>
</ThemeProvider>

We provide the theme to your styled components via context, meaning no matter how many components or DOM nodes are in between the component and the ThemeProvider it'll still work exactly the same:

const theme = {
  primary: 'palevioletred',
};

<ThemeProvider theme={theme}>
  <div>
    <SidebarContainer>
      <Sidebar>
        <Button>I'm still palevioletred!</Button>
      </Sidebar>
    </SidebarContainer>
  </div>
</ThemeProvider>

This means you can wrap your entire app in a single ThemeProvider, and all of your styled components will get that theme. You can swap that one property out dynamically to change between a light and a dark theme!

You can have as few or as many ThemeProviders in your app as you want. Most apps will only need one to wrap the entire app, but to have a part of your app be light themed and some other part dark themed you would just wrap them in two ThemeProviders that have different themes:

const darkTheme = {
  primary: 'black',
};

const lightTheme = {
  primary: 'white',
};

<div>
  <ThemeProvider theme={lightTheme}>
    <Main />
  </ThemeProvider>

  <ThemeProvider theme={darkTheme}>
    <Sidebar />
  </ThemeProvider>
</div>

Any styled component anywhere inside Main will now be light themed, and any styled component anywhere inside Sidebar will be dark themed. They adapt depending on which area of the application they are rendered in, and you don't have to do anything to make it happen!

I encourage you to check out our docs about theming, as styled-components was very much built with that in mind.

One of the big pain points of styles in JS before styled-components existed was that the previous libraries did encapsulation and colocation of styles very well, but none of them had proper theming support. If you want to learn more about other pain points we had with existing libraries I'd encourage you to watch my talk at ReactNL where I released styled-components. (note: styled-components' first appearance is at ~25 minutes in, don't be surprised!)

You can use the useTheme hook since v5.0:

import React, { useTheme } from 'styled-components';

export function MyComponent() {
  const theme = useTheme();

  return <p style={{ color: theme.color }}>Text</p>;
}

You can also use the withTheme higher order component that I contributed a long time ago since v1.2:

import { withTheme } from 'styled-components'

class MyComponent extends React.Component {
  render() {
    const { theme } = this.props

    console.log('Current theme: ', theme);
    // ...
  }
}

export default withTheme(MyComponent)

original response below (ignore this!)

While there is no official solution, I came up by now:

Create a Higher Order Component that will be responsable to get the current theme and pass as a prop to a component:

import React from 'react';
import { CHANNEL } from 'styled-components/lib/models/ThemeProvider';

export default Component => class extends React.Component {
  static contextTypes = {
    [CHANNEL]: React.PropTypes.func,
  };

  state = {
    theme: undefined,
  };

  componentWillMount() {
    const subscribe = this.context[CHANNEL];
    this.unsubscribe = subscribe(theme => {
      this.setState({ theme })
    });
  }

  componentWillUnmount() {
    if (typeof this.unsubscribe === 'function') this.unsubscribe();
  }

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

    return <Component theme={theme} {...this.props} />
  }
}

Then, call it on the component you need to access the theme:

import Themable from './Themable.js'
  
const Component = ({ theme }) => <Card color={theme.color} />

export default Themable(Component);